Changing styles with onMouseOver

  • pompei
  • Graduate
  • Graduate
  • pompei
  • Posts: 117

Post 3+ Months Ago

Hi,

So I can do some easy stuff like this:

Code: [ Select ]
<tr onMouseOver=this.style.backgroundColor='#DBDDDE'>


so that when the mouse goes over that particular table row, its background color changes.

But how do I actually get a DIFFERENT table row to change its colors when I go over one row? e.g.

Code: [ Select ]
<tr name='highlightme'><td>Some stuff in here
<tr onMouseOver=gettherowwithnamehighlightme.style.backgroundColor='#DBDDDE'><td>Some stuff in here that highlights row above when mouse over it
  1. <tr name='highlightme'><td>Some stuff in here
  2. <tr onMouseOver=gettherowwithnamehighlightme.style.backgroundColor='#DBDDDE'><td>Some stuff in here that highlights row above when mouse over it


I thought it could be achieved by naming the row, but I don't know how to get map the changes to the named row.

Anyone know the right syntax?

Thanks for any help
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Firstly, always close your tags (if you are doing this but were too lazy when posting fair enough :wink: )

try this code:

Code: [ Select ]
<TR ID="colorChanger">
    <TD>Some Text here</TD>
    <TD>Some more text here</TD>
</TR>
<TR onMouseOver="document.getElementById('colorChanger').style.backgroundColor='#ff0000'">
    <TD >MouseOver here or</TD>
    <TD>Here to change color</TD>
</TR>
  1. <TR ID="colorChanger">
  2.     <TD>Some Text here</TD>
  3.     <TD>Some more text here</TD>
  4. </TR>
  5. <TR onMouseOver="document.getElementById('colorChanger').style.backgroundColor='#ff0000'">
  6.     <TD >MouseOver here or</TD>
  7.     <TD>Here to change color</TD>
  8. </TR>


The reason I've used
document.getElementById('colorChanger')
is because its the only way I have found that always works in all browsers and doesn't give me a headache :D
(there are shortcuts that can be used but some work in IE and not netscape etc - i just stick with this way of doing it.)
hope this helps you out.

Be careful of character case.
  • pompei
  • Graduate
  • Graduate
  • pompei
  • Posts: 117

Post 3+ Months Ago

Thanks a lot rtm223!

After searching the net for some time, I eventually figured out a version that uses

Code: [ Select ]
onMouseOver=document.all['idname'].style.backgroundColor='#DBDDDE'


but I was next going to ask if that was compatible across browsers other than IE. But of course, you were already ahead of the game and recommended the getElementById instead :D
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

lowercase your html though.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

howcome lowercase html? :?

I thought it was case insensitive and was merely a personl thing (or is this just something that is supposed to be but the browsers have not caught up)?
I tend to use the uppercase so the structure (tags) of the page stands out more.

EDIT// plus it comes out valid on the w3c validators??
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

rtm, try validating an XHTML page at w3c with onMouseOver, it will give you an error that makes you think onMouseOver doesn't exist anymore. Now if you try to validate the same page but this time with onmouseover all lowercase it will validate.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

XHTML is stricter than HTML, all tags and attributes must be written in lowercase.

BTW: I like to use something like this for the situation..

Code: [ Select ]
<html>
<head>
<style>
.norm { background-color: #FFD0A0 }
.over { background-color: #D0F0FF }
</style>
</head>
<body>

<table width="100" border="0"><tr>
  <td class="norm" onmouseover="this.className='over'" onmouseout="this.className='norm'">Rollover me</td>
</tr></table>

</body>
</html>
  1. <html>
  2. <head>
  3. <style>
  4. .norm { background-color: #FFD0A0 }
  5. .over { background-color: #D0F0FF }
  6. </style>
  7. </head>
  8. <body>
  9. <table width="100" border="0"><tr>
  10.   <td class="norm" onmouseover="this.className='over'" onmouseout="this.className='norm'">Rollover me</td>
  11. </tr></table>
  12. </body>
  13. </html>
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

ah HA!! So it is valid HTML :D *does the little dance of being right because of a technicallity*

Seriously though, I'm glad that came up, would have confused the hell out of me when I start getting on to XHTML, so thank you for pointing that out.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 145 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.