[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 8745
  • Last Modified:

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
0
Eternal_Student
Asked:
Eternal_Student
2 Solutions
 
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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now