© Copyright 2014 Правила заимствования материалов. Сайт предназначин для лиц старше 18 лет
Отображение картинки при наведение на область можно несколько вариантов, но принцип один. Навели на область, появилась картинка. Убрали фокус с области, картинка исчезла.
Первый вариант это заготовить картинки и поставить в стилях параметр display: none; и при наведение менять этот параметр. Плюсы, все картинки загружены и просто отображать, но он же и минус, а если на эту область не наведут? То пользователь зря загружал картинку.
Второй вариант. Загружать картинку только тогда когда пользователь навел на область. Здесь можно поиграть с модификацией, я опишу когда уже готова заготовка и необходимо только менять картинку и передвигать курсор. Есть похожий вариант только полностью реализован на CSS (Всплывающая подсказка в тексте на CSS).
Структура страницы:
<body>
<p>любой текст</p>
<p class="text_img" data-img="http://www.it-article.ru/images/it-article.png">при наведение появится картинка1</p>
<p>любой текст</p>
<p class="text_img" data-img="http://www.it-article.ru/images/it-article.png">при наведение появится картинка2</p>
<!-- область отображаемая при наведении -->
<div id="showImgDiv" style="position: absolute; padding: 5px; background: gray; display: none;">
<img src="/">
</div>
</body>
Структура задана, теперь сам скрипт по отображение картинки при наведение. Пояснения по скрипту внутри. Путь до картинки можно менять, я задал прямой, можно и относительный и картинки разные.
<script type="text/javascript">
$(document).ready(function(){
//сама функция по появлению картинки
function showImg(){
//получаем название картинки
var dataImg = $(this).attr('data-img');
//проставляем ссылку на картинкку
$("#showImgDiv img").attr('src',dataImg);
//получаем позиуию области для отображения и корректируем
//отступ от верхнего левого угла наводимой области
varTop = $(this).offset().top - 20;
varLeft = $(this).offset().left + 40;
//делаем видимую область и задаем позиуии где отображать
$("#showImgDiv").css({"top":varTop,"left":varLeft}).show();
}
function showImgOff(){
//отключаем видимость
$("#showImgDiv").hide();
}
//добавляем ко всем обектам событие на запуск функции
$('.text_img').hover(showImg,showImgOff);
alert($(".text_img").length);
})
</script>
Все. Не забываем подключать библиотеку JQuery. Напомню, подключается так:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>