[thelist] Rollover combined with image maps?

McAtee, Malcolm MMcAtee at philamuseum.org
Thu Jul 26 15:03:58 CDT 2001


I have seen this done using Javascript rollovers combined w/ an image map
coordinates.
The map is your backround image and you use a series of transparent gifs
over the top of that image.
This a script for a multiple rollover --- Highlights the map area and
corresponding information to the side.
I have seen simpler scripts for this same thing on the Javascript.com......

Malcolm


<script language="JavaScript">
<!-- 
// Pre-load images
if (Array && document.images)
{
   dx = new Image(361,289);
   dx.src = "mask/none.gif";
   d0 = new Image(361,289);
   d0.src = "mask/0.gif";
   d1 = new Image(361,289);
   d1.src = "mask/1.gif";
   d2 = new Image(361,289);
   d2.src = "mask/2.gif";
   d3 = new Image(361,289);
   d3.src = "mask/3.gif";
   d4 = new Image(361,289);
   d4.src = "mask/4.gif";
   d5 = new Image(361,289);
   d5.src = "mask/5.gif";
   d6 = new Image(361,289);
   d6.src = "mask/6.gif";
   ix = new Image(90,184);
   ix.src = "info/none.gif";
   i0 = new Image(90,184);
   i0.src = "info/0.gif";
   i1 = new Image(90,184);
   i1.src = "info/1.gif";
   i2 = new Image(90,184);
   i2.src = "info/2.gif";
   i3 = new Image(90,184);
   i3.src = "info/3.gif";
   i4 = new Image(90,184);
   i4.src = "info/4.gif";
   i5 = new Image(90,184);
   i5.src = "info/5.gif";
   i6 = new Image(90,184);
   i6.src = "info/6.gif";
}

function highlight(detail)
{
if (document.images)
   {
   document.images[0].src=eval("d"+detail+".src");
   parent.frames[2].document.images[2].src=eval("i"+detail+".src");
   }
}

function setback() 
{
if (document.images)
   {
   parent.frames[2].document.images[0].src="photos/icon.jpg"
   parent.frames[2].document.images[1].src="info/return.gif"
   }
}
// -->
</script>
</head>
<body bgcolor="#000000" background="photos/full.jpg" 
   topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

<img src="mask/none.gif" width=361 height=289 border=0 
   alt="" usemap="#details"><br><img 
   src="images/banner.gif" width=400 height=100 border=0 alt="">

<map name="details">
<area shape=poly 
 
coords="146,113,152,101,166,93,184,90,203,94,217,104,221,113,218,126,210,135
,196,141,183,143,178,143,163,139,151,130,146,120,146,121,146,113" 
   href="0.html" 
   onMouseOver="highlight('0');" onClick="setback();">
<area shape=poly 
   coords="115,38,148,30,186,26,221,30,255,39,204,95,183,90,162,94,115,38" 
   href="1.html" 
   onMouseOver="highlight('1');" onClick="setback();">
<area shape=poly 
 
coords="339,118,220,116,216,103,204,94,254,40,281,51,307,70,325,90,334,104,3
39,118"
   href="2.html" 
   onMouseOver="highlight('2');" onClick="setback();">
<area shape=poly 
 
coords="290,234,207,136,215,130,219,122,220,116,338,118,343,148,336,178,320,
210,290,234"
   href="3.html" 
   onMouseOver="highlight('3');" onClick="setback();">
<area shape=poly 
 
coords="72,229,158,136,171,141,182,144,193,142,207,136,289,233,258,249,217,2
60,189,263,151,260,120,252,72,229" 
   href="4.html" 
   onMouseOver="highlight('4');" onClick="setback();">
<area shape=poly 
 
coords="27,113,145,113,145,121,151,131,158,136,72,229,45,205,32,187,25,170,2
1,142,27,113" 
   href="5.html" 
   onMouseOver="highlight('5');" onClick="setback();">
<area shape=poly 
 
coords="28,112,42,87,55,71,66,63,87,49,113,37,161,94,151,102,145,113,28,112"

   href="6.html" 
   onMouseOver="highlight('6');" onClick="setback();">
<area shape=default href="#" 
   onMouseOver="highlight('x');">
</map>




-----Original Message-----
From: Nathan Steiner [mailto:nsteiner at web-graphics.com]
Sent: Thursday, July 26, 2001 12:40 PM
To: thelist at lists.evolt.org
Subject: RE: [thelist] Rollover combined with image maps?


This can be achieved with layers, assuming no support for older browsers, or
an older browser sniff.  Here's an example:
http://www.brookfieldhomes.com/Brookfie/Brookfie.htm
In the above example the pushpins are lighting up, but the idea is the same.

-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Svee, Eric
Sent: Thursday, July 26, 2001 1:25 PM
To: 'thelist at lists.evolt.org'
Subject: [thelist] Rollover combined with image maps?


Is there a way to create a rollover that changes based on the part of the
image that you're on? I have a request to create a map of the US such that
when you mouseover a state, it changes (ie. becomes highlighted, etc) but
the rest of the map stays the same.  Any ideas?

Thanks

---------------------------------------
For unsubscribe and other options, including
the Tip Harvester and archive of TheList go to:
http://lists.evolt.org Workers of the Web, evolt !


---------------------------------------
For unsubscribe and other options, including
the Tip Harvester and archive of TheList go to:
http://lists.evolt.org Workers of the Web, evolt !




More information about the thelist mailing list