SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript and onMouseOver

    Hi guys,

    Is there anyway to combine the onMouseOver command with the javascript code style="filter:alpha(style=3, opacity=100)"? I imagine getting this code to apply only on mouse-over must be pretty simple, but I am not java-versed enough to figure it out.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div onmouseover="this.style.filter='alpha(style=3, opacity=100)';">mydiv</div>

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its still not working correctly. When I mouse over, I get the correct shading effect, but when the mouse moves off the div, the shading effect remains. How do I keep the javascript code from effecting the look of my text after I move my cursor away from it? My code is:

    <div id="navigation">
    <div class="navtext1" onmouseover="this.style.filter='alpha(style=3, opacity=100)';"><a href="#">HOME</a></div>
    </div>

    #navigation{
    height:18px;
    display:table;
    background-color:#5C743D;
    }

    #navigation a{
    font:bold .69em Arial, Helvetica, sans-serif;
    color:#D5EDB3;
    letter-spacing:.06em;
    text-decoration:none;
    display:block;
    height:18px;
    line-height:18px;
    }

    #navigation a:hover{
    background:#99CC66;
    color:#993300;
    }

    .navtext1{
    text-align:center;
    float:left;
    width:14%;
    }
    Last edited by Seijun; May 26, 2008 at 15:42.

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You also need to set a onmouseout event which sets the various css properties back to normal.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I added onMouseOut="this.className='navtext2'" with


    .navtext2{
    color:#D5EDB3;
    text-align:center;
    float:left;
    width:14&#37;;
    }

    But it had no effect. Also tried onMouseOut="this.idName='navigation'" but also with no effect. Not sure if this.idName is even valid. Im kind of shooting in the dark.. This is the first time I have ever gone near Java and ive never used the mouseover or out commands before.

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "idName" is not valid... try "this.id"

    Also, your attributes should be entirely lowercase if you're using XHTML.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using Firefox? - if you are you should download "Firebug" - it's a great JavaScript debugging tool!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy: No, I'm using HTML. Should it be XHTML if im using Javascript?

    No, not using firefox, but I do have it on my comp. I'll give firebug a look.

    Ok, my code is now:
    <div id="navigation">
    <div class="navtext1" onmouseover="this.style.filter='alpha(style=3, opacity=100)';" onmouseout="this.id='navigation';"><a href="#">HOME</a></div>
    </div>

    Still not behaving. Unless I need to move the css from "#navigation a" to "#navigation"?

    EDIT: Ok, merging navigation a and navigation succeeded only in making my text twice as small on mouseout. Do I need a completely new css class for mouseout then?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    it works for me when the filter property is cleared when onmouseout

    Code html4strict:
    <div class="navtext1" onmouseover="this.style.filter='alpha(style=3, opacity=100)';" onmouseout="this.style.filter='';"><a href="#">HOME</a></div>
    <div class="navtext2" onmouseover="this.style.filter='alpha(style=3, opacity=100)';" onmouseout="this.style.filter='';"><a href="#">HOME</a></div>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked beautifully! Thank you very much!

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this is odd. I have my text set as bold in the css. But after I mouse-out, the text becomes twice as bold as before, and stays that way until I refresh the page. Why is that happening?

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *bump* Any ideas for fixing the double-bold issue? I even tried just adding <b></b> around the text and it still became twice as bold on mouseout.

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the filter tag I imagine you're using IE. Which version? Here's a simplified copy of the code in a page, I don't see the problem:

    Code:
    <html>
    <head>
    <style type="text/css">
    #navigation{
    height:18px;
    display:table;
    background-color:#5C743D;
    }
    
    #navigation a{
    font:bold .69em Arial, Helvetica, sans-serif;
    color:#D5EDB3;
    letter-spacing:.06em;
    text-decoration:none;
    display:block;
    height:18px;
    line-height:18px;
    }
    
    #navigation a:hover{
    background:#99CC66;
    color:#993300;
    }
    
    .navtext1{
    text-align:center;
    float:left;
    width:14&#37;;
    background: #BBBBBB;
    }
    </style>	
    </head>
    <body>
    <div class="navigation">
    <div class="navtext1" onmouseover="this.style.filter='alpha(style=3, opacity=100)';" onmouseout="this.style.filter='';"><a href="#">HOME</a></div>
    </div>
    </body>
    </html>

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm using IE7.

    Hmm, I dont see the problem either, not with just the code you posted. However, thats just some of the css/code for the webpage--BUT the only css that I thought applied to the text in question. How do I post the complete code within a scrolling box like you did?

    EDIT: I just noticed jim, in the code you posted, change div class="navigation" to div id="navigation, then delete "background: #BBBBBB;". Now you should be able to see what I'm talking about.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •