Changing background image of Div - Simple Problem

Discussion in 'JavaScript' started by jeremyhowell, Dec 13, 2010.

0
  1. #1
    I have checked this code again and again, but I can't find the problem? I am trying to change the background of the div to another image when the user rolls over it, but it is not working. I have included the style sheet as well in case you need it. I have tested this code with just changing minor things like color/background color etc, but it still doesn't work? Cant seem to see the problem.

    

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="text/javascript">
function changeimg(id)
{
id.style.backgroundImage="url(activebutton.png)";
}
</script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="logomenu">
<div id="homebutton" class="menubutton" onclick="changeimg(this)"></div>
<div id="portfoliobutton" class="menubutton"></div>
<div id="servicesbutton" class="menubutton"></div>
<div id="learnbutton" class="menubutton"></div>
</div>

</body>
</html>
    Code (markup):
    Stylesheet 

    
.menubutton {
	background-image:url(button.png);
	background-position:bottom;
	height:80px;
	background-repeat: no-repeat;
	width:85px;
	display:inline-block;
	padding-left:22px;
}
    Code (markup):
     
    jeremyhowell, Dec 13, 2010 IP
  2. shofstetter

    shofstetter Well-Known Member

    Messages:
    178
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    120
    #2
    Here is a solution I found on another site no javascript required pure css:

    Yes it is possible to make something hover, my using the pseudo-state ":hover"

    for divs, this would be:

    div { normal state styling here }
    div:hover { hover state styling here}



    However, i you were to use this code in IE6, nothing would happen. This is because IE6 only supports the hover psuedo for <a> tags. This is not much of a problem in your case, as it is easy to style links to appear as block elements:

    a { display: block; width: 140px height: 20px; padding: 5px; }
    a:hover { change color etc here }



    In order to get them to appear linearly, you will need to use floats.

    source:http://www.webdesignerforum.co.uk/topic/1239-css-div-hover-how-to-do-i-make-divs-hover-effect/
     
    shofstetter, Dec 13, 2010 IP
  3. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #3
    I didn't think of using the pseudo class for divs.

    I actually just noticed the problem was with the <script> tag, I used language instead of type. It was strange that this was all I needed to fix the problem, but it worked.

    Thanks for the the reply.
     
    jeremyhowell, Dec 13, 2010 IP