Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Показ картинки по наведению мыши

Автор: ShurikA 2.8.2007, 11:26

Наверняка вы сталкивались с такими вещами как пказ увеличенной картинки (или любого другого HTML ) при наведении мыжой на обьект.
Как это делается? Когда то я уже видел тут где то на форуме что то подобное, но к сожалению не нахожу...

Автор: lexxICON 2.8.2007, 13:16

Да ничего сложного. Вариантов тьма. Вот один из них

Код

<style>
    div {background-color:red; width:50px; height:50px}
</style>
<script>
    document.onmouseover = function (e) { 
        var target = e ? e.target : window.event.srcElement;
        if (target.nodeName === "DIV") { 
            target.style.width = target.style.height = "200px";
            target.style.backgroundColor = "pink";
            target.firstChild.nodeValue = "big pink";
        } else if (target.nodeName === "BODY") { 
            target = document.getElementsByTagName("div")[0];
            if (!target) return;
            target.style.width = target.style.height = "50px";
            target.style.backgroundColor = "red";
            target.firstChild.nodeValue = "small red";
            //ну а была бы картинка, поменяли бы ей адрес
            //div.src = "bigImg.gif";
        }
    }
</script>
<div>small red</div>

Автор: ShurikA 2.8.2007, 14:27

lexxICON,
Это не совсем то что мне нужно. Мне нужно кое что немного посложней.
Можно взять за пример вор эту страничку:
http://www.fotolia.com/cat1/1000000
Попробуй поводить по пребьюшкам фоток...

Автор: Mymik 2.8.2007, 15:01

ShurikA, попробуй воспользоваться поиском по слову tooltip

Автор: ShurikA 2.8.2007, 16:00

Mymik,
Пробовал, и даже нашёл, но как то это криво.
Единственное о чём я подумал это сделать следуящим образом:

1. При наведении мыши на обьект создаётся новый Child у Body в качестве DIV (соответственно с absolut position) с определённым ID.
2. С помощью Ajax заполняю его.
3. На mousemove даю ему новые координаты.
4. На mouseout убиваю, или скрываю так чтобы им же (если нужно) воспользоваться для другого обьекта.

Автор: Mymik 2.8.2007, 20:17

ShurikA, убивать не нужно. это плохо если ты юзаешь AJAX... лишние запросы к серверу, нагрузка на него и так далее... т.е. это плохо. Лучше как-то без этого

А по сути, твоя идея уже реализовывалась... т.е. все так же наполняется див данными из атрибутов элемента, который возбуждает событие наполнение... ведь совершенно идентичная идея, только другими словами...

Вот. А теперь еще такое предложение, если тебе необходимо реализовать показ увеличенной версии картинки, так почему бы вообще без AJAX все делать... Ведь ты спокойно можешь называть картинки типа myFrieng_small.jpg а большая картинка выглядит myFriend_big.jpg... и все, просто подменить эти фрагменты и отобразить div с ними... все гораздо проще и без всяких там AJAX :о)

Автор: ShurikA 3.8.2007, 20:37

Mymik,
На тему AJAX ты прав, не во всеч случаях. Если строить всё что там начодится из тех данных которые подгруженны с превьюшкой, то надо значительно больше данных загружать при постройки самой страницы, вместо того что бы подгрузить только название маленькой картинки и ID фотки (а фоток может быть много!!!). А что если мне нужно не только показать фотку, а ещё и какие то данные? уже не говоря о том случае если нужно еще, на пример, проверять то или иное состояние on-line (как пример: можно ли узеру её снимать или нет )...

Автор: Goganchic 3.8.2007, 21:51

ShurikA, слушай, может быть я туплю, но почему бы не посмотреть исходный код указанной тобой в ссылке страницы?

Автор: Mymik 4.8.2007, 10:11

Goganchic, это не спортивно :о) тем более, тогда на форуме некому будет общаться :о) а так можно узнать как дела, как жизнь и попутно обсудить тему tooltip чтобы не удалили сообщение с пометкой "флейм" :о)

ShurikA, как дела, как жизнь молодая :о) как у вас там с погодкой. Как подруга ??? smile

Цитата(ShurikA @ 3.8.2007, 20:37

)

значительно больше данных загружать

а почему больше данных ??? я чего-то не вьехал... если ты будешь динамически формировать этот div и так же динамически создавать url для страницы то от пользователя ничего не убудет...

Цитата(ShurikA @ 3.8.2007, 20:37

)

А что если мне нужно не только показать фотку, а ещё и какие то данные?

ну дык, если данные еще надо показывать, тогда конечно же да... тогда нужен AJAX... Но в первом посте ты говорил только об увеличенной картинке ;о) вот я от этого и отталкивался, мол челу нах не нужен этот AJAX если ему только картинку надо показывать...