|
|
Posted by jim on 12/15/06 17:09
Hi Martin,
Code is pasted down below; you have to get creative with this one.
First, you need 3 images: your viewed image, your mouseover image,
and your image for mapping. The image for mapping is a transparent gif
which
is the same size/dimensions as the images you use for your mouseover
image-swap.
second: create a div box which is the same dimensions as your swapping
images.
using css, set the background-image of that box to your viewable image.
(hope this is making sense...)
Next, create a mouseover/mouseout script which changes the background
images of your div box.
lastly, put your mapped transparent image inside the div box.
In the code below, i just created (3) 200x200 gifs: one red, one green,
and one transparent.
you can probably substitute your image names and locations in the code
to test it out, then create your own image map with links.
BTW, I created the image map in fireworks; does a great job at stuff
like that!!!
Hope that helps,
Jim
PS: I tested in f-fox prior to posting and it failed... UUGH!
But, it works great in explorer!
-----------C O D E S A M P L E----------------------
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body bgcolor="#ffffff">
<div id="dvv"
onmouseover = "this.style.backgroundImage='url(green.gif)'"
onmouseout = "this.style.backgroundImage='url(red.gif)'"
style="position:absolute; left:20px; top:20px; z-index:0; width:200px;
height:200px; background-image:url(red.gif);">
<img name="mapper" src="transparent.gif" width="200" height="200"
border="0"
usemap="#m_Untitled-1" />
</div>
<map name="m_Untitled-1">
<area shape="circle" coords="135,136, 50" href="http://www.espn.com"
target="_blank"
title="espn" alt="espn" >
<area shape="poly" coords="139,11,91,61,194,61,139,11"
href="http://www.abcnews.com"
target="_blank" title="abc news" alt="abc news" >
<area shape="rect" coords="2,60,81,200" href="http://www.yahoo.com"
target="_blank"
title="yahoo" alt="yahoo" >
<area shape="rect" coords="2,1,83,61" href="http://www.google.com"
target="_blank"
title="go google" alt="go google" >
</map>
</body>
</html>
[Back to original message]
|