CSS + link rollover = display image (unique URL)

I am curious as the best (only?) way to go about this.

I was asked to make a text link, display an image (under it) upon rollover and of course disappear when you rolloff the link.

(the original personal used some in-line style that broke the page, instead of declaring a block).. they also tried to use an IMAGE MAP to make the displayed image a LINK/clickable, and have a different/unique URL that the TEXT link used to display the image.

I made the style:

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

Here is a snippet of the HTML I am try to add this functionality to:

<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 />

My question is: what is the best way (better way) to add a LINK/URL to the image that is being displayed?

Because the image is INSIDE the anchor/link tag.. is will also be/get the same URL as the target when clicked....yes?

Anybody have some SIMPLE ideas as a work around?

(I really hate those MAP tags anyways) :)

thanks!

Solution

Is this simple?

<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/