[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