Help point me in the right direction (css, javascript)

[gottaloveit]

Hi all,

I have an effect in mind that i want to achieve but can't quite figure it out.

I have a row of 5 small pictures (each 100px by 75px). They are in a container div and are floated left to all line up. Below each one is a span that contains a solid background color and a description of each picture. There is a link around each picture and span. I have it currently so that when the user hovers over a picture, the related span text changes color, using css.

I want to be able to change three things onhover: the picture, the background color of the span, and the font color. At the moment I can't figure out how to make all three things change color - any tips?

I imagine it would involve a little javascript - can anyone point me in the right direction (I"m fairly good with css but a total javascript newb).

THanks,

Jamie

 

[souradipm]

im new to js as well, but i imagine you would need to do

<script type="text/javascript">
function changeIt(obj, mode){ 
if(mode==0){
obj.src="hover.png"
} else {
obj.src="normal.png"
}
}
</script>

in the header and

<img src="./normal.png" onMouseOver="changeIt(this,0)" onMouseOut="changeIt(this,1)">

as the image.

Change the image filenames in the changeIt function. That would be how you change the source. A quick google would tell you the method for doing it to other properties of the image.

 

[gottaloveit]

Sweet! Thanks Souradipm, I'll try that out when I get a chance and report back.

Jamie

 

[scopey]

Two ways.

<script type="text/javascript">
function change(me){ 
//Script for changing the text, image and bgcolour
}
</script>

Then in your HTML put 'onmouseover="change(this)"'

OR

You can have an individual function for each process (ie one for changing the image, one for changing the text etc.) and run them all with 'onmouseover="function1(); function2(); function3;" '

Hope that helps!