Как сделать ссылку такого вида

nUKe · March 16, 2008

не активна

при наведении курсора и нажатии

Может быть не много криво нарисовал, но...

Если делать картинками-вс? понятно. Но можно ли как-то это реализовать не через картинки?

Иван Шумов · March 16, 2008

через css - нереал, JS покатит

nUKe · March 16, 2008

через css - нереал, JS покатит

Угу... А ты случайно не натыкался на подобные ссылки или прям ЯС? =)

Dimitry Wolotko · March 16, 2008

Можно, но через попу.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <style>
 * {margin:0;padding:0;}
 a {text-decoration:none;color:white;word-spacing:-4px;}
 </style>
</head>
<body>
<a href="#">
<span style="background-color:red;">Q</span>
<span style="background-color:blue;">W</span>
<span style="background-color:green;">E</span>
<span style="background-color:red;">R</span>
<span style="background-color:blue;">T</span>
<span style="background-color:green;">Y</span>
</a>
</body>
</html>

Иван Шумов · March 16, 2008

Все, хреново мне - переработал...

nUKe · March 16, 2008

Все, хреново мне - переработал...

Бывает

nUKe · March 16, 2008

Можно, но через попу.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <style>
 * {margin:0;padding:0;}
 a {text-decoration:none;color:white;word-spacing:-4px;}
 </style>
</head>
<body>
<a href="#">
<span style="background-color:red;">Q</span>
<span style="background-color:blue;">W</span>
<span style="background-color:green;">E</span>
<span style="background-color:red;">R</span>
<span style="background-color:blue;">T</span>
<span style="background-color:green;">Y</span>
</a>
</body>
</html>

Это немножко не то... так можно сделать изначальное выделение ссылок. А мне нужно чтоб так ссылка выглядела когда на не? наводишь курсор. Хех...

Dimitry Wolotko · March 16, 2008

Сложнее. Но можно. Пробуйте.

Иван Шумов · March 16, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
 <style>
 * {margin:0;padding:0;}
 a {text-decoration:none;color:white;word-spacing:-4px;}
 a .chr1{color: red;}
 a .chr2{color: blue;}
 a .chr3{color: green;}
 a .chr4{color: red;}
 a .chr5{color: blue;}
 a .chr6{color: green;}

 a:hover .chr1{color: white; background-color: red;}
 a:hover .chr2{color: white; background-color: blue;}
 a:hover .chr3{color: white; background-color: green;}
 a:hover .chr4{color: white; background-color: red;}
 a:hover .chr5{color: white; background-color: blue;}
 a:hover .chr6{color: white; background-color: green;}
 </style>
</head>
<body>
<a href="#">
<span class="chr1">Q</span>
<span class="chr2">W</span>
<span class="chr3">E</span>
<span class="chr4">R</span>
<span class="chr5">T</span>
<span class="chr6">Y</span>
</a>
</body>
</html>

а самому додуматься слабо? на сайте инфа полная ... вот все новички просто все просят. а сами думать не хотят

Dimitry Wolotko · March 16, 2008

Девятилап, переборщил немного. Стили можно урезать до:

 <style>
 * {margin:0;padding:0;}
 a {text-decoration:none;word-spacing:-4px;}
 a .chr1{color: red;}
 a .chr2{color: blue;}
 a .chr3{color: green;}

 a:hover span {color: white;}
 a:hover .chr1{background-color: red;}
 a:hover .chr2{background-color: blue;}
 a:hover .chr3{background-color: green;}
 </style>

nUKe · March 17, 2008

а самому додуматься слабо? на сайте инфа полная ... вот все новички просто все просят. а сами думать не хотят

Додумался. Заш?л, а ты уже ответил. В ИЕ не работает. Я ничего не прошу, а спрашиваю совета. Данную задачу я могу сделать и сам, просто интересно как можно это сделать более правильно и красиво.

Dimitry Wolotko · March 17, 2008

В 6м не работает. Тут немного с бубном поплясать. И по поиску пройдитесь.

Sign In

Как сделать ссылку такого вида

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information