mouseOver effect on a <span>

[tsdragon]

I could probably figure this out myself, but I figured it would be easier to ask:

How do I get a mouseOver effect (such as a color change) to work on a span? I want something similar to what you can do with the A:hover style.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[tsdragon]

I'd also like to have some simple mouseOver effect on an image, such as showing a colored border.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Trevman]

something like this would work:

<span onmouseover=&quot;this.style.backgroundColor='blue'&quot;>stuff</span>


<img src=&quot;myimage.png&quot; onmouseover=&quot;this.style.border = '2px solid black'&quot;>
===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===

 

[baad]

hi Tracy, is Trevman's answer what u was for?
i think his code wuld work in ie & may be nn6
what browser is ur target? Victor

 

[tsdragon]

Trevman: I'll give that a try, thanks.

vituz: IE5.5 and better is my primary target. If it works in NN4.7 and above that's even better, but not a major requirement. I'll try out Trevman's solution and see if it's what I need, but if you have another way, feel free to post it! Remember that I may not be the only one looking at the responses posted here, and your solution may work better for someone else.
Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Trevman]

That should work in netscape 6 it does support the this attribute. ===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===

 

[tsdragon]

Your response gave me the clues I needed to do what I wanted. The major difference is that I defined styles and used them in the onmouseover and onmouseout. Here's my styles:

<STYLE TYPE=&quot;text/css&quot;>
.linkable { color:blue; text-decoration: underline; cursor:hand; }
.normal { color:black; text-text-decoration: none; cursor:default; }
.imglink { border: 1px solid blue; cursor:hand; }
.imgnormal { border: none cursor:default; }
</STYLE>

And this is how I use them:

<img src=&quot;...&quot; border=&quot;0&quot; onmouseover=&quot;this.className='imglink'&quot; onmouseout=&quot;this.className='imgnormal'&quot;>
<span onmouseover=&quot;this.className='linkable'&quot; onmouseout=&quot;this.className='normal'&quot;>...</span>

Works like a charm! Thanks!

Tracy Dryden
tracy@bydisn.com

http://www.bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.