Here's my .html file:
<hmtl>
<head>
<style type="text/css">
.button{
background: url('images/1.png');
}
.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<img class="button" src="images/1.png">
</body>
The files are set correctly in the correct folder; but it just refuses to work. What am I doing wrong?
Probably the best way is to use css and set the background image of the element based on the hover property.
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
The standard method is CSS:
input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }
Using JavaScript, you can overwrite the .src of an image:
imageElement.src = 'selectedButton.jpeg';
If you can use jQuery in your application then it will be fairly simple.On mouseover event of the button just swap the background image.Following sample code does it for a div element :-
<div class="title"/>
$(document).ready(function () {
$('div.title').mouseover(function () {
$(this).css("background-image", "url('Forest Flowers.jpg')");
});
});
Images don't generally have background images. Use a different element, and non-relative paths would probably be a good idea, too.
Hi Sergio. Buttons do not have a hover state. You might want to try A (link) tags, and set the background there.
You can not change the image (value of the src attribute) of the <img> tag using hover.
Use a tag to wrap the image.
<hmtl>
<head>
<style type="text/css">
a.button{
background: url('images/1.png');
display:block;
width: *width*;
height: *height*;
}
a.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<a class="button"></a>
</body>
Edit: I just realize that you are trying to replace the background image under your image....
one option that you have is to use javascript. but if you want to use only CSS and alse want to use this image as control, the above edited solution is good.
Use javascript to do this. Use onmouseover and onmouseout events to handle this.
If you can use jQuery then you can use the hover event.
$("img.button").hover(function(){
$(this).attr("src","path of image on mouse over");
},
function(){
$(this).attr("src","path of image on mouse out");
});
Pure css solution:
<html>
<head>
<style type="text/css">
.button{
background: url('images/1.png');
width: 100px; /* example size. other options: width:100% etc... */
height: 100px;
}
.button:hover{
background: url('images/2.jpg');
width: 100px; /* if size of 1.png, 2.jpg same then useless */
height: 100px; /* if size of 1.png, 2.jpg same then useless */
}
</style>
</head>
<body>
<span class="button" src="images/blank.gif"></span>
</body>
</html>
Note: blank.gif - is 1px transparent gif image. (spacer.gif)
I used an h1 tag. I have tested the following code in IE8,Firefox,GoogleChrome and it is working, we just need to add the doctype correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.jpg');
height: 400px;
width: 400px;
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>