• PHP
  • Ruby on Rails
  • MySQL
  • Linux
    • SELINUX
    • Fedora
    • debian
  • Apache
  • nginx
  • AJAX
Albertech.net

Simple jQuery image rollover script

June 2, 2011 4:47 pm / Albertech.net

Here’s my simple jQuery image rollover script.
View albertech-net-jquery-rollover.js Source

I modified it to work with absolute URLs. This works well if you have different servers hosting your image files. Adding image rollovers to your page is easy – just add class=”rollover” to your images.

$(function() { 
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});

Usage:
1) Make a div with the id named “content”.
2) Add a class=”rollover” to the image.
3) Make two images — the second rollover one must have the same name as the first image with a -hover added to the end. For instance:

myimage.gif
myimage-hover.gif

The page should look something like: (simplified)
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});
</script>
</head>
<body>
<div id="content">
   <img class="rollover" src="myimage.gif" alt="" />
</div>
</body></html>

Share this:

  • Facebook
  • Google
  • Twitter
  • Print
  • Email
Posted in: AJAX, jQuery / Tagged: image rollover, jquery

One Thought on “Simple jQuery image rollover script”

  1. Pingback: Al

Post Navigation

← Previous Post
Next Post →

Categories

  • AJAX
  • Android
  • Apache
  • Canon Cameras
  • Cloud
  • CMS
  • Computer Mods
  • Conferences
  • Deals
  • debian
  • Fedora
  • Flash
  • Frameworks
  • git
  • Hardware
  • HTML
  • IDE
  • iPhone
  • iPhone App Review
  • jQuery
  • Linux
  • Mac OS X
  • MySQL
  • nginx
  • PHP
  • portfolio
  • Puppet
  • Ruby on Rails
  • Script Reviews
  • SELINUX
  • Software
  • Software Review
  • SQL Server
  • statistics
  • Tech
  • Tomcat
  • Uncategorized
  • VMWARE
  • VPS
  • Windows
  • wordpress
  • Zend Framework

Blogroll

  • DragonAl Flickr
  • Dropbox – Free 2GB Account
  • James' Blog
  • Javascript Compressor
  • PHP Builder Community
  • PHP-Princess.net
  • Rubular – Regular Expression Validator
  • The Scale-Out Blog
  • Tiny MCE

Tags

activation AJAX android antec Apache AWS awstats canon coda codeigniter debian enclosure external free G1 install vmware tools Internet Explorer iphone 5 jquery Linux mx-1 MySQL office 2007 OSX photoshop PHP plugin plugins portfolio redesigned website review rewrite script security SELinux ssh tinymce tutorial upgrade VMWARE vmware server wordpress wordpress mu XSS zend framework
© Copyright 2013 Albertech.net
Infinity Theme by DesignCoral / WordPress
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.