I have 4 image button containing a image. on mouse over i have to change the image(ie load a new image on the button). Here is the code.
<div class ="submit" id="submit" >
<input type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" />
<input type="image" src="informative.png" value="Informative" class ="Informative" id="Informative" onclick="posting_by_user('Informative')"/>
<input type="image" src="brilliant.png" value="Brilliant" class ="Brilliant" id="Brilliant" onclick="posting_by_user('Brilliant')"/>
<input type="image" src="cool.png" value="Cool" class ="Cool" id="Cool" onclick="posting_by_user('Cool')"/>
</div>
Here I have loaded dump.png, informative.png, brilliant.png and cool.png. on mouse over on each button i have to change the image.
<input type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb" onclick="posting_by_user('Dumb')" onmouseover="changeImg.call(this)" />
function changeImg(){
this.setAttribute("src","newImageFileName.jpg");
}
Segregating your code from html is always advised.. this answer will be helpful as it is cleaner and good for debugging..
<input type="image" src="dump.png" value="Dumb" class ="Dumb" id="Dumb"
onclick="posting_by_user('Dumb')"
onmouseover="this.src='informative.png';"
onmouseout="this.src='dump.png';" />
Try this
$(document).ready(function() {
$('input[type=img]')
.mouseover(function() {
var src = "mouseover.png";
$(this).attr("src", src);
});
You can use either Javascript or CSS for this, below is the javascript approach.
window.addEventListener("load", function load (event) {
window.removeEventListener("load", load, false);
tieEvents();
}, false);
function tieEvents() {
var button = document.getElementById('Dumb');
button.addEventListener("mouseover", hovered, false);
button.addEventListener("mouseout", unhovered, false);
function hovered() {
button.src = "anotherimg.png";
}
function unhovered() {
button.src = "anotherimg.png";
}
};
Note that setting events in HTML is not a good practice, it's better to tie them up in Javascript.
The CSS way is as follows:
#Dumb {
backgroud: url("dump.png");
}
#Dumb:hover {
backgroud: url("another.png");
}
you can use CSS
on mouse hover shows another image in same size basic example
button1 {background: url(img/button1.png)}
button1:hover {background: url(img/button1_hover.png)}
or you can use sprite image, have both in one image and use CSS rules to change its position
http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.