PDA

View Full Version : Button event attribute help



flawlessvictory
Jan 23rd, 2011, 04:04 AM
I am new to html coding and had a quick question. I want to have a button that, onmouseover, will become unclickable and display an image (the shape of the button becomes the image, losing previous text), then onmouseout will return to its previous status and name. This button would also preferably larger (to fit the image) and square. Thanks =D!

Nile
Jan 23rd, 2011, 04:55 AM
<!DOCTYPE html>
<html>
<head>
<title>Button Hover</title>
<script type="text/javascript">
var buttonHover = function(el){
var image = new Image(),
el = document.getElementById(el),
shade;
image.src = el.getAttribute("data-imghover");
image.onload = function(){
el.style.width = this.width+"px";
el.style.height = this.height+"px";
};
el.onmouseover = function(){
shade = document.createElement("div");
shade.style.width = this.offsetWidth+"px";
shade.style.height = this.offsetHeight+"px";
shade.style.position = "absolute";
shade.style.top = this.offsetTop+"px";
shade.style.left = this.offsetLeft+"px";
shade.style.background = "transparent";
shade.onmouseout = function(){
el.disabled = "";
el.style.background = "";
document.body.removeChild(shade);
};
this.disabled = "true";
this.style.background = "url("+image.src+")";
document.body.appendChild(shade);
};
};
</script>
</head>
<body>
<input type="button" id="paw" value="Paw" data-imghover="http://xen-fx.com/tutorials/blast/images/blast_500x500.jpg" />
<script type="text/javascript">
buttonHover("paw");
</script>
</body>
</html>



Works in firefox

flawlessvictory
Jan 23rd, 2011, 05:01 AM
Thanks!!!

flawlessvictory
Jan 23rd, 2011, 07:39 AM
<!DOCTYPE html>
<html>
<head>
<title>Button Hover</title>
<script type="text/javascript">
var buttonHover = function(el){
var image = new Image(),
el = document.getElementById(el),
shade;
image.src = el.getAttribute("data-imghover");
image.onload = function(){
el.style.width = this.width+"px";
el.style.height = this.height+"px";
};
el.onmouseover = function(){
shade = document.createElement("div");
shade.style.width = this.offsetWidth+"px";
shade.style.height = this.offsetHeight+"px";
shade.style.position = "absolute";
shade.style.top = this.offsetTop+"px";
shade.style.left = this.offsetLeft+"px";
shade.style.background = "transparent";
shade.onmouseout = function(){
el.disabled = "";
el.style.background = "";
document.body.removeChild(shade);
};
this.disabled = "true";
this.style.background = "url("+image.src+")";
document.body.appendChild(shade);
};
};
</script>
</head>
<body>
<input type="button" id="paw" value="Paw" data-imghover="http://xen-fx.com/tutorials/blast/images/blast_500x500.jpg" />
<script type="text/javascript">
buttonHover("paw");
</script>
</body>
</html>



Works in firefox
Thanks again, quick question. How would I make this smaller?

Nile
Jan 23rd, 2011, 04:25 PM
How would you make the code smaller, or the button?

flawlessvictory
Mar 14th, 2011, 01:34 AM
The button.

Nile
Apr 10th, 2011, 05:13 PM
The button size adjusts do the size of the image.