Эффекты с ссылками
 

Ссылка на веб-страницу:

На главную страницу

<a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a>

Чтоб ссылка открылась в новом окне:

На главную

<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>

Всплывающий комментарий к ссылке:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Откроется в новом окне">текст</a>

Чтобы картинка была ссылкой на веб-страницу:

Связкой «картинка-ссылка» делается большинство кнопок на сайтах.

<a href="АДРЕС СТРАНИЦЫ" target=_blank title="Пояснительный текст"><img src="URL картинки"></a>

Отменить подчеркивание для ссылки:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="text-decoration: none;">Ваш текст</a>

Сделать текст ссылки обычным, (в данном примере черным) цветом и отменить подчеркивание, по сути скрыть ссылку:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="text-decoration: none; color:black;">Ваш текст</a>

Подчеркуть ссылку пунктиром:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="border-bottom: 2px dashed navy; text-decoration: none;">Ваш текст</a>

Назначить свой цвет текста ссылки и подчеркивания:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" target="_blank" style="color:green; text-decoration:underline;"><span style="color:red;">Ваш текст</span></a>

Обвести рамочкой:


htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="border: 2px solid navy; padding: 2px; text-decoration: none;">Ваш текст</a>

Обвести пунктиром:


htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="border: 2px dashed navy; padding: 2px; text-decoration: none;">Ваш текст</a>

Обвести точками и назначить свой цвет текста:


htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="border: 2px dotted navy; padding: 2px; text-decoration: none; color: red;">Ваш текст</a>

Ссылка с выделенным фоном:

htmlka.com

<a href="АДРЕС СТРАНИЦЫ" style="background:yellow; color:black">ТЕКСТ</a>

Переход к определенной строке на той же странице (работает только в IE), например: «Всем читать Отменить подчеркивание для ссылки«

1.<a name=#1></a>Нужная строка

2.<a href=#1>Ссылка-переход к нужной строке</a>

Если требуется еще переход, ставим name=#2 и т.д. (удобно для оглавлений на страницах с большим вертикальным скроллингом)

Переход к определенной строке на другой веб-странице (работает только в IE), например: «Узнать про Некоторые спецсимволы«

1.<a name=#1></a> "Некоторые спецсимволы" на <a href="http://htmlka.com" target="_blank">http://htmlka.com</a>

2.<a href=http://htmlka.com#1>Некоторые спецсимволы</a>

Переход наверх, в начало страницы (работает только в IE): В начало

<a href="#top">В начало</a>

Изменение формы курсора для отдельной ссылки:

Помощь по тегам

<a href="<a href="http://htmlka.com"" target="_blank">http://htmlka.com"</a> style="cursor:help">Помощь по тегам</a>

В Internet Explorer можно и так:

/www.htmate2.com/cursors/images/more3/1-2.ani" target="_blank">http://www.htmate2.com/cursors/images/more3/1-2.ani);" target="_blank"> Помощь по тегам

<a href="<a href="http://htmlka.com"" target="_blank">http://htmlka.com"</a> style="cursor: url(<a href="http://www.htmate2.com/cursors/images/more3/1-2.ani" target="_blank">http://www.htmate2.com/cursors/images/more3/1-2.ani</a>);"> Помощь по тегам</a>

Ссылка на свой и-мейл: Написать автору htmlka.com

<a href=mailto:адрес почты>Написать мне e-mail</a>

Список ссылок:

• link one

• link two

• link three

• link four

• link five

Код:



<ul>


<li><a href="#">link one</a></li>


<li><a href="#">link two</a></li>


<li><a href="#">link three</a></li>


<li><a href="#">link four</a></li>


<li><a href="#">link five</a></li>


</ul>




вместо # ставим свои линки, в виде http://htmlka.com

Эффект подсветки ссылки (наведите курсор на текст):

В некоторых блогсервисах может не работать

Это очень интересная ссылка

<a href="АДРЕС СТРАНИЦЫ"><font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">ТЕКСТ ССЫЛКИ</font></a>