[SOLVED] Javascript: popup - how to adjust for multiple links/divs

[idire]

Well this code works for one link (the first one) then doesnt work for the rest.

 

<style>
  .transparent {
    border: 3px solid #cccccc; background-color: #f0f8ff; padding: 5px;
    display:none;
    width:170px;
    height:100px;
    color: black;
}
#popup { left:0px; top:0px; }

</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;
        var Popup = document.getElementById('Popup');
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x + 'px';
        /* set the pop-up's top */
        Popup.style.top = y + 'px';
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } 
</script>

 

and the link activating it with rollover:

<a href="#" id="test">test</a>

 

            <div id="Popup" class="transparent">
            <div style="background-color: #90EE90">

            <b>Method Used:</b></div>
            <div>
            <div>data1</div>
            </div></div>

 

What I wanted to do was have multiple links, each one producing a popup box with different data in it. So i made a loop for each link creating new divs:

 

e.g.

 

            <a href="#" id="test0">test0</a>

            <div id="Popup0" class="transparent">
            <div style="background-color: #90EE90">

            <b>Method Used:</b></div>
            <div>
            <div>data0</div>
            </div></div>

            <a href="#" id="test1">test1</a>

            <div id="Popup1" class="transparent">
            <div style="background-color: #90EE90">

            <b>Method Used:</b></div>
            <div>
            <div>data1</div>
            </div></div> 

 

How would i change the javascript to take the number from the rollover link? and change the appropriate div to block?

 

[idire]

I now have this:

 

<style>
  .transparent {
    border: 3px solid #cccccc; background-color: #f0f8ff; padding: 5px;
    display:none;
    width:170px;
    height:100px;
    color: black;
}
#popup { left:0px; top:0px; }

</style>
<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e)
    {
        e = e ? e : event;

        var Popup = document.getElementById('Popup');
	alert(e);
        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x + 'px';
        /* set the pop-up's top */
        Popup.style.top = y + 'px';
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    /*window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } */
</script>

 

            <div id="Popup<? //echo $i; ?>" class="transparent">
            <div style="background-color: #90EE90">
            <b>Method Used:</b></div>
            <div>
            <div><? echo $user.$method; ?></div>
            </div></div> 

a href="#" id="test" onMouseOut="Hide()" onMouseOver="Show(event)" onMouseMove="Show(event)"><? echo number_format($xperhour); ?></a>

 

This opens a popup for every link, but its always the same popup, how do i get it to recognise the different divs i have?

[idire]

This code gives me:

 

popup is null

 

<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show(e, temp)
    {
        e = e ? e : event;
	var t1 = 'Popup' + temp;

        var Popup = document.getElementById(t1);

        /* get the mouse left position */
        x = e.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = e.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x + 'px';
        /* set the pop-up's top */
        Popup.style.top = y + 'px';
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        document.getElementById('Popup').style.display="none";
    }
    /*window.onload = function(){
        var ele = document.getElementById('test');
        ele.onmouseout = Hide;
        ele.onmouseover = Show; 
        ele.onmousemove = Show;
    } */
</script>

[idire]

Edit: Made it work by myself, adding and defining a 2nd variable to function things

 

trial and error really but got there in the end