Описание: Сегодня я выкладываю достаточно интересный скрипт, который создаёт выпадающее изображение из ссылки на JavaScript . Вы просто наводите мышкой на ссылку и появляется соответствующее изображение, а когда уводите мышку от ссылки, изображение исчезает. Обратите внимание, что изображения накладываются поверх ко...

Выпадающее изображение из ссылки на JavaScript

Описание: Сегодня я выкладываю достаточно интересный скрипт, который создаёт выпадающее изображение из ссылки на JavaScript. Вы просто наводите мышкой на ссылку и появляется соответствующее изображение, а когда уводите мышку от ссылки, изображение исчезает. Обратите внимание, что изображения накладываются поверх контента, благодаря чему не происходит никаких сдвигов и рывков. Если же кому-то нужно, чтобы изображение не накладывалось на контент, спросите в комментариях - обязательно отвечу.

Результат: Наведите курсор мыши на ссылку.

Моя бабушка (82 года) Мой дядя

Код 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="#">Моя бабушка (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="#">Мой дядя</a>
      <div id="float_2" style="display: none; position: absolute;">
        <img src="foto6.jpg" alt="Фото 2" />
      </div>
    </td>
  </tr>
</table>