10-10-2009, 11:55 PM
Welcome and Enjoy!
Intro:
Well this is my 7th day on this forum, so I've decided to create this little and simple tutorial wich
it's 7th tutorial I've posted on here, that's 1 tutorial per day.
I will show you two way of create mouseover effects for your buttons, 1st is CSS wich I prefer most,
and the 2nd is with JavaScript wich needs images with text on them.
CSS:
This is very simple to do and it doesn't need to be explained alot.
#button is some standard styling for our button, #button:hover are style commands that are used when mouse pointer goes over the element with
the id "button".
The html code looks like this:
Simple, I've told you!
JavaScript
Alright this one is also a simple one, but I just don't like using it, and it doesn't work if your user has javascript disabled.
The abouve code sould be put between "<head></head>" tags.
We first check if our page has images with "if(document.images)", if it finds an "<img>" tag it will return 1/TRUE,
and the code between "{" & "}" will be executed.
We need to preload images first so the user won't need to wait for the hover image to load.
We do that by createing a new Image object
And then we set ".src" as a path to our images.
The above code is used this way:
With "onmouseover" and "onmouseout" we control the appearance of our button, "document.button" means that we control the element named button.
(name="button")
We define "document.button.src" as variables that we have created previously with javascript, "button1" and "button2".
And again like I said it's easy.
Thank you for reading!
Intro:
Well this is my 7th day on this forum, so I've decided to create this little and simple tutorial wich
it's 7th tutorial I've posted on here, that's 1 tutorial per day.
I will show you two way of create mouseover effects for your buttons, 1st is CSS wich I prefer most,
and the 2nd is with JavaScript wich needs images with text on them.
CSS:
This is very simple to do and it doesn't need to be explained alot.
Code:
#button {
width:108px;
height:25px;
background:url('normal.png');
color:white;
text-align:center;
vertical-align:middle;
cursor:pointer; cursor:hand;
}
#button:hover {
background:url('hover.png');
}#button is some standard styling for our button, #button:hover are style commands that are used when mouse pointer goes over the element with
the id "button".
The html code looks like this:
Code:
<div id="button" onclick="document.location='test.htm';">Home</div>Simple, I've told you!
JavaScript
Alright this one is also a simple one, but I just don't like using it, and it doesn't work if your user has javascript disabled.
Code:
<script language="javascript" type="text/javascript">
if(document.images) {
var button1 = new Image();
button1.src = "normal.png";
var button2 = new Image();
button2.src = "hover.png";
}
</script>The abouve code sould be put between "<head></head>" tags.
We first check if our page has images with "if(document.images)", if it finds an "<img>" tag it will return 1/TRUE,
and the code between "{" & "}" will be executed.
We need to preload images first so the user won't need to wait for the hover image to load.
We do that by createing a new Image object
Code:
var button1 = new Image();The above code is used this way:
Code:
<div onmouseover="document.button.src=button2.src;" onmouseout="document.button.src=button1.src;">
<a href="test.htm"><img style="border:0px;" name="button" src="normal.png" width="108" height="25" alt="" /></a>
</div>With "onmouseover" and "onmouseout" we control the appearance of our button, "document.button" means that we control the element named button.
(name="button")
We define "document.button.src" as variables that we have created previously with javascript, "button1" and "button2".
And again like I said it's easy.
Source (Click to View)
Button Images (Click to View)
![[Image: normal.png]](http://img203.imageshack.us/img203/5103/normal.png)
![[Image: hover.png]](http://img99.imageshack.us/img99/2330/hover.png)
Thank you for reading!
![[Image: sfmentors.gif]](http://img151.imageshack.us/img151/5681/sfmentors.gif)