Image Rollovers with Backgrounds!

[johnnyb]

Hello,

I have a question - is it possible to change the background image of a table cell with an image rollover, ie: I have a table, with some text that is a link in one of the cells, is it possible to change the background image, (or colour, or both), of that, (or any other), cell when I roll over the link?

Also, the background image or colour will be set using CSS... this probably throws a twist into it.

Can someone let me know?

JB

[mattover-matter]

onmouseover="getelementbyID('cellid')style.background='backgroundurl.ext'"

or, for colors:

onmousever="getelementbyID("cellid")style.background-color=#ffffff"

or, if it is within the cell:

onmouseover="this.style.background-color=#ffffff"

I think that will work.

My syntax my be a bit off, so be careful :-}

[Skyzyx]

Originally posted by mattover-matter
onmouseover="getelementbyID('cellid')style.background='backgroundurl.ext'"

or, for colors:

onmousever="getelementbyID("cellid")style.background-color=#ffffff"

or, if it is within the cell:

onmouseover="this.style.background-color=#ffffff"

I think that will work.

My syntax my be a bit off, so be careful :-}

Actually, it's...

// Background Image
onmouseover="document.getElementById('cellid').style.backgroundImage='background.gif';"

// Colors
onmouseover="document.getElementById("cellid").style.backgroundColor='#ffffff';"

// Or, if called from the cell itself
onmouseover="this.style.backgroundColor='#ffffff';"


That should work.

[johnnyb]

Allright, I understand how to do this now. Thanks!

I just have one question: where I have to enter "cellID" can I use the name of the "class" attribute on that cell that also sets its style for CSS, or do I have to give it a seperate "id" or "name" attribute?

JB

[Skyzyx]

For the cell (<TD>) you want to change, you must add an ID attribute, and reference it where "cellID" is.

[mattover-matter]

ids and cells can both be defined in CSS. classes can be attatched to more than one cell, while ids cannot. So, how do what is the difference?

//id
#Name {}

//class
.Name {}

Which is for What?

id's are used for scripts, like when u use the getelementbyId(""). classes are to affect more than one thing easily.


Hope that helps

[RoyW]

This came about from a discussion on this thread (http://www.codingforums.com/showthread.php?s=&threadid=11673)

Vladdy came up with the original idea to use CSS and Id's to create image rollovers.

I took that idea but used a class instead of individual id's
The resulting rollover is here (http://www.javascript-fx.com/post/jscity/cssrollover/index.html). (using animated GIF's here (http://www.javascript-fx.com/post/jscity/cssrollover/index2.html)

Maybe you can extend this to <td> cells (but I got the impression from the thread that the hover pseudo class is not available for certain elements in IE).

In theory these rollovers should work even when JavaScript is disabled (not tested that though).

[johnnyb]

So Roy,

You're right about IE - it doesn't seem to support the hover pseudo class for TD, however, Mozilla, (and therefore I assume Netscape) does, and opera does but it appears that if you have an <A HREF> in the cell, it's background colour, (even if it doesn't have one specified), takes over, so only part of the table cell's background colour changes.

JB

[johnnyb]

so, I made this function:

function menuOn(which,newimage) {
which.className='menuhighlight';
document.getElementById('menuTitle').style.backgroundImage='../images/' + newimage
}


It is called by the onMouseOver event handler so using the first line in the function I change the class, (and therefore the background colour), of the cell that the mouse is over. This allows me to easily revert to the original background colour.

The problem is with the second line. "menuTitle" is the ID of the table cell that I want to change, but IE is returning an error that says "invalid arguement" for that line. Netscape 7, which I normally use to debug, is not giving me an error, but is also not making the changes that I need.

Can anyone see what I'm doing wrong?

John

[cheesebagpipe]

document.getElementById('menuTitle').style.backgroundImage='url(../images/' + newimage + ')';

'Invalid argument' often means handing CSS a value that isn't in an acceptable format.