I’ve received a few questions as to how we created the fade effect for image links in Standard Theme.
In similar cases, I’d just pass along the source files and instructions on how to use them, but since that functionality is tied to the theme itself, it’s easier to give a quick tip on how to achieve this in any of your own projects.
It’s simple, too.
First, make sure that you’ve got the jQuery library included in your page. If not, add the following line before the closing head tag in your page’s markup:
[cc lang=”html”]
[/cc]
Next, write the following code in your text editor. This is the JavaScript that actually creates the fade effect.
[cc lang=”javascript”]
$(function() {
$(“a > img”).hover(function() {
$(this).fadeTo(“fast”,0.5);
}, function(){
$(this).fadeTo(“fast”,1.0);
});
});
[/cc]
And save it alongside the rest of your web-based project (perhaps in the /javascript/ directory). Next, include it just after your jQuery import:
[cc lang=”html”]
[/cc]
Specifically, this code finds all images that are wrapped in anchor tags in the document. Whenever the mouse moves over said image, the fade effect is created (by changing the opacity value). Once the mouse leaves the image, the opacity is returned to one.
Easy, huh? Be sure to download the demo, too.
Eric J says
It would be cool to have an example file for these kinds of things.
Tom says
Done and done, Eric!