SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript rollovers, want to keep rollover image onClick...

    I would like the menu I created with javascript to keep the rollover image when it is clicked. Is there some sort of onClick code I can add to accomplish this? Here one of the menu items code:


    Code Java:
      <a href="x"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/bever_ro.jpg',1) "target="examples"><img src="images/bever.jpg" alt="Westover - Bever Health & Welness" name="Image5" width="160" height="45" border="0" id="Image5" /></a>

    thanks

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey.

    I would probably do something like:
    Code:
    <a href="x" onclick="MM_swapImage('Image5','','images/bever_ro.jpg',1) "target="examples"><img src="images/bever.jpg" alt="Westover - Bever Health & Welness" name="Image5" width="160" height="45" border="0" id="Image5" /></a>
    (omitting the onmouseover on onmouseout events.)

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a function that can still do both? I need it to have the rollover function and the onclick function. I tried to add the onclick code
    Code Java:
    <a href="x"  onclick="MM_swapImage('Image5','','images/bever_ro.jpg',1)" onmouseout="MM_swapImgRestore()" onclick="Image5','','images/bever_ro.jpg',1" onmouseover="MM_swapImage('Image5','','images/bever_ro.jpg',1)" target="examples"><img src="images/bever.jpg" alt="Westover - Bever Health &amp; Welness" name="Image5" width="160" height="45" border="0" id="Image5" /></a>
    and keep the onmouseover on onmouseout events, but that did not work.

    Seems like this would be something fairly common that people would use, but I can't seem to find any information on how to do it.
    thanks

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could remove the event handlers to prevent them from swapping the images anymore.
    Code:
    onclick="this.onmouseover=null;this.onmouseout=null;

  5. #5
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input crmalibu.

    I added that onclick code and yes, it sure does work, but too well. This is more complicated than I originally thought. Check out this webpage.
    http://174.132.114.2/~meybro78/residential.html

    The rollovers work fine, when you click one of the buttons the link stays "highlighted" just fine, but now try to click a second link. They both stay "highlighted". Is there another code to add to tell it when something else is clicked to go back to onmouseout image?

    thanks guys! I'm doing javascript tutorials this morning, but this is a little beyond the basics I see.

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Location
    cincinnati
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I'm still struggling to find a way to remove the onclick command once the user rollovers another link or clicks another link. I need it to go back to the onmouseover image. Is this possible?


    Code Java:
    <a href="Westover_Bever.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/bever_ro.jpg',1)" onclick="this.onmouseover=null;this.onmouseout=null;" target="examples"><img src="images/bever.jpg" alt="Bever" name="Image7" width="160" height="45" border="0" id="Image7" /></a><br />

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    Canton, OH
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump*

    I would also like orange's question to be answered as I have the same problem and situation except I can't get it to highlight at all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •