PDA

View Full Version : Image map and mouseover

zed08
05-23-2006, 09:10 PM
I want to create an image image map with mouseovers. I tried generating the code, but the mouseovers don't work. Please help!

<html>
<head>

<script type="text/javascript" language="javascript">
// Preload Menu Rollovers

one = new Image(150,150)
one.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/5.jpg"

two = new Image(150,150)
two.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/3.jpg"

three = new Image(150,150)
three.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/1.jpg"

four = new Image(150,150)
four.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/6.jpg"

five = new Image(150,150)
five.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/4.jpg"

six = new Image(150,150)
six.src = "http://i64.photobucket.com/albums/h170/intricatedesigns/2.jpg"

</script>

<TITLE>Intricate Designs</TITLE>

<style type="text/css">
body {background: black;}
img {border: none;}
</style>

</head>
<body>

<img src="http://i64.photobucket.com/albums/h170/intricatedesigns/imagemap.jpg" usemap="#mymap" width="450" height="300" alt="your description" border="0">

<map name="mymap" id="mymap">

<area shape="rect" coords="0,0,150,150" href="index.htm" onmouseover="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/5.jpg'" onmouseout="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/6.jpg'" />

<area shape="rect" coords="300,0,450,150" href="index.htm" onmouseover="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/3.jpg'" onmouseout="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/4.jpg'" />

<area shape="rect" coords="150,150,300,300" href="index.htm" onmouseover="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/1.jpg'" onmouseout="document.mymap.src='http://i64.photobucket.com/albums/h170/intricatedesigns/2.jpg'" />


</map>

</body>
</html>
Idiotic Creation
05-25-2006, 05:43 PM
I tried this once, but I never figured it out. The problem I had is that the mouse over image for the button actually has to be the entire mapped image, and it just never worked. Let me know if you figure it out.

David
Idiotic Creation
05-26-2006, 04:34 PM
Ohh and if you cant, then i suggest sliceing your picture, so you can make just the buttons mouseover.

Goodluck,
David
zed08
05-26-2006, 05:00 PM
I just cheated a bit - took longer though!

What I did was made the orinal image (w/o any mouseover) then on the same image changed the parts I wanted changed upon mouseover.

take a look: www.geocities.com/intricatedesigns@rogers.com