Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Random Image Map needs links

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    try
    Code:
    <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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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>
    Last edited by marilynn.fowler; 06-01-2006 at 08:42 PM.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    <body onload="chooseStrip() ;" >

    shold work, if not will look again to night

    as you are uSing id

    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    well

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

    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Success

    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.

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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?

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    I tested this with IE6
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I'm testing with IE5 because that's what the client has.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    no access to IE5 so cant help you I'm afraid

    edit
    hmm not quite true, may be back tomorrow
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    before I start

    what is the maximum number of maps ??

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    vwphillips:

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

  • #15
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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">


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •