...

View Full Version : Rollover image that triggers rollover in separate location...



gstevens
03-08-2012, 08:30 AM
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:

http://www.gregorymstevens.com/testsite/images/choosea.gif

will turn into this image:

http://www.gregorymstevens.com/testsite/images/rollover/resume.gif

while maintaining the original "white bird" rollover.



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

devnull69
03-08-2012, 10:26 AM
First of all, you should give the "choosea" image an id attribute so that you can easily address it from within Javascript


<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


<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

gstevens
03-08-2012, 08:11 PM
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?




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

devnull69
03-08-2012, 08:59 PM
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 ...

gstevens
03-08-2012, 11:35 PM
Nothing has changed since the previous :confused:

devnull69
03-09-2012, 07:22 AM
can you put the previous version back online somehow?

gstevens
03-09-2012, 08:32 AM
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.

gstevens
03-12-2012, 08:26 PM
Anyone?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum