Pass Variable to popup DIV

Report · Jun 19, 2009

I have a query that builds a list of links. When you rollover the links is shows a popup div that has more information about the link before you click on it. What I am not sure how to do is pass what item they are rollingover so it displays the correct information in the popup div. Anyone know how to do this? thanks.

//Link code

<CFOUTPUT query="getcalendar" maxrows="5">
     <CFIF #event_date# IS NOT "">
          <cfif DateCompare(#event_date#, Now()) is +1>
               <li><a href="../calendar/calendar_info.cfm?proj_key=#proj_key#&id=#id#" onMouseOver="ShowPopup(this);" >#title# #CurrentRow#</a></li>
          </cfif>
      </CFIF>

</CFOUTPUT>

//ShowPopup code

function ShowPopup(hoveritem) {

    hp = document.getElementById("hoverpopup");
    // Set position of hover-over popup
    hp.style.top = hoveritem.offsetTop - 150;
    hp.style.left = hoveritem.offsetLeft - 250;

// Set popup to visible
hp.style.visibility = "Visible";
}

//DIV tag information

<div id="hoverpopup" onMouseOut="HidePopup();">
<cfoutput>
<span class="headerpop">#getcalendar.title#</span><hr />

           <p>#getcalendar.description#</p>
        <div class="hoverBottom">

        </div>
    </cfoutput>
</div>

Report · Jun 22, 2009

Hi,

Please try the following sample code

<ul>
<cfloop index="i" from="1" to="10">
      <cfoutput>
             <li><a href="##" onMouseOver="ShowPopup(this,hoverpopup#i#,#i#);" >title #i#</a></li>
            <div id="hoverpopup#i#" style="display:none;">

          <span class="headerpop">Title</span><hr />

</cfloop>
</ul><br /><br />

<script language="javascript">

function ShowPopup(hoveritem,divName,passedvalue) {
    hp = document.getElementById(divName.id);
    hp.style.top = hoveritem.offsetTop - 150;
    hp.style.left = hoveritem.offsetLeft - 250;
    hp.style.display='block';
    hp.innerHTML = hp.innerHTML + "<BR>Helloo world" + passedvalue;
}
</script>