Rollover javascript for div display

Question

I am trying to complete a rollover or hoverover for a few links to display a div with a few screenshots. How should I go about writing this script?

Here is my HTML

<section class="tabs-content">
      <table class="imagetable" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <th colspan="2" class="reportname">Exam Reports</th>
    </tr>
    <tr>
      <td valign="top" class="formlabel" width="50%"><p><strong>For Faculty</strong><br />
      </p>
        <ul>
          <li><strong><a href="#">Exam Summary</a></strong><br /> 
            <em>Colorful and attractive end-of-exam report provides a clean summary from Learning Outcomes to At-Risk students<br />
            </em><br />
          </li>
          <% if session("medical") = 1 then %>
          <li><strong><a href="exams_category.asp">Category Analysis</a></strong><br />
            <em>Learning outcomes performance breakdown</em><br />
            <br />
          </li>
          <% end if %>
          <li><strong><a href="exams_itemanalysis.asp">Item/Question Analysis</a></strong><br />
            <em>Take an in-depth look at each item and its' performance</em><br />
<br />
          </li>
          <li><strong><a href="exams_etresults.asp">List of Students Scores</a></strong><br />
            <em>Simple list of every exam takers performance…configurable</em></li>
          </ul>
        <p>&nbsp;</p>
        <p><strong>For Students</strong><br />
        </p>
        <ul>
          <li><strong><a href="exams_release.asp">Release results directly to students</a></strong><br />
            <em>Make results available to students&hellip;configurable from simple to colorful</em></li>
        </ul></td>
      <td valign="top" class="formfield"  width="50%"><p><strong>Misc Administrative Reports<br /> <!--this section will be hidden and an image placeholder will display the images from the above report links-->
      </strong></p>
      <ul>
        <li><a href="exams_elapsedtime.asp">ET Elapsed Time</a></li>
        <li><a href="exams_backwardnav.asp">Backward Navigation</a></li>
        <li><a href="exams_unanswered.asp">Unanswered Essays</a></li>
        <li><a href="exams_midexam.asp">Mid-Exam Restart</a></li>
        <li><a href="exams_hardware.asp">Hardware Comparison</a></li>
        <li><a href="exams_absentee.asp">Absentee Report</a></li>
        <li><a href="exams_missingkeyword.asp">Missing Keywords</a></li>
      </ul></td>
      </tr>
    </table>
  </section>

    </div>
</div>

Ideas? I wan the last list to be replaced by an image on rollover of the above links.

Chris

Answer 1

Use jQuery's .hover() method. It allows you to define a method that fires when the user hovers over a selector. It also has a hoverOut event handler where you define a method to address as user leaving the selector.

jquery hover api

this would be relevant for you:

.hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)A function to execute when the mouse pointer enters the element. handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.

so you sould do something like:

$('yourLinkSelector').hover(function(){
       //handle the user mouseover here..
       //remove last list
       //show your screenshot div
   }, function(){
       //handle the mouseout here..
       //do whatever div removal you need for the screenshot div
       //show last list again...
});