SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you use dom to change the background image on :hover?

    Hello,

    I need to change the background image when hovering. However, I need to do it through the dom for testing purposes. Below is a controlled version of what i am trying to do minus the hover.

    Any help will be appreciated, thanks

    Ian


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>Untitled Document</title>
    		<style type="text/css">
    			#buttonTest {
    					width: 200px;
    					height: 200px;
    			    background: url('originalImage.jpg') 4px 4px no-repeat;
    			}
    			#buttonTest:hover {
    			    background: url('originalHoverImage.jpg') 4px 4px no-repeat;
    			}
    		</style>
    		<script language="JavaScript1.2">
    			function init(){
    				document.getElementById('buttonTest').style.backgroundImage = "url(newImage.jpg)";
    			}
    		</script>
    	</head>
    	<body onload="init()">
    		<div id="buttonTest">
    		</div>
    	</body>
    </html>

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, the :hover pseudo-element selector only applies to the <a> tag. You'll need to attach an event listener to the DIV to do a rollover.

    And get rid of that language="JavaScript1.2" attribute. All major browsers support JavaScript 1.5 now. The only attribute you need for the SCRIPT tag is type="text/javascript".


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
  •