|
|
Posted by Martin Weil on 12/16/06 09:43
jim schrieb:
> 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>
>
Thanks for that, I will get right on it and keep you postet...
Navigation:
[Reply to this message]
|