*** WEB Star *** Журнал для настоящих web-мастеров.
Web-дизайн и не только... Заходи на Коврик TrigGer'a и ты узаешь о нем все!!!
Линия WEB Star
Общая информация
Главная
Авторам
Сотрудничество
Ссылки
Анонсы
WEB-design
WEB фокусы
Как изменить цвет скролл-бара Internet Explorer 5.5 и выше
Java Script'ы
Ссылка со стрелкой
Извращаемся над линкой <mailto> или облегчаем жизнь юзерам
Programming
Философия WEB

© Copyright Алекс aka TrigGer & x-graphic studio
© Все права защищены.

Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.kovrik.hut.ru и все имена, ссылки авторов обязательны.

*** WEB Star *** #1 WEB фокусы

Ссылка со стрелкой

Перед вами очень интересный пример использования Java Script. Вы наводите на ссылку и перед ней появляется стрелка, оповещая что ссылка выбрана. Кстати очень стильно и красиво.

Перед тем, как вставить код в страницу советую вам создать два рисунка: первый - это сама стрелка, второй - это простой квадратик с тем же фоном, что и у стрелки. Положите эти два рисунка в ту директорию, в которой у вас лежит страничка, так как эти рисунки будут браться скриптом из той директории, где лежит страничка. Но, если вас это не устраивает, то вы можете самостоятельно подправить код и положить рисунка куда вам угодно.
Все теперь можете пользоваться.

Вот код:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function imgover(imgname){
imgname.src = "arrow.gif"
}
function imgout(imgname){
imgname.src = "blank.gif"
}
// End -->
</SCRIPT>

<center>
<table border=0>
<tr><td>
<img name="pic1" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://altavista.digital.com" onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)">Altavista</A>
<br>
<img name="pic2" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.excite.com" onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)">Excite</A>
<br>
<img name="pic3" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.hotbot.com" onMouseOver="imgover(pic3)" onMouseOut="imgout(pic3)">Hotbot</A>
<br>
<img name="pic4" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.infoseek.com" onMouseOver="imgover(pic4)" onMouseOut="imgout(pic4)">Infoseek</A>
<br>
<img name="pic5" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.lycos.com" onMouseOver="imgover(pic5)" onMouseOut="imgout(pic5)">Lycos</A>
<br>
<img name="pic6" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.magellan.com" onMouseOver="imgover(pic6)" onMouseOut="imgout(pic6)">Magellan</A>
<br>
<img name="pic7" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.webcrawler.com" onMouseOver="imgover(pic7)" onMouseOut="imgout(pic7)">Webcrawler</A>
<br>
<img name="pic8" SRC="blank.gif" width=10 height=10 border=0>
<A HREF="http://www.yahoo.com" onMouseOver="imgover(pic8)" onMouseOut="imgout(pic8)">Yahoo!</A>
</td></tr></table>
</center>

Автор: Алекс aka TrigGer Источник: kovrik.hut.ru