<HTML>
<HEAD>
<TITLE>onMouseDown and onMouseUp Event Handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
if (document.images) {
var RightNormImg = new Image(16,16)
var RightUpImg = new Image(16,16)
var RightDownImg = new Image(16,16)
var LeftNormImg = new Image(16,16)
var LeftUpImg = new Image(16,16)
var LeftDownImg = new Image(16,16)
RightNormImg.src = "http://www.java2s.com/style/logo.png"
RightUpImg.src = "http://www.java2s.com/style/logoRed.png"
RightDownImg.src = "http://www.java2s.com/style/logo.png"
LeftNormImg.src = "http://www.java2s.com/style/logo.png"
LeftUpImg.src = "http://www.java2s.com/style/logo.png"
LeftDownImg.src = "http://www.java2s.com/style/logoRed.png"
}
function setImage(imgName, type) {
if (document.images) {
var imgFile = eval(imgName + type + "Img.src")
document.images[imgName].src = imgFile
return false
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>onMouseDown and onMouseUp Event Handlers</H1>
<HR>
<P>Roll atop and click on the buttons to see how the link event handlers swap
images:</P>
<CENTER>
<A HREF="javascript:void(0)"
onMouseOver="return setImage('Left','Up')"
onMouseDown="return setImage('Left','Down')"
onMouseUp="return setImage('Left','Up')"
onMouseOut="return setImage('Left','Norm')"
>
<IMG NAME="Left" SRC="LeftNorm.gif" HEIGHT=16 WIDTH=16 BORDER=0></A>
<A HREF="javascript:void(0)"
onMouseOver="return setImage('Right','Up')"
onMouseDown="return setImage('Right','Down')"
onMouseUp="return setImage('Right','Up')"
onMouseOut="return setImage('Right','Norm')"
>
<IMG NAME="Right" SRC="RightNorm.gif" HEIGHT=16 WIDTH=16 BORDER=0></A>
</CENTER>
</BODY>
</HTML>
|