CSS image mapping [Archive] - Dynamic Drive Forums

masoud

04-28-2008, 06:10 PM

I am trying to use CSS script in my image mapping to have the enlarged photos pop up instead of opening a new window.
I used the below script that I took from DD (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P80/) in the head and I don't think there is any thing wrong with this script. I think the problem is in the body (see below the head script) when I try to use coordinates to map the image.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

And below is the script that I wrote to map my image.

<body>

<IMG NAME="Frame" SRC="_Frame.jpg" WIDTH="500" HEIGHT="732" BORDER="2" USEMAP="#Frame">

<map name="Frame">
<a class ="thumbnail" href="#thumb"><area shape="rect" COORDS="96, 13, 393, 69" HREF="490042XX.jpg"><span>
<img src="490042XX.jpg" width="320" height="240" /><br />490042XX</span></a>

</map>

</body>

masoud

04-28-2008, 07:43 PM

I would appreciate any help please.
Thank you

jscheuer1

04-29-2008, 06:15 AM

Please post a link to the page on your site that contains the problematic code so we can check it out.

That said, image maps are such a unique sort of way of organizing links on a page, in that different browsers treat them quite differently. The area tags do not behave like standard elements as far as css style or the DOM goes. This makes them difficult (sometimes even impossible) to work with using css or javascript. An image map is generally best employed as a thing in itself and just dropped into the page where you want it to be and then left alone. The image in the map can often be easily manipulated, but the map part will not always follow suit.