|
Описание: Сегодня я выкладываю достаточно интересный скрипт, который создаёт выпадающее изображение из ссылки на JavaScript.
Вы просто наводите мышкой на ссылку и появляется соответствующее
изображение, а когда уводите мышку от ссылки, изображение исчезает.
Обратите внимание, что изображения накладываются поверх контента,
благодаря чему не происходит никаких сдвигов и рывков. Если же кому-то
нужно, чтобы изображение не накладывалось на контент, спросите в
комментариях - обязательно отвечу. Результат: Наведите курсор мыши на ссылку.
Код JavaScript (вставлять между тегами <head> и </head>):
<script language = "JavaScript">
function showLinkImage(id) {
document.getElementById(id).style.display = "block";
}
function hideLinkImage(id) {
document.getElementById(id).style.display = "none";
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<table align="center">
<tr>
<td align="center" valign="top">
<a href="#" onmouseover="showLinkImage('float_1')" onmouseout="hideLinkImage('float_1')">Моя бабушка (82 года)</a>
<div id="float_1" style="display: none; position: absolute;">
<img src="foto5.jpg" alt="Фото 1" />
</div>
</td>
<td align="center" valign="top">
<a href="#" onmouseover="showLinkImage('float_2')" onmouseout="hideLinkImage('float_2')">Мой дядя</a>
<div id="float_2" style="display: none; position: absolute;">
<img src="foto6.jpg" alt="Фото 2" />
</div>
</td>
</tr>
</table>
|