Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
308 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
[X]
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
2 Comments
 
LVL 10

Accepted Solution

by:
webwyzsystems earned 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

722 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