Как сделать ссылку из образа

[Ahmad]

У меня есть простой вопрос, который я не могу решить.

У меня есть простой HTML код:

<div id="tps_block">
<div id="tps_point1"><a href="#">Point 1</a></div>
<div id="tps_point2"><a href="#">Point 2</a></div>
<div id="tps_point3"><a href="#">Point 3</a></div>
</div>

Идея состоит в том, что есть 3 изображения бок о бок, и когда при наведении мыши кончено каждого изображения, изображение будет изменяться, обратил внимание на одну, а изображение является интерактивным тоже, так что пользователь попадает в другое место, когда изображение нажата.

Мне удалось применить эффект при наведении, но я не могу получить ссылку на работу.

Может кто-то мне помочь?

 

[linpc]

У меня есть простой вопрос, который я не могу решить.

У меня есть простой HTML код:

<div id="tps_block">
<div id="tps_point1"><a href="#">Point 1</a></div>
<div id="tps_point2"><a href="#">Point 2</a></div>
<div id="tps_point3"><a href="#">Point 3</a></div>
</div>

Идея состоит в том, что есть 3 изображения бок о бок, и когда при наведении мыши кончено каждого изображения, изображение будет изменяться, обратил внимание на одну, а изображение является интерактивным тоже, так что пользователь попадает в другое место, когда изображение нажата.

Мне удалось применить эффект при наведении, но я не могу получить ссылку на работу.

Может кто-то мне помочь?

Если можно пожалуйста на русском языке, что вы хотите сделать. И если есть пример, то покажите.
А то я вот ни чего не понял вообще

 

[WiZXaK]

У меня есть простой вопрос, который я не могу решить.

У меня есть простой HTML код:

<div id="tps_block">
<div id="tps_point1"><a href="#">Point 1</a></div>
<div id="tps_point2"><a href="#">Point 2</a></div>
<div id="tps_point3"><a href="#">Point 3</a></div>
</div>

Идея состоит в том, что есть 3 изображения бок о бок, и когда при наведении мыши кончено каждого изображения, изображение будет изменяться, обратил внимание на одну, а изображение является интерактивным тоже, так что пользователь попадает в другое место, когда изображение нажата.

Мне удалось применить эффект при наведении, но я не могу получить ссылку на работу.

Может кто-то мне помочь?

<a href="#">Point 1</a> - Эта строка и создает ссылку
Я чего-то не понял?

 

[Ahmad]

Проблема в том, я не могу получить HERF ссылка на работу. При наведении указателя мыши на картинке, я не получаю символ руки, которая обычно показывает за ссылки

 

[WiZXaK]

Проблема в том, я не могу получить HERF ссылка на работу. При наведении указателя мыши на картинке, я не получаю символ руки, которая обычно показывает за ссылки

Используйте псевдокласс :hover в CSS
P.S: Для просмотра ссылки Войди или Зарегистрируйся | Для просмотра ссылки Войди или Зарегистрируйся

 

[esche]

Идея состоит в том, что есть 3 изображения бок о бок, и когда при наведении мыши кончено каждого изображения, изображение будет изменяться, обратил внимание на одну, а изображение является интерактивным тоже, так что пользователь попадает в другое место, когда изображение нажата.

Какая-то невнятная идея быть может, сначала разобраться с кашкой в голове?
А что мешает сделать "по-человечески" - изображение в тэге <img> засунуть в тэг ссылки <a> и ссылка будет нормально работать.

 

[gres_18]

Чет я не вижу никаких тегов картинок в первом сообщении. Или они фоном у вложенных дивов стоят? Тогда, может, требуется преобразовать ссылки в блочные элементы (#tps_block a {display: block;}) что увеличит полезную площадь ссылки до размеров объемлющего блока. Пример: Для просмотра ссылки Войди или Зарегистрируйся

 

[linpc]

Ребят пусть он покажет Пример, как ему надо. А так ломать голову и гадать это бред.

 

[Ahmad]

К сожалению я забыл упомянуть, изображение наносится через CSS ..

Это CSS я использую:

#tps_block {
height: 45px;
width: 940px;
}

#tps_point1 {
width: 351px;
background: url("Для просмотра ссылки Войди или Зарегистрируйся") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("Для просмотра ссылки Войди или Зарегистрируйся") 0 -45px no-repeat;
}

#tps_point2 {
width: 284px;
background: url("Для просмотра ссылки Войди или Зарегистрируйся") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("Для просмотра ссылки Войди или Зарегистрируйся") -351px -45px no-repeat;
}

#tps_point3 {
width: 305px;
background: url("Для просмотра ссылки Войди или Зарегистрируйся") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("Для просмотра ссылки Войди или Зарегистрируйся") -677px -45px no-repeat;
}

 

[gres_18]

К сожалению я забыл упомянуть, изображение наносится через CSS ..

И правда, очень жаль...
Измени html код таким образом:

<div id="tps_block">
    <a href="#"><div id="tps_point1">Point 1</div></a>
    <a href="#"><div id="tps_point2">Point 2</div></a>
    <a href="#"><div id="tps_point3">Point 3</div></a>
</div>