Появление изображения при наведении мыши на ссылку
Появление изображения при наведении мыши на ссылку с помощью JavaScript
С помощью данного скрипта можно создать эффект появления изображения при наведении мыши на ссылку с помощью чистого JavaScript кода.
Для создания такого эффекта необходимо написать следующий код:
Пример JavaScript-кода:
<script>
function showLinkImage(id) {
document.getElementById(id).style.display = "block";
}
function hideLinkImage(id) {
document.getElementById(id).style.display = "none";
}
</script>
Пример HTML-кода:
<a href="#" onmouseover="showLinkImage('pic_1')" onmouseout="hideLinkImage('pic_1')">Изображение №1</a>
<div id="pic_1" style="display: none; position: absolute;">
<img src="img01.jpg" alt="Изображение 1" />
</div>
<a href="#" onmouseover="showLinkImage('pic_2')" onmouseout="hideLinkImage('pic_2')">Изображение №2</a>
<div id="pic_2" style="display: none; position: absolute;">
<img src="img02.jpg" alt="Изображение 2" />
</div>
Скопируйте данный javascript-код и вставьте его в голове веб-страницы между тегами <head> и </head>, а html-код вставьте в нужном месте на веб-странице между тегами <body> и </body>. Также укажите своё расположение изображений с помощью тега <img>.
Результат работы скрипта
Наведите курсор мыши на ссылки ниже.
Изображение №1 Изображение №2
Обратите внимание, что изображения появляются при наведении мыши на ссылку, и при этом располагаются сверху над остальными объектами на веб-странице (как бы накладываются сверху), что не вызывает резких рывков и перемещения других объектов на странице.
Если же вам необходимо, чтобы изображения не накладывались сверху на другие объекты, а сдвигали их, то поменяйте положение изображений на значение position: relative в html-коде.
