javascript to change images and a style attribute on rollover?

Hi all, I am having a little problem with an effect I am after.

In connection with javascript and css.

Basically I have 5 links or options. And on hover of one of the links two images change, this is done using some javascript, however I also need a style background class to change on rollover and rollout. so when rollover, the images change and the class background style active is used, and on rollout the images revert and the class becomes inactive version.

Any advice?

cheers

Trev

Hi sw, thx for the reply.

I did try this:

<a onmouseover="lightup('pic1','pic2')" onmouseout="turnoff('pic1','pic2')">

for the two images to change with javascript of course.

And this for the css style change:

<tr onmouseover="this.className='over'" onmouseout="this.className='out'" class="out">

It works, but only in IE.

I am guessing yours is a little better, how best to go about applying it, and is it workable with other browser types?

Thx for the reply again

I am having an issue applying your code, any ideas as below:


<a onmouseover="lightup('pic1','pic2')" onmouseout="turnoff('pic1','pic2')">
<table width="198" height="29" border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="elementid.attributes['over'].value='active';" onmouseout="elementid.attributes['class'].value='out'" class="out">
<td width="28"><img src="images/search/search_bullet.gif" name="pic1" border="0" id="pic1"></td>
<td>Flight+Car+Hotel</td>
<td width="68"><img src="images/search/fhc-icons.gif" name="pic2" border="0" id="pic2"></td>
</tr>
</table>
</a>

cheers

Trev,

apparently elementid is undefined. do i need to apply an id to the tr or something along those lines??

help would be great

T

the code simply changes the class of the span upon mouse over and mouse out. it wasn't cross browser (*shamed*) but here is cross browser version:


I tested it on IE and Firefox, I don't care for other browsers as they're too minor.
as you see, it's doing exactly what your (shorter) code is doing only for IE, but using more modular coding.

"elementid" is only example... you have to replace it with the id of the control which you want its class to be changed, or in your case "this".

in your case the code would be more simple:
<tr onmouseover="this.attributes['class'].value='active';" onmouseout="this.attributes['class'].value='out';" class="out">

PERFECT

thankyou

Trev

im having the same problem, but I am more html illiterate than most people around here, please forgive me. So to make my life and your life easier when someone tries to help... i have posted my link, so you can go in, and look at the source. PLEASEPLEASEPLEASE . thanks in advance!!!

I am trying to change two images when hovering over the exhibitions image:

http://www.columbia.edu/~xkm1/test.html

(when hovering over exhibitions, i want the exhibitions image to change as well as the picture in the middle.) as you can see, i got exhibitions, but not the other, I tried to apply the solution given by someone else, (and the empty code is in the bottom for reference is what I tried), but it didn't work. someone please HELP!!

Use this function:

<script>

function swapBoth (img1, img1o,img2, img2o) {
if (document.images) {
document.images[img1].src=img1o;
document.images[img2].src=img2o;
}
}

</script>

for the first image, do this:

<img src="images/pic.gif" width="69" height="68" border ="0" name="pic1" id="pic1" onMouseOver ="swapBoth('pic1','images/pic_on.gif','img2','images/clear_on.gif')" onMouseOut ="swapBoth('pic1','images/pic.gif','img2','images/clear.gif')" >


For the second rollover, set up a blank image:

<img src="images/clear.gif" width="277" height="213" name ="img2" id="img2">

that should do it.

OMG! IT WORKED! yay! thanks

thanks thanks~~ thanks! did i say thanks? :-D

You're quite welcome. Check out this site 4 supplemental info:


http://www.daxassist.com/js/disjointedrollovers.cfm