Hey
Was wondering how this is done as I have seen it before. Like I have a .png ontop of the buttons that appears when I mouseover them but I want it to fade in smoothly when I mouseover them and out smoothly when I remove my mouse from them...
How do I do that? I think a javascript would be fine but idk how. Searched on google but couldnt find anything useful :/
thanks
(2012-06-24, 04:00 PM)thomja Wrote: [ -> ]I have a .png ontop of the buttons that appears when I mouseover them but I want it to fade in smoothly when I mouseover them and out smoothly when I remove my mouse from them.
You can do that with
jQuery, specifically
fadeToggle.
Noticed that, but not sure on how to install it. Ok sure, I got jQuery but then what?
Also, how do I install jQuery? What code do I use and where for my buttons? tut?
(2012-06-24, 09:54 PM)thomja Wrote: [ -> ]Noticed that, but not sure on how to install it. Ok sure, I got jQuery but then what?
You attach the function to a mouseover event for the object. The page I linked to has an example.
If you're unfamiliar with jQuery but familiar with javascript, I highly recommend you take their jQuery tutorial. You won't regret it...
Ok, but how do I install jQuery to the forum? Also read that I need to insert some code in order to keep jQuery to conflict with the myBB code
I managed to install it. But how do I add the effect?
I found this code that already ads the png image on mouseover but how do I make it fade?
.nav a:hover {
height: 32px;
text-decoration: none;
background: url(images/style-minecraft/navhover.png);
background-repeat: repeat;
background-position: center bottom;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.nav a.current {
color: #81bf29;
background-image: url(images/style-minecraft/navhover.png);
background-repeat: no-repeat;
background-position: center bottom;
}