CSS + link rollover = отображаемое изображение (уникальный URL)

Question

Мне любопытно, как лучший (только?) Способ сделать это.

Меня попросили сделать текстовую ссылку, отобразить изображение (под ним) после опрокидывания и, конечно же, исчезнуть, когда вы вставите ссылку.

(оригинальный персональный использовал некоторый встроенный стиль, который сломал страницу, вместо объявления блока) .. они также пытались использовать IMAGE MAP, чтобы сделать отображаемое изображение LINK/clickable и иметь другой/уникальный URL-адрес, используемый для отображения изображения ссылкой ТЕКСТ.

Я сделал стиль:

/*custom client requested CSS styling/functionality*/ 
a.imageDisplay img { 
    display:none; 
} 
a.imageDisplay:hover img { 
    display:block; 
} 

Вот отрывок из HTML Я являюсь попытке добавить эту функциональность:

<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br /> 

Мой вопрос: что это лучший способ (лучше путь), чтобы добавить LINK/URL к отображаемому изображению?

Потому что изображение ВНУТРЕННЯЯ привязка/ссылка тега .. будет также быть/получить тот же URL-адрес, что и цель при нажатии .... да?

У кого-нибудь есть простые идеи как работа?

(я действительно ненавижу те МАП теги в любом случае) :)

спасибо!

Answer 1

Это просто?

<span class="txt-img"> 
    <a class="txt" href="#1">Client Name ABC</a> 
    <a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a> 
</span> 

.txt-img {position:relative;} 
.txt-img .img {position:absolute; display:none; left:0;} 
.txt-img:hover .img {display:block;} 

FIDDLE: http://jsfiddle.net/46Tf6/