13 октября 2016

Переход по ссылкам с эффектом меняющихся картинок

Эта великолепная гифка - с просторов интернета
 
РАМКИ
КАРТИНКИ-ССЫЛКИ
ФОН
ТЕКСТ
  Ссылки - необходимый и удобный элемент  web страницы. Существует много способов преобразования скучного вида текстовых ссылок. Среди прочих, встреченных на просторах интернета, мне понравился и такой вариант. Симпатично и удобно: со списком ссылок размещается только одна картинка, а другие "прячутся" за ней, появляясь при наведении курсора мышки на текст ссылки.

  Ниже приведен HTML код такой группы ссылок:
.
<SCRIPT LANGUAGE="JavaScript">
<!--
        img1 = new Image();
        img1.src = "прямая ссылка на pic01.jpg";

        img2 = new Image();
        img2.src = "прямая ссылка на pic02.jpg";

        img3 = new Image();
        img3.src = "прямая ссылка на pic03.jpg";

        img4 = new Image();
        img4.src = "прямая ссылка на pic04.jpg";

                                                                                                                                                                                      
  //-->
    </SCRIPT>
</head>

<body bgcolor="#FFFFFF">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="5" align="center" valign="middle"><img src="прямая ссылка на pic01.jpg" name="trg" width="150" height="150"></td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%"><a href=' web адрес страницы, на которую нужно перейти ' onmouseover="document.trg.src = 'прямая ссылка на pic01.jpg'" title="всплывающий поясняющий текст стр01">название ссылки-стр01</a></td>
</tr>
<tr>
<td width="50%"><a href=' web адрес страницы, на которую нужно перейти ' onmouseover="document.trg.src = 'прямая ссылка на pic02.jpg'" title="всплывающий поясняющий текст стр02">название ссылки-стр02</a></td>
</tr>
<tr>
<td width="50%"><a href=' web адрес страницы, на которую нужно перейти ' onmouseover="document.trg.src = 'прямая ссылка на pic03.jpg'" title="всплывающий поясняющий текст стр03">название ссылки-стр03</a></td>
</tr>
<tr>
<td width="50%"><a href=' web адрес страницы, на которую нужно перейти ' onmouseover="document.trg.src = 'прямая ссылка на pic04.jpg'" title="всплывающий поясняющий текст стр.04">название ссылки-стр04</a></td>
</tr>
</table>
</body>
</html>


ПРИМЕЧАНИЕ:
Попытка установить два подобных виджета на странице разочаровала: они блокируют друг друга. Вывод: неопытному блогеру этого делать не стоит)


Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...