How do I create a JavaScript that displays random image with the same ImageMap coordinates?

Jul 6th, 2009 | By KC | Category: JavaScript Related

I am seeking for a JavaScript which will incidentally arrangement an picture with a same Image Map coordinates upon any image? Can someone greatfully help?

One comment
Leave a comment »

  1. richarduie July 6th, 2009 12:03 pm

    The only constraint is that all of the images must be at least as large as the coordinate definitions of your map areas.
    ~~~~~~~~~~~~
    <html>
    <head>
    <script>
    // create array of string to hold names of image files
    var imgSrcs = [
    'img0.gif', 'img1.gif', 'img2.gif'
    ]

    // assign a randomly selected source attribute to the map
    function setImgSrc() {
    // how many images available for random selection
    var last = imgSrcs.length;
    // get a random real value on the scale [0, last]
    var imgIdx = Math.random() * last;
    // convert real to integer by truncation – ensure index
    // value stays in array index range, in case random()*last
    // produced last, i.e., random() generated 1
    var imgIdx = Math.min( last – 1, Math.floor( imgIdx ) );
    document.getElementById( ‘mapImg’ ).src = imgSrcs[ imgIdx ];
    }

    window.onload = setImgSrc;
    </script>
    </head>
    <body>
    <img id="mapImg" src="" width="200" height="200" alt="" usemap="#yourMap" />
    <map name="yourMap">
    <!– whatever your map’s area definitions are go here –>
    <area shape="rect" coords="0,0,100,100" href="first.html" alt="" />
    <area shape="rect" coords="0,100,0,100" href="second.html" alt="" />
    </map>
    </body>
    </html>

Leave Comment