CSS Codes
CSS Layouts
FF1+ IE9+ Opr7+

Image Swap and HTML5 audio effect

Author: Dynamic Drive

Updated Dec 5th, 11: Script rewritten for HTML audio support and improved versatility.

Description: This script makes it easy to add rollover/ mousedown effects to any element on the page, whether it's an image or text link, even image submit buttons. The two possible effect are either an image change, or audio playback using HTML5. For HTML5 audio, the supported browsers are  IE9+, FF3.5+, Chrome, Safari 3+ (with Quicktime installed), and Opera 10.5+. Whichever effect you utilize, the script will preload the image or audio for a smooth transition.

Demos: Move your mouse over/click the following elements:

Element Effect Sample HTML

 		 Rollover image. <img src="original.jpg" data-srcover="over.jpg">

 		 Rollover and Mousedown image. <img src="original.jpg" data-srcover="over.jpg" data-srcdown="down.jpg">

 		 Rollover image and sound. <img src="original.jpg" data-srcover="over.jpg" data-soundover="sound.mp3, sound.ogg">
 
 		 Rollover image and mousedown sound on submit button. <input type="image" name="submitimg" src="original.jpg" data-srcover="over.jpg" data-sounddown="sound.mp3, sound.ogg" border="0">
Dynamic Drive
 		 Rollover sound <a href="http://www.dynamicdrive.com" data-soundover="sound.mp3, sound.ogg">
CSS Drive Mousedown sound. <a href="http://www.dynamicdrive.com" data-sounddown="sound.mp3, sound.ogg">

Directions Developer's View

Step 1: Insert the below script into the <head> section of your page:

Select All

 The above accesses an external JavaScript file. Download the below file, and upload to your webpage directory:

imageswapaudio.js

Step 2: All that's left is to apply the desired image change or audio playback to an element, and whether for the effect to occur onmouseover or onmousedown. Simply add one of the following custom "data" attributes inside the element:

  • data-srcover="rolloverimage.gif"

  • data-srcdown="mousedownimage.jpg"

  • data-soundover="audio1.mp3, audio1.ogg, etc"

  • data-sounddown="audio2.mp3, audio2.ogg, etc"

The first two attributes when added changes the image of an image element either onmouseover or onmousedown. Their value should be the full URL/path to the new image. The later two attributes plays an audio using HTML5 for the same two events. Their value in this case should be set to a list of audio files of the same sound but at at very least in .mp3 and .ogg formats. Why the multiple formats? This is since different browsers support different audio formats: Firefox/Chrome/Opera support the .ogg format while IE9+/Safari support the mp3 format instead. So at a minimum you should define at least these two file formats, with possibly "wav" as well for maximum browser support. Separate each file name with a comma, and if a file is in a different directory than the current page, include the path to it from the current page as well (ie: "myfiles/click.mp3"):

<img src="original.jpg" data-srcover="over.jpg" data-soundover="whistle.mp3, whistle.ogg, whistle.wav">

To convert one audio format to another, you can use an online audio converter such as this one. For more free "click" related sound clips, check out this site.

Dynamically adding an image/audio effect to an element

For static web pages, the easiest way to target an element with an image/audio effect is to insert one of the above four "data" attributes inside it. However, for situations where you need to apply the effect dynamically or on demand to an element based on some loose criteria, you can call the following function instead when the document loads to accomplish this:

evteffect('jQuery_selector', {eventname: 'value'})

The first parameter should be a jQuery selector that captures the elements you want to target, such as "a" for all links, or "#main a img" for all image links inside the "main" container. The second parameter should be an object of name/value pairs, with name being one of the four possible event names "srcover", "srcdown", "soundover", or "sounddown", and the value their respective value. An example is worth a thousand words; the below dynamically adds a rollover image and onmousedown sound effect to all image links on the page:

jQuery(function($){ //on DOM load
  evteffect('a img', {srcover:'down.gif', sounddown:'whistle.mp3, whistle.ogg'})
})