Advanced Search

Results 1 to 7 of 7

Thread: Image Map Rollover with Popup

  1. #1
    Join Date
    Nov 2012
    Location
    Northwich, Cheshire, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Map Rollover with Popup

    I have a map of the UK with dots on it. when the user roll over a dot i want a popup to appear with relevant info on the 'dot'.

    Ive downloaded the MILONIC version but you have to pay for it.

    Darryl

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,886
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Maybe this DD script can be used: http://www.dynamicdrive.com/dynamici...ckytooltip.htm

    Or this one: http://www.dynamicdrive.com/dynamici...oontooltip.htm

    In fact, there are many tooltip scripts on DD that might suit your needs: http://www.dynamicdrive.com/dynamicindex5/index.html
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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[*/
    
    .popup {
      position:absolute;z-Index:101;left:-3000px;top:300px;width:100px;height:20px;background-Color:#FFFFCC;border:solid red 1px;text-Align:center;
    }
    
    #img1 {
     width:351px;height:263px;border-Width:0px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    
     <img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="WinterPalace" usemap="#ImageMap1" ismap="ismap" />
     <map name="ImageMap1" id="map1" >
      <area href="#" rel="pop1" shape="rect" alt="" coords="6,138,73,199" />
      <area href="#" rel="pop2" shape="rect" alt="" coords="85,80,173,129" />
      <area href="#" rel="pop3" shape="circle" alt="" coords="235,158,15" />
      <area href="#" rel="pop4" shape="poly" alt="" coords="220,147,220,147,203,145,178,158,160,180,185,187,216,190,220,147"  onclick="IM1.Toggle(3);" />
     </map>
    
    
    <div id="pop1" class="popup" >My PopUp 1</div>
    <div id="pop2" class="popup" >My PopUp 2</div>
    <div id="pop3" class="popup" >My PopUp 3</div>
    <div id="pop3" class="popup" >My PopUp 4</div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Map PopUps (12-November-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    var zxcMapPopUp={
    
     init:function(o){
      var id=o.MapID,map=document.getElementById(id),hide=o.AutoHide,ms=o.FadeDuration,x=o.XOffset,y=o.YOffset,as=map.getElementsByTagName('AREA'),pop,ary=[],z0=0;
      for (;z0<as.length;z0++){
       pop=document.getElementById(as[z0].rel);
       if (pop){
        this.addevt(as[z0],'mousemove','popup',id,ary.length);
        ary.push([pop,'dly'+z0]);
       }
      }
      zxcMapPopUp['zxc'+id]={
       ary:ary,
       hide:typeof(hide)=='number'?hide:1000,
       ms:typeof(ms)=='number'?ms:false,
       x:typeof(x)=='number'?x:10,
       y:typeof(y)=='number'?y:10
      }
     },
    
     popup:function(e,id,nu){
      var o=zxcMapPopUp['zxc'+id],oop=this,mse=this.mse(e);
      if (o&&o.ary[nu]){
       if (o.lst&&o.lst!=o.ary[nu]){
        o.lst[0].style.left='-3000px';
       }
       if (o.lst!=o.ary[nu]&&o.ms){
        clearTimeout(o.dly);
        oop.animate(o,o.ary[nu][0],0,100,new Date(),o.ms);
       }
       o.ary[nu][0].style.left=mse[0]+o.x+'px';
       o.ary[nu][0].style.top=mse[1]+o.y+'px';
       o.lst=o.ary[nu];
       clearTimeout(o.ary[nu][1]);
       o.ary[nu][1]=setTimeout(function(){ o.ary[nu][0].style.left='-3000px'; },o.hide);
      }
     },
    
     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];
     },
    
     animate:function(o,obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
       o.now=now;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
      }
      else {
      }
     },
    
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){ o.addEventListener(t,function(e){ return oop[f](e,p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
      }
     }
    
    }
    
    zxcMapPopUp.init({
     MapID:'map1',     // the unique ID name of the image map.             (string)
     AutoHide:2000,    //(optional) the auto hide delay in milli seconds.  (number, default = 1000)
     XOffset:20,       //(optional) the x offset from the mouse.           (number, default = 10)
     YOffset:0,        //(optional) the y offset from the mouse.           (number, default = 10)
     FadeDuration:1000 //(optional) the auto hide delay in milli seconds.  (number, default = no fade)
    });
    
    /*]]>*/
    </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/

  4. #4
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    A similar requirement. Seeking to present popup images from image map background. Need to be able to position popups relative to locations here. Is this putting me on the correct track?

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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/

  6. #6
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    http://www.vicsjavascripts.org.uk/Ma...MapToolTip.htm

    Wow..... got it... will do the job perfectly.

    Go raibh maith agat.
    Last edited by Webiter; 11-14-2012 at 10:14 AM. Reason: Resolved the issue I was having difficulty with.

  7. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    remove

    onclick="IM1.Toggle(3);"

    this is a hangover from a previous 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/

Similar Threads

  1. CSS Popup Image Viewer - IE7 incorrectly positioning popup image
    By Bio in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-25-2010, 03:29 AM
  2. Popup Window with Rollover Image. Help!!!
    By daveyboy1984 in forum JavaScript
    Replies: 1
    Last Post: 09-16-2008, 02:46 PM
  3. rollover with popup
    By bridgerboy in forum JavaScript
    Replies: 6
    Last Post: 10-07-2007, 05:40 PM
  4. popup thumbnail preview on rollover
    By gk-interactive in forum JavaScript
    Replies: 1
    Last Post: 11-24-2005, 10:35 PM
  5. Replies: 3
    Last Post: 03-23-2005, 08:17 AM

Bookmarks

Posting Permissions

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