Changing 2 images with 1 rollover on a nav bar....

[bigbird3156]

Hi everyone....

I want to create a navbar that when you roll over a button changes the color of the button but also changes another graphic in a seperate section on the page...

to explain better...

I am on the home page... there is the navbar with the home button highlighted and all other buttons are not highlighted. next to the navbar is a graphic text that says 'home'...

If I roll over the next button in the navbar (about us)... the color of that button changes to show that it is rolled over... but the graphic text that says'home' is replaced with another graphic that says 'about us' so that the person knows where that button takes them...

for design reasons I don't want the text on the actual button... I know I can do it in flash with not too much trouble but really want to stick to html if I can (possibly also javascript if need be)

anyway, any help anyone can offer would be great!

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!!

 

[vacunita]

You'll definitely need Javascript for the secondary image.

The button's color can be changed using just CSS, a basic example of this would look something like:

<style type="text/css">
a:link{
display:block;
width:100%;
height:100%;
background-color:#FFFFFF;
border:1px solid blue;
}
a:visited{
background-color:#FFFFFF;
display:block;
width:100%;
height:100%;
background-color:#FFFFFF;
border:1px solid blue;

}
a:hover{
background-color:#5583DA;
}

a:active{
background-color:#FF0000;
}


li{
width:100px;
height:100px;
}
#mys{
width:256px;
height:256px;
border:1px solid red;
background-image:URL(images/default.jpg);
background-repeat:no-repeat;
}

<div id='nav'>
<ul>
<li><a href="[URL unfurl="true"]http://www.google.com"[/URL] onmouseover="document.getElementById('mys').style.backgroundImage='url(images/spider.png)';" onmouseout="document.getElementById('mys').style.backgroundImage='url(images/selected.png)';" >_</a></li>
<li><a href="[URL unfurl="true"]http://www.yahoo.com"[/URL] onmouseover="document.getElementById('mys').style.backgroundImage='url(images/spider3.png)';" onmouseout="document.getElementById('mys').style.backgroundImage='url(images/selected.png)';">_</a></li>
<li><a href="[URL unfurl="true"]http://www.msn.com"[/URL] onmouseover="document.getElementById('mys').style.backgroundImage='url(images/spider2.png)';" onmouseout="document.getElementById('mys').style.backgroundImage='url(images/selected.png)';">_</a></li>
</ul>
</div>
<div name="mys" id='mys'>This is div holds the images that will change with the nav bar hovering</div>

The nav div has the navigation,
The mys div will hold the images that need to change on hovering the menu.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[bigbird3156]

thanks for that vacunita... I'll try putting my query into the javascript forum, I've got the basic navbar bit under control it really is the secondary image that I am stuck on...

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!!

 

[Vragabond]

You could also try Eric Meyer's solution using CSS only.

http://meyerweb.com/eric/css/edge/popups/demo2.html

Another option would be to use one of the javascript frameworks (such as jQuery), which makes it very easy to do things like that.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

If you have the nav in place, then all you need to do is modify your links to add the relevant JS which I did supply there in the example.

More specifically the onmouseover and onmouseout events for the links.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.