Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
303 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
ID: 22638374
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
ID: 31502911
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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article will show, step by step, how to integrate R code into a R Sweave document
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

837 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