Solved

onmouseover style.

Posted on 2004-10-21
8,668 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
Question by:Eternal_Student
    6 Comments
     
    LVL 5

    Assisted Solution

    by:intreeg
    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:
    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
    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
     
    LVL 8

    Expert Comment

    by:RozanaZ
    <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
    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
    nope, not yet.  however, the asker posted a very similar question in the CSS forum and got a CSS answer as well.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Cisco Complete Network Certification Training

    If you’re an IT engineer or technician, it's time you take your career to the next level. This elite training bundle is brimming with all of the information you need to learn to sit for Cisco CNNA, CCNP, and CCENT certification exams.

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    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…

    913 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

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now