Web Analytics Made Easy -
StatCounter please help me in getting code - CodingForum

Announcement

Collapse
No announcement yet.

please help me in getting code

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • please help me in getting code

    hi.
    I don't know JavaScript very well.but I'm forced to create a page look like this:
    http://www.bimarz.com/05weather/weather.htm
    A map that when mouse goes over a image is shown.
    can you help me??
    I don't know anything from the source code!!
    please give me a source that can easily manipulated.
    thanks very much!

  • #2
    The example had hot spots not an image map

    so

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Map Hot Spots (31-07-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    var zxcAry=new Array();
    //         Text        width left top image
    zxcAry[0]=['HotSpot 1',60,   100, 100,'Two.gif'];
    zxcAry[1]=['HotSpot 2',60,   120, 150,'Three.gif'];
    zxcAry[2]=['HotSpot 3',60,   160, 200,'Four.gif'];
    
    var zxcIPU;
    
    function zxcPlaceHS(){
     zxcM=document.getElementById('zxcMap');
     zxcIPU=document.getElementById('zxcMapPU');
     zxcIPU.style.position='absolute';
     zxcIPU.style.zIndex=11;
     zxcIPU.style.visibility='hidden';
     for (zxc0=0;zxc0<zxcAry.length;zxc0++){
      zxcd=document.createElement('DIV');
      document.getElementsByTagName('BODY')[0].appendChild(zxcd);
      zxcd.style.position='absolute';
      zxcd.style.zIndex=10;
      zxcd.style.width=zxcAry[zxc0][1]+'px';
      zxcd.style.height='15px';
      zxcd.style.backgroundColor='#FFFFCC';
      zxcd.style.fontSize='12px';
      zxcd.appendChild(document.createTextNode(zxcAry[zxc0][0]));
      zxcd.style.left=(zxcPos(zxcM)[0]+zxcAry[zxc0][2])+'px';
      zxcd.style.top=(zxcPos(zxcM)[1]+zxcAry[zxc0][3])+'px';
      zxcd.img=zxcAry[zxc0][4];
      zxcd.onmouseover=function(){
                        zxcIPU.src=zxcImgPath+this.img;
                        zxcIPU.style.left=(this.offsetLeft+50)+'px';
                        zxcIPU.style.top=(this.offsetTop-zxcIPU.offsetHeight-5)+'px';
                        zxcIPU.style.visibility='visible';
                       }
      zxcd.onmouseout=function(){  zxcIPU.style.visibility='hidden'; }
     }
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    
    
    //-->
    </script></head>
    
    <body onload="zxcPlaceHS();" >
    <center>
    <img id="zxcMap" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=400 height=400 >
    </center>
    <img id="zxcMapPU" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=100 height=100 border=1 >
    </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/

    Comment

    Working...
    X