|
↑
Buttons Effects >>>
Easily create active buttons with any image. Repositions image when your mouse passes over it and moves again when clicked on.
Move your mouse over the image above. Try clicking on it also!
Step 1: Add the below code to the <body> section of your page:
<style>
.mouseBeOffMe {
border-top:
10px solid #E0E0E0;
border-bottom:
10px solid #E0E0E0;
border-left:
6px solid #E0E0E0;
border-right:
10px solid #E0E0E0;
}
.mouseBeOnMe {
border-top:
6px solid #E0E0E0;
border-bottom:
14px solid #E0E0E0;
border-left:
10px solid #E0E0E0;
border-right:
6px solid #E0E0E0;
}
.mouseBeDown {
border-top:
13px solid #E0E0E0;
border-bottom:
7px solid #E0E0E0;
border-left:
10px solid #E0E0E0;
border-right:
6px solid #E0E0E0;
}
.mouseBeUp {
border-top:
10px solid #E0E0E0;
border-bottom:
10px solid #E0E0E0;
border-left:
10px solid #E0E0E0;
border-right:
6px solid #E0E0E0;
}
</style>
<center>Move
your mouse over the image above. Try clicking on it also!<BR>
<img
src
=
"../FSBackground/ball.gif"
title
=
"This is the Image Label"
width
=
"30"
height
=
"30"
border
=
"0"
class
=
"mouseBeOffMe"
onmouseover
=
"this.className='mouseBeOnMe'"
onmousedown
=
"this.className='mouseBeDown'"
onmouseup
=
"this.className='mouseBeUp'"
onmouseout
=
"this.className='mouseBeOffMe'"
onClick="window.location='../JSFactory_Pro.htm'">
</center>
|
Step 2: The script uses an image as part of its interface. You can create your own, or use the below :
(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.
→
|
