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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hotspot areas generating popups without toolbars

    Hi all, I've just started working on websites so my knowledge of javascript and html is shakey.

    Heres the deal, I have an image with hotspot areas on it. When the user clicks on an area, i want a popup window to appear with some information on that area.
    I dont want any tool bars or status bars or whatnot on the popup and thats where i've hit a snag, else I'd just do it in html.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Wezalmighty,

    and a warm welcome to these forums.

    Have a look at this example, it may suit your requirements...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>image maps tooltips</title>
    <base href="http://coothead.mysite.wanadoo-members.co.uk/"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background-color:#32003a;
         color:#fff;
     }
    #img_container {
         width:336px;
         margin:40px auto;
     }
    #img_container img {
         border:none;
     }
    #tooltip{
         position:absolute;
         width:100px;
         border:1px solid #000;
         background-color:#fee;
         font-family:verdana,arial,helvetica,sans-serif;
         font-size:10px;
         color:#000;
         padding:5px;
         text-align:justify;
         display:none;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var tp_os=49; //adjust this value to move tooltip top position.
      var lt_os=36; //adjust this value to move tooltip left position.
    
      var text=new Array();
           text[0]='this is the text for link a, and appears on mouseover';
           text[1]='this is the text for link b, I think!!';
           text[2]='this is the text for link c and is really infomative';
           text[3]='this is the text for link d, and what more can I say about it';
    
    function showTip(obj,n) {
    
      el=document.getElementById('tooltip');
      im=document.getElementById('img_container')
      words=document.createTextNode(text[n]);
      xy=obj.coords.split(',');
    
      lt=parseFloat(xy[0])+parseFloat(im.offsetLeft)-lt_os;
      tp=parseFloat(xy[1])+parseFloat(im.offsetTop)+tp_os;
    
      el.appendChild(words);
      el.style.left=lt+'px';
      el.style.top=tp+'px';
      el.style.display='block';
    
    obj.onmouseout=function() {
      el.style.display='';
      el.removeChild(words);
    
      }
     }
    
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="img_container">
    <img id="poo" src="map.jpg" alt="" usemap="#blood"/>
    </div>
    
    <div>
    <map id="blood" name="blood">
    <area href="#" coords="40,144,80,171" alt=""   onmouseover="showTip(this,0)"/>
    <area href="#" coords="112,144,152,171" alt="" onmouseover="showTip(this,1)"/>
    <area href="#" coords="184,144,224,171" alt="" onmouseover="showTip(this,2)"/>
    <area href="#" coords="256,144,296,171" alt="" onmouseover="showTip(this,3)"/>
    </map>
    </div>
    
    <div id="tooltip"></div>
    
    </body>
    </html>
    
    coothead

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks coothead, actually thats solved the second problem I was having.

    However, I'm looking to generate the information needed in a popup form rather than a tooltip.
    I think it would be an onMouseclick event within the area, i just cant work out what should be in there.

    The popup code itself was something I made using a popup code generator;
    Code:
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=200,height=200,left = 412,top = 284');");
    }
    // End -->
    </script>
    And then I want to generate said popup when an are is clicked,
    Code:
      <area shape="rect" coords="16,17,59,105" href="#" onMouseclick="popUp('Page1.htm')"/>
    Thats the idea anyway. in practise it doesnt really work.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Wezalmighty,

    remove the Mouse from onMouseclick

    coothead

  • #5
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doh. =D

    Thanks dude.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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