Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Rollover image that triggers rollover in separate location...

    Hey guys,

    Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer.

    I'm trying to design myself an online portfolio; here's what I got so far...

    http://www.gregorymstevens.com/testsite/site.html

    As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page.

    For instance, when the mouse rolls over a bird-- this image:



    will turn into this image:



    while maintaining the original "white bird" rollover.



    Hopefully I'm explaining this correctly -- Any help greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    First of all, you should give the "choosea" image an id attribute so that you can easily address it from within Javascript
    Code:
    <img width="118" height="26" alt="" src="images/choosea.gif" id="choosea">
    Then you can go ahead and amend the onmouseover handler for each of the <a> anchor tags wrapped around the bird images to include the change of the "choosea.gif"

    Example for one bird
    Code:
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird5.gif',1); document.getElementById('choosea').src = 'images/resume.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="40" height="26" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird5.gif"></a>
    Please replace "images/resume.gif" with the appropriate image file name

  • Users who have thanked devnull69 for this post:

    gstevens (03-08-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    devnull69,

    Firstly -- thanks for helping me out. Appreciate it.

    I've changed each bird to the code you've provided, however, now the rollover to turn the birds white does not work - however the title of each page (choosea) is changing.

    http://www.gregorymstevens.com/testsite/site.html - UPDATED

    Is there something wrong in my code?

    Code:
    BIRD 1-----
    
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird1.gif',1); document.getElementById('choosea').src = 'images/rollover/resume.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="37" height="28" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird1.gif"></a>
    
    BIRD 2-----
    
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird2.gif',1); document.getElementById('choosea').src = 'images/rollover/reel.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="41" height="30" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird2.gif"></a>
    
    BIRD 3-----
    
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird3.gif',1); document.getElementById('choosea').src = 'images/rollover/graphicdesign.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="42" height="28" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird3.gif"></a>
    
    BIRD 4-----
    
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird4.gif',1); document.getElementById('choosea').src = 'images/rollover/photography.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="39" height="30" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird4.gif"></a>
    
    BIRD 5-----
    
    <a onmouseover="MM_swapImage('Image72','','images/rollover/bird5.gif',1); document.getElementById('choosea').src = 'images/rollover/resume.gif';" onmouseout="MM_swapImgRestore(); document.getElementById('choosea').src = 'images/choosea.gif';" href="#"><img width="40" height="26" border="0" name="Image72" src="http://www.gregorymstevens.com/testsite/images/bird5.gif"></a>

    THANKS
    Last edited by gstevens; 03-08-2012 at 08:26 PM.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Hm crazy ... something has changed compared to your previous version. In the previous version I was able to get it running with the proposed changes. But this version seems to be off ...

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nothing has changed since the previous

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    can you put the previous version back online somehow?

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just have this version, however, I only tried to make the changes above -- really not sure what else could have changed. Any ideas?

    Thanks again for the help.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone?


  •  

    Posting Permissions

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