CSS image mapping

**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/cs...ge-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.

Code:

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

Code:

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

Thread: CSS image mapping

Thread Tools

Search Thread

CSS image mapping

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions