...

View Full Version : Random Image Map needs links



marilynn.fowler
05-31-2006, 06:44 PM
I have a page on which a random image loads. Each image needs an accompanying image map to take you to the appropriate link. How do I make the appropriate image map links load? Here is my code so far, which works fine.


myStrip = new Array("images/hstrip_1.jpg","images/hstrip_2.jpg");
imgCt = myStrip.length;

function chooseStrip() {
if (document.images) {
randomNum = Math.floor((Math.random() * imgCt));
document.strip.src = myStrip[randomNum];
}
}

Thank you.

vwphillips
05-31-2006, 07:25 PM
try


<script language="JavaScript" type="text/javascript">
<!--

myStrip = new Array()
myStrip[0]=['images/hstrip_1.jpg','#Map1']
myStrip[1]=['images/hstrip_2.jpg','#Map2'];
imgCt = myStrip.length;

function chooseStrip() {
if (document.images) {
randomNum = Math.floor((Math.random() * imgCt));
document.strip.src = myStrip[randomNum][0];
document.strip.usemap = myStrip[randomNum][1];
}
}

//-->
</script>


untested

marilynn.fowler
05-31-2006, 11:22 PM
I pasted in the script and I wrote the two maps, but I don't know how to hook it up. What do I need to add? Here's what I have in the body:

<IMG SRC="images/hstrip_0.gif" ALT="Archetile Mosaic images" NAME="strip" USEMAP="#Map1" ID="strip">

<MAP NAME="Map1" ID="Map1">
<AREA SHAPE="RECT" COORDS="0,0,149,150" HREF="phoenix.html">
<AREA SHAPE="RECT" COORDS="151,0,299,150" HREF="botanicals.html">
<AREA SHAPE="RECT" COORDS="301,0,449,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="451,0,599,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="601,0,750,150" HREF="holycross.html">
</MAP>

<MAP NAME="Map2" ID="Map2">
<AREA SHAPE="RECT" COORDS="0,0,149,150" HREF="parlor">
<AREA SHAPE="RECT" COORDS="151,0,299,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="301,0,449,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="451,0,599,150" HREF="botanicals.html">
<AREA SHAPE="RECT" COORDS="601,0,750,150" HREF="parlor.html">
</MAP>

vwphillips
06-01-2006, 07:58 AM
<body onload="chooseStrip() ;" >

shold work, if not will look again to night

as you are uSing id



<script language="JavaScript" type="text/javascript">
<!--

var myStrip = new Array()
myStrip[0]=['images/hstrip_1.jpg','#Map1']
myStrip[1]=['images/hstrip_2.jpg','#Map2'];
var imgCt = myStrip.length;

function chooseStrip() {
randomNum = Math.floor((Math.random() * imgCt));
document.getElementbyId('strip').src = myStrip[randomNum][0];
document.getElementbyId('strip').strip.usemap = myStrip[randomNum][1];
}

//-->
</script>

marilynn.fowler
06-01-2006, 08:38 PM
I already have that in the body; the random strip part works, but it's still not changing the USEMAP value. I understand how it changes the strip image source, but I don't know how to get it to change the USEMAP value based on how I have it written.

<IMG SRC="images/hstrip_0.gif" NAME="strip" USEMAP="#Map1" ID="strip">

Do I need to have a variable get set and then have a USEMAP="javascript:getMap()" function in this? And if I did, how would I write the function, since I glaze over whenever the word "var" comes up? JavaScript is not my forte.

vwphillips
06-01-2006, 10:19 PM
well

this seems to work (tested IE and MozFF but there must be an easier way



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var myStrip = new Array()
myStrip[0]=['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Map1']
myStrip[1]=['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Map2'];
var imgCt = myStrip.length;

function chooseStrip() {
randomNum = Math.floor((Math.random() * imgCt));
document.getElementById('strip').src = myStrip[randomNum][0];
var map=document.getElementById('Map0');
var area=map.getElementsByTagName('AREA');
var ary=[]
for (var zxc0=0;zxc0<area.length;zxc0++){
ary.push(area[zxc0]);
}
for (var zxc1=0;zxc1<ary.length;zxc1++){
ary[zxc1].parentNode.removeChild(ary[zxc1]);
}
var area=document.getElementById(myStrip[randomNum][1]).getElementsByTagName('AREA');
for (var zxc2=0;zxc2<area.length;zxc2++){
var a=area[zxc2].cloneNode(true);
a.coords=area[zxc2].coords;
map.appendChild(a);
}

}

//-->
</script>
</head>

<body onload="chooseStrip();">

<IMG SRC="http://www.vicsjavascripts.org.uk/StdImages/One.gif" ALT="Archetile Mosaic images" NAME="strip" width=600 height=600 USEMAP="#Map0" ID="strip">

<MAP NAME="Map0" ID="Map0">
<AREA SHAPE="RECT" COORDS="0,0,149,150" HREF="phoenix.html">
<AREA SHAPE="RECT" COORDS="151,0,299,150" HREF="botanicals.html">
<AREA SHAPE="RECT" COORDS="301,0,449,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="451,0,599,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="601,0,750,150" HREF="holycross.html">
</MAP>

<MAP NAME="Map1" ID="Map1">
<AREA SHAPE="RECT" COORDS="0,0,149,150" HREF="http://www.vicsjavascripts.org.uk/">
<AREA SHAPE="RECT" COORDS="151,0,299,150" HREF="botanicals.html">
<AREA SHAPE="RECT" COORDS="301,0,449,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="451,0,599,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="601,0,750,150" HREF="holycross.html">
</MAP>

<MAP NAME="Map2" ID="Map2">
<AREA SHAPE="RECT" COORDS="0,0,149,150" HREF="phoenix.html">
<AREA SHAPE="RECT" COORDS="151,0,299,150" HREF="botanicals.html">
<AREA SHAPE="RECT" COORDS="301,0,449,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="451,0,599,150" HREF="parlor.html">
<AREA SHAPE="RECT" COORDS="601,0,750,150" HREF="holycross.html">
</MAP>

</body>

</html>

marilynn.fowler
06-01-2006, 11:44 PM
You rock with a steady roll!!! It will probably take me a year to figure out HOW it works, but it works. Thank you so much. And if I stumble across any code that looks easier, I'll post it.

marilynn.fowler
06-02-2006, 07:17 PM
I spoke too soon; the code doesn't work on Explorer, just Firefox and Safari. The random insertion of the image works, but the selection of the appropriate MAP does not. I tested it on both PC and Mac. Waaah. Back to square one. Do I need to do a document.write? Variables?

vwphillips
06-02-2006, 07:32 PM
I tested this with IE6

marilynn.fowler
06-02-2006, 08:18 PM
I'm testing with IE5 because that's what the client has.

vwphillips
06-03-2006, 01:56 AM
no access to IE5 so cant help you I'm afraid

edit
hmm not quite true, may be back tomorrow

marilynn.fowler
06-03-2006, 02:41 AM
I have it in my head, but I'm not a programmer, so I don't know if the following reasoning is flawed or even how to write it if it isn't.

Let's say you have 3 images (manny.gif, mo.gif, and jeff.jpg) with 3 image maps (harpo, chico, and groucho). You set up an array for each numbered [0], [1], and [2]. The "BODY onLoad="chooseStrip()" function spits out a number.
Could you declare a single variable (ie., var myMap;) and have some function like "getMap()" that assigns the spit out number to it? Then would you have a function that says if myMap equals 0, USEMAP HREF equals harpo; if myMap equals 1 USEMAP HREF equals groucho, etc.? Then would your tag say <IMG SRC="blah.jpg" USEMAP="javascript:getMap()" ID="strip">? Or would you have USEMAP="document.write(myMap)" ?

Am I making any sense? I really want to know the flaws in my logic since I think it will help me understand what's right. Thanks

vwphillips
06-03-2006, 11:11 AM
before I start

what is the maximum number of maps ??

are all the coordinates the same as in the examples you posted?

marilynn.fowler
06-03-2006, 06:41 PM
vwphillips:

Maximum 3 maps
exact same coordinates for each
the coordinates are the ones I provided.

marilynn.fowler
06-03-2006, 07:44 PM
why doesn't this work?

var myStrip = new Array()
myStrip[0]=['images/hstrip_1.jpg']
myStrip[1]=['images/hstrip_2.jpg'];
var imgCt = myStrip.length;
var myMap = string(randomNum);

function chooseStrip() {
if (document.images) {
randomNum = Math.floor((Math.random() * imgCt))
document.strip.src = myStrip[randomNum];
}
}

<BODY onLoad="chooseStrip()">
<IMG SRC="images/hstrip_0.gif" ALT="Archetile Mosaic images" NAME="strip"
USEMAP="javascript:document.write("Map"+myMap)" ID="strip">

vwphillips
06-03-2006, 08:03 PM
Maximum 3 maps
exact same coordinates for each
the coordinates are the ones I provided.

then its just a question of changing the links

back to morrow

also I dont use document.write

marilynn.fowler
06-04-2006, 12:28 AM
I figured it out! 3 hours of trial/error/tutorial trolling and then...sudden understanding. Those of you who actually know javascript and what you're doing have no idea how exciting this is for me.

var myStrip = new Array()
myStrip[0]=['Marilynn/wallpaper/mizikepaper.gif']
myStrip[1]=['Marilynn/wallpaper/sheaves.gif'];

var imgCt = myStrip.length;
var randomNum = Math.floor((Math.random() * imgCt));
var myMap = "#Map" + String(randomNum);

function chooseStrip() {
if (document.images) {
document.strip.src = myStrip[randomNum];
document.getElementById('strip').useMap = myMap;
}
}

then I just named my maps Map0, Map1, and Map2.

Thanks, vwphillips, for going back and forth. It kept me going.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum