Topic awaiting preservation: on mouseover (Page 1 of 1)

hello inmates!

i have 2 questions about js:

i want that the background color of a cell (or of a complete table) changes , when i move my mouse over it. how can this be done?
the second one is, that when i move my mose over a link that some text appears in a defined cell. (i want to define the text of course)

any ideas? thank you

elysiumart

The first can be done in your CSS-
<style>
#swap:hover{
background-color:blue;
}
</style>
This will turn an object with the id of "swap" blue on mouseover.

The second can be done in a number of ways, the easiest would be to toggle the display of a layer with javascript.

// define the id with CSS
<style>
#stuff{
display:none;
}
</style>

// now for some javascript
<script>
function presto(target){
document.getElementById(target).style.display=block;
}
</script>

Add a little HTML to the mix:
<div id="stuff">Secret Code</div>
<a href="somewhere.html" onmouseover="presto('stuff')">
Click Me</a>

and there you have it.

/* Sure, go ahead and code in your fancy IDE. Just remember: it's all fun and games until someone puts an $i out */

wow thx. i'll check it out when i come home! =)

i am sorry, norm. but the first solution only works with MOZILLA for me. what could be wrong? i did it like this(because i want it's background color also defined:

#one{
background-color:#CCCC33;
color:#000000;
border:1px solid #000000;
}
#one:hover{
background-color:#FFFF33;
}

and it's html:

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="one">THESPACE</td>
</tr>
</table>

getElementById is only supported in the modern W3c compliant browsers, it will work with Mozilla, Netscape 6+, and IE6(perhaps 5.5 too).

To get this to work across a wider range of browsers, we need to examine the DOM by sniffing for features.

/*this function determines how to address changing styles for the clients browser by testing to see which features are supported and generating the appropriate response*/

function setObj(obj) {
var layerObj;

if (document.getElementById){
layerObj=document.getElementById(obj).style;
}
else if (document.all){
layerObj=document.all[obj].style;
}
else{
layerObj=document.obj;
}
return layerObj;
}

//now we can use our spiffy new detection function in the following manner

function presto(target){
setObj(target).display='block';
}


In the code above, "document.all[obj]" provides support for older IE browsers, while "document.obj " works with that nasty old Netscape 4.

also, in the original presto() , I forgot to put quotes around the value 'block'. Sorry for the sloppy coding.
[This message has been edited by norm (edited 02-26-2003).]

[This message has been edited by norm (edited 02-26-2003).]

It could be that some versions of IE can't handle the :hover state on elements like table cells but only on links and such... although I would have thought that things like that worked at least in IE 6. Care to share a link to an example page?

But anyway, if you can't get it to work this way there's also another possibility. It's not as straight-forward as norm's solution though, as you'd need to add an onmouseover and -out event handler to each <td> you want it affect - see this GN thread:

http://development.gurusnetwork.com/discussion/thread/1888/

hey norm, this nearly works
the text appears, but it doesn't disappear then. help?

oh and i think that you misunderstood someting
what also doesn't work in IE is the FIRST QUESTION:
"i want that the background color of a cell (or of a complete table) changes , when i move my mouse over it. how can this be done?"

look on my post above how i did it.
anyway, THX FOR YOUR GREAT HELP!!!!!

elysiumart

Oops!! I guess I did miss what you were asking. I'm working on a javascript solution(addEventListener()), but still haven't worked out the kinks. In the mean time, here is a CSS hack that does the trick.

//add the '#one a{} ' & '#one a:hover{}' to your CSS

#one{
background-color:#CCCC33;
color:#000000;
border:1px solid #000000;
}
#one a{
text-decoration:none;
color:#000000;
}
#one a:hover{
background-color:#FFFF33;
cursor:crosshair;
}

// wrap the "<a></a>" tags around the cell inside the td.

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="one"><a href=javascript:void>THESPACE</a></td>
</tr>
</table>

To make the text disappear, call this function with the onmouseout eventhandler.
//javascript to make text disappear

function goAway(target){
setObj(target).display='none';
}

//HTML to call the above function

<a href="somewhere.html" onmouseover="presto('stuff')"
onmouseout="goAway('stuff')">
Click Me</a>


It looks like kuckus's solution for the first problem should work well, but I actually haven't had time to try it yet.


[This message has been edited by norm (edited 02-26-2003).]

ahh the text disappears! wow! coolness man! now hop over to my forum http://www.elysiumart.org and become a code mod!!!