SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Validate my mouse over code

    hi

    i m using this code to show hover effect on my buttons.

    But w3 validator shows error as
    Code:
    1) there is no attribute "onMouseOut"
    2) there is no attribute "onMouseOver"

    My code works fine. Here is my code. But how can i validate it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    if(document.images)
    {
    
    p1 =  new Image();
    
    p1.src = "pic1_hover.jpg";
    }
    </script>
    </head>
    
    <body>
    <p>
    <a href="aboutus.html" onMouseOut="a.src='pic1.jpg';" onMouseOver='a.src=p1.src;'><img src="pic1.jpg" name="a" alt="" border="0" /></a>
    </p>
    </body>
    </html>
    vineet

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The attribute names simply need to be all lowercase then they will validate fine.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    The attribute names simply need to be all lowercase then they will validate fine.
    thanks chris

    it validates now with lowercase

    vineet

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    NOT that what you are doing in the example has ANY business being done using javascript after around 1998... but your doctype says the code is in transition from 1997 to 1998 anyways... as does the use of a name attribute as an element index, the presence of the border attribute, etc, etc..

    Czech this out:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <title>
    	Rollover demo
    </title>
    
    <style type="text/css">
    .hoverAnchor img {
    	border:0;
    }
    
    .hoverAnchor:active img,
    .hoverAnchor:focus img,
    .hoverAnchor:hover img {
    	opacity:0; /* modern browsers */
    	-moz-opacity:0; /* FF 3- */
    	filter:alpha(opacity=0); /* IE8- */
    }
    </style>
    
    </head><body>
    
    <p>
    	<a
    		href="aboutus.html"
    		class="hoverAnchor"
    		style="background:url(pic1_hover.jpg)"
    	>
    		<img src="pic1.jpg" alt="" />
    	</a>
    </p>
    
    </body></html>
    Javascript? Vee don't need no steenking Javascript!

    NOT that said method is a technique I'd suggest using either, since image replacement and the incorrectly named "CSS sprites" would mean a faster and smoother working page with graceful degredation -- depending on how many of these you plan on putting on a page.


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
  •