Web Analytics Made Easy -
StatCounter Mouseover popup with clickable links - CodingForum

Announcement

Collapse
No announcement yet.

Mouseover popup with clickable links

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

  • Mouseover popup with clickable links

    I've been looking around the net and so far have come up empty. Here's what I'm looking for:

    If a user mouses over a cell in a table, I'd like a popup to appear, but not a non-interactive tooltip. I'd like it to be a bubble or something akin, that would allow the user to move the mouse pointer inside it (and not have the window move around like a tooltip) and have clickable links and images inside the popup that take them to another page.

    I've seen this feature when hovering over links in various forums, but can't seem to find a framework or sample code that will do this.

    Can anyone point me in the right direction?

  • #2
    this will get you started
    Code:
    <script language="Javascript">
    <!--
    function toggleDiv(id,flagit) {
    if (flagit=="1"){
    if (document.layers) document.layers[''+id+''].visibility = "show"
    else if (document.all) document.all[''+id+''].style.visibility = "visible"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    else
    if (flagit=="0"){
    if (document.layers) document.layers[''+id+''].visibility = "hide"
    else if (document.all) document.all[''+id+''].style.visibility = "hidden"
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
    }
    //-->
    </script>
    
    
    
    <style type="text/css">#div1, #div2, #div3 {position:absolute; top: 100; left: 200; width:200; visibility:hidden}</style>
    
    
    <a href="#" onMouseOver="toggleDiv('div1',1);toggleDiv('div3',0);toggleDiv('div2',0)" >Link 1!</a> | 
    <a href="#" onMouseOver="toggleDiv('div2',1);toggleDiv('div3',0);toggleDiv('div1',0)" >Link 2</a> | 
    <a href="#" onMouseOver="toggleDiv('div3',1);toggleDiv('div2',0);toggleDiv('div1',0)">Link 3</a>
    
    
    <div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div>
    <div id="div2">Link 2 text! You can add all the usual style options, and position it to suit yourself!</div>
    <div id="div3">Link 3 text! Use it to explain terms or further describe your linked pages, whatever!</div>

    Comment


    • #3
      Are these lines--document.layers, document.all, document.getElementById()-- to account for different browsers?

      Comment

      Working...
      X