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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Imagemap with no links just rollover images

    Hi all

    I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page.

    I would be eternally grateful for any ideas how to replicate this effect.

    Thanks

    Rob

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I made an example with jQuery here: http://jsbin.com/ohusuq/3. This effect is commonly known as "tooltip" and can be easily adapted. The tooltip DIV can contain anything you want

    Hint: If you hover your mouse over the example page you will see a button "Edit using JS Bin" on the top right. You can use this button the see the full code (Javascript/CSS/HTML)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply

    How would you incorporate that into an imagemap?

    Would it be easier to break the image up into bits and use a fake imagemap? I suppose that would be feasible but would create a lot more work.

    Thanks

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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>
    
    </head>
    
    <body>
    <div id="Tst1" style="position:relative;left:100px;textAlign:left" >
    <IMG  id="image1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" ALT="Exported picture" USEMAP="#PreviewImageMap" ISMAP="ISMAP">
    </div>
    <MAP name="PreviewImageMap"  id="map1">
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82" >
    </MAP>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function MapPopUp(o){
     var map=document.getElementById(o.MapID),areas=map.getElementsByTagName('AREA'),ary=o.PopUpImages,img=document.createElement('IMG'),src,pl=[];z0=0;
     img.style.position='absolute';
     img.style.visibility='hidden';
     img.style.zIndex='101';
     document.body.appendChild(img);
     for (;z0<areas.length;z0++){
      if (ary[z0]){
       pl[z0]=new Image();
       pl[z0].src=ary[z0];
       this.addevt(areas[z0],'mousemove','PopUp',z0);
       this.addevt(areas[z0],'mouseout','PopUp',z0);
       ary[z0]=pl[z0];
      }
     }
     this.img=img;
     this.ary=ary;
    }
    
    MapPopUp.prototype={
    
     PopUp:function(e,p){
      var img=this.img,ary=this.ary,mse=this.mse(e),wwhs=this.wwhs(),x,y;
      img.style.visibility=e.type=='mouseout'?'hidden':'visible';
      if (img.src!=ary[p].src){
       img.src=ary[p].src;
      }
      x=mse[0]-ary[p].width-5;
      y=mse[1]-ary[p].height-5;
      img.style.left=(x>wwhs[2]?x:mse[0])+'px';
      img.style.top=(y>wwhs[3]?y:mse[1])+'px';
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     }
    
    }
    
    M1=new MapPopUp({
     MapID:'map1',
     PopUpImages:[
      ['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif']
     ]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 07-08-2011 at 03:14 PM.
    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
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Vic

    I love you ty ty ty ty ty ty ty ty ty ty ty ty ty

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh one last query Vic with your code.

    The popped up window, is there an easy way to put a border around this popup?

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,520
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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>
    <style type="text/css">
    /*<![CDATA[*/
    .img {
      border:solid red 2px;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    <div id="Tst1" style="position:relative;left:100px;textAlign:left" >
    <IMG  id="image1" BORDER="0" SRC="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" ALT="Exported picture" USEMAP="#PreviewImageMap" ISMAP="ISMAP">
    </div>
    <MAP name="PreviewImageMap"  id="map1">
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="240,193,273,223" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="31,120,144,208" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="208,78,329,150" >
    <AREA SHAPE=RECT HREF="" ALT="" COORDS="39,29,114,82" >
    </MAP>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function MapPopUp(o){
     var map=document.getElementById(o.MapID),areas=map.getElementsByTagName('AREA'),ary=o.PopUpImages,img=document.createElement('IMG'),src,pl=[];z0=0;
     img.className=o.PopUpClassName;
     img.style.position='absolute';
     img.style.visibility='hidden';
     img.style.zIndex='101';
     document.body.appendChild(img);
     for (;z0<areas.length;z0++){
      if (ary[z0]){
       pl[z0]=new Image();
       pl[z0].src=ary[z0];
       this.addevt(areas[z0],'mousemove','PopUp',z0);
       this.addevt(areas[z0],'mouseout','PopUp',z0);
       ary[z0]=pl[z0];
      }
     }
     this.img=img;
     this.ary=ary;
    }
    
    MapPopUp.prototype={
    
     PopUp:function(e,p){
      var img=this.img,ary=this.ary,mse=this.mse(e),wwhs=this.wwhs(),x,y;
      img.style.visibility=e.type=='mouseout'?'hidden':'visible';
      if (img.src!=ary[p].src){
       img.src=ary[p].src;
      }
      x=mse[0]-ary[p].width-5;
      y=mse[1]-ary[p].height-5;
      img.style.left=(x>wwhs[2]?x:mse[0])+'px';
      img.style.top=(y>wwhs[3]?y:mse[1])+'px';
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     wwhs:function(){
      if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
      else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
      return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     }
    
    }
    
    M1=new MapPopUp({
     MapID:'map1',
     PopUpImages:[
      ['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif']
     ],
     PopUpClassName:'img'
    });
    /*]]>*/
    </script>
    </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/

  • Users who have thanked vwphillips for this post:

    RobHud (07-20-2011)

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ty again


  •  

    Posting Permissions

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