Professional vBulletin Hosting!
thumb

Premium & Custom vB Skins..

vBulletin and Coding Guides
Make a mouse over script for your buttons/Navbar PDF Print E-mail

It is recommended you read this first: Make an image preloader script
Now that you have done the preloading script so the graphics load properly you need to actually add the script for the mouse overs. For the most compatibility I prefer to use JS & CSS.

To do this you need to add this code to your page:

HTML Code:
<script type="text/javascript">
<!--
changein = function(target)
{
document.getElementById(target).className = 'nav_hover';
}

changeout = function(target)
{
document.getElementById(target).className = 'nav_normal';
}
//-->

</script>

What this does is get's the target element and changes it's class to the hover class or if it already is the hover class changes it to the normal class.
Now you need to add the following classes to your CSS code:

Code:
.nav_hover
{

}
.nav_normal
{

}

Add code in those 2 classes as you require. If you need any help then just ask here or make a new topic in the modification questions forum.

Now that you have the classes and the script you need to add what you want to actually change. Lets say the text is in a div. Here's an example of what it may look like:

Code:
<div id="home" onmouseover="changein(this.id); onmouseout="changeout(this.id);" class="nav_normal"><a href="/home.html">Home</a></div>

Now to explain; first of all we define the id. The we say when the mouse comes over the div execute the function to change it's class. You may also notice the "this.id" that fetches the id of the div the code is in and uses that as the target. When you move the mouse out again you can see it uses similar code to revert the class back to normal. Then you can see the class which would be the normal class before you put your mouse over it - nav_normal.

I hope this tutorial was enlightening