onmouseover style.

Hi there,

I am using this

onmouseover="this.style.backgroundColor='#339900'"

On each cell in my menu. But because it is repeated along with:

onmouseout="this.style.backgroundColor='#003366'"

It makes for a lot of code.

How could i solve this problem ? **for ALL the browsers please.

thanks in advance
LVL 18
Eternal_StudentAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

intreegCommented:
you could and functions for over and out and change each cell to use the functions, will shorten it a bit.
Example
function mOver(){
this.style.backgroundColor='#339900'
}
function mOut(){
this.style.backgroundColor='#003366'
}

cell - onMouseOver="mOver()" onMouseOut="mOut()"

its alittle shorter.

Would there be anyway to dynamically generate your cells server side? This way you could use a loop
while(x<y){
gen cell onMouseOver=mOver() onMouseOut=mOut()
}

The server side is the cleanest way IMO to gen a list of items with similar code.

Alternatively you might be able to use a client side script loop
while(x<y){
document.wrtite("cell code" + " onMouseOver=mOver() onMouseOut=mOut()")
}

this is usually a bit more ticky.
0
cLFlaVACommented:
Here's how I would do it:  preload the events.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--
function preLoadEvents() {
    var e = document.getElementsByTagName("td");

      for (var i = 0; i < e.length; i++) {
        if (e[i].id.indexOf("dome") != -1) {
            e[i].onmouseover = theMouseOver;
                  e[i].onmouseout = theMouseOut;
            }
      }
}

function theMouseOver(e) {
    var targ;
      if (!e) var e = window.event;
      if (e.target) targ = e.target;
      else if (e.srcElement) targ = e.srcElement;
      if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode;

    targ.style.backgroundColor = 'black';
}

function theMouseOut(e) {
    var targ;
      if (!e) var e = window.event;
      if (e.target) targ = e.target;
      else if (e.srcElement) targ = e.srcElement;
      if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode;

    targ.style.backgroundColor = 'white';
}
-->
</script>

<style type="text/css">

</style>

</head>

<body onload="preLoadEvents();">

<table>
<tr>
<td id="dome1">stuff</td>
<td id="dome2">stuff</td>
<td id="dome3">stuff</td>
<td id="dome4">stuff</td>
<td id="dome5">stuff</td>
<td id="dome6">stuff</td>
<td id="dome7">stuff</td>
</tr>
</table>

</body>

</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eternal_StudentAuthor Commented:
Thanks guys.

I think they do reduce the code a little bit but not a great deal.
I may just stick with what ive got for now, but least I get to see other methods.

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
a:hover
{
      background-color: #339900;
      color: white;
}
a
{
      background-color: #003366;
      color: white;
}
</style>
</HEAD>
<BODY>
<a id="link" href="#">Link1</a><br>
<a id="link" href="#">Link1</a><br>
<a id="link" href="#">Link1</a><br>
<a id="link" href="#">Link1</a><br>
<a id="link" href="#">Link1</a><br>
</BODY>
</HTML>
0
intreegCommented:
True the style method would work for links, but how would you make it work on a cell? Can you use hover with "td" ? I have never tried would be really cool if you could and probably the cleanest response so far... IMO.
0
cLFlaVACommented:
nope, not yet.  however, the asker posted a very similar question in the CSS forum and got a CSS answer as well.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.