Solved

How do I make a javascript rollover swap image stay on the rollover image when that page is selected?

Posted on 2008-10-03
2
299 Views
Last Modified: 2010-04-21
I have taken a web template and customized it for a client.  It came with very nice Java Script rollover swap image code.  However, the image swaps when mouse on and then swaps back to the home page image when moused out.  This is fine except when a page is selected all pages show the home page image instead of the appropriate image for that page.  How do I make the rollover image stick when the page is selected instead of returning to the home page image?
<tr>

          <td><img name="menu_graphic" src="images/menu_graphic_link2.gif" width="146" height="203" border="0"></td>

        <tr>

          <td><a href="ultrasound.html" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link2.gif','link1','','images/link1_over.gif',1)" ><img name="link1" src="images/link1.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="Nuclear.html" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link1.gif','link2','','images/link2_over.gif',1)" ><img name="link2" src="images/link2.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="MRI_CT.html" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link3.gif','link3','','images/link3_over.gif',1)" ><img name="link3" src="images/link3.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="radiology.html" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link5.gif','link4','','images/link4_over.gif',1)" ><img name="link4" src="images/link4.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="about_us.htm" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link4.gif','link5','','images/link5_over.gif',1)" ><img name="link5" src="images/link5.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="contact_us.htm" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link6.gif','link6','','images/link6_over.gif',1)" ><img name="link6" src="images/link6.gif" width="146" height="22" border="0"></a></td>

        </tr>

        <tr>

          <td><a href="index.htm" onMouseOut="MM_swapImgRestore()"  onMouseOver="MM_swapImage('menu_graphic','','images/menu_graphic_link4.gif',1)" ><img name="link7" src="images/link7.gif" width="146" height="22" border="0"></a></td>

        </tr>

Open in new window

0
Comment
Question by:sos4seo
2 Comments
 
LVL 10

Accepted Solution

by:
webwyzsystems earned 500 total points
Comment Utility
Could you clarify a bit please? Do you load a brand new and different page each time? Or are you simply changing the content on the current page in an IFRAME or something?

If you are simply navigating from page to page...and loading up everything, Then just change the IMG SRC within the <a href> tags on each page - essentially removing the rollover for the page the user is currently browsing.
0
 

Author Closing Comment

by:sos4seo
Comment Utility
Such a simple and easy fix.  Thank you! Once I made the scripting an editable region in the template I was able to go into all the pages and match the image source to the correct page image. I still have the awesome roll over affect, but the image doesn't go back to the home image when a page is selected.  Thanks.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now