Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

onmouseover style.

Posted on 2004-10-21
6
Medium Priority
?
8,741 Views
Last Modified: 2012-08-13
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
Comment
Question by:Eternal_Student
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 5

Assisted Solution

by:intreeg
intreeg earned 400 total points
ID: 12373182
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
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 600 total points
ID: 12373394
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 12373519
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:RozanaZ
ID: 12373543
<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
 
LVL 5

Expert Comment

by:intreeg
ID: 12373587
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12375249
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question