Support Forums

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. Yeye

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();

And then we set ".src" as a path to our images.

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)

Thank you for reading!

A better way to do it using CSS is to have an image twice the height of your button, the top half has your normal state, bottom half the hover state then use the background-position to change them. This will remove the loading lag when you hover for the first time.

(10-11-2009, 04:12 AM)Tim Wrote: [ -> ]A better way to do it using CSS is to have an image twice the height of your button, the top half has your normal state, bottom half the hover state then use the background-position to change them. This will remove the loading lag when you hover for the first time.

Yes that is also a good choise to do, uhmm how could I forgot that.
And as you say, CSS is much better for such things since it removes the loading time.

Thank you.

No worries, also CSS will work on all browsers, even if javascript is turned off which is another plus.

(10-11-2009, 04:21 AM)Tim Wrote: [ -> ]No worries, also CSS will work on all browsers, even if javascript is turned off which is another plus.

Exactly and that's why I prefer css over javascript, and even one more plus point, no need for img tags, and the syntax is shorter, easier to overview.
I still use the "location" javascript but that isn't needed.

Gaijin

Tim

Gaijin

Tim

Gaijin