Image mapping and playing audio files onmouseover

Not all browsers support the html5 audio tag. If you are reading this post in Internet Explorer 8 or below you will not be able to hear the example sounds when hovering over the different sections of the above image.

Create an image and duplicate it

multiple images

The images should be the same size.

Create an image map with hover-able regions

I used GIMP version 2.8 to create my image map.

Firstly open one of your images with GIMP, it doesn’t matter which one as the image map will work for each of them, then navigate to filters web Image Map…

The image opens in a new editor.
You can now set the co-ordinates for each hover-able region using the tool to the left of the window.
Various shapes are supported.
The polygon is the one I found the most useful for my image because of the shapes of the areas I needed to define.

Once you have outlined your shape double-click and a new window appears with options for clickable links and javascript for mouseover and mouseout methods.
You can also fine-tune the co-ordinates of your polygon in this window.

gimp image map

It’s possible to set the mouseover and mouseout methods using this pane now but I want to wait until after because I’m going to write my own function to handle both audio playing and image swapping.

Once you have all your areas mapped save the file as an .html file.

gimp image map done

The html for this image map looks like this. Don’t forget to change the image src attribute which at the moment is set to “Untitled” to the image url.

<img src="Untitled" width="500" height="278" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:matthew -->
<area shape="poly" coords="11,11,62,11,62,266,10,266"  nohref="nohref" />
<area shape="poly" coords="72,11,113,11,113,175,124,175,124,266,72,266"  nohref="nohref" />
<area shape="poly" coords="143,11,175,11,175,175,184,175,184,266,134,266,133,176,143,175,143,176"  nohref="nohref" />
<area shape="poly" coords="204,11,245,11,245,266,194,266,195,175,204,175"  nohref="nohref" />
<area shape="poly" coords="256,11,296,11,297,175,306,175,306,266,255,266"  nohref="nohref" />
<area shape="poly" coords="327,11,357,10,356,175,367,175,368,266,317,266,317,174,327,174"  nohref="nohref" />
<area shape="poly" coords="388,11,418,11,418,174,428,174,428,266,378,266,378,174,388,174"  nohref="nohref" />
<area shape="poly" coords="448,12,489,12,489,266,437,266,437,174,448,174"  nohref="nohref" />

Audio files for each area

Add your audio tags to the bottom of the html file like this, one for each map area.

<audio id="note1"><source src="data/note1.mp3"></source><source src="data/note1.ogg"></source></audio>
<audio id="note2"><source src="data/note2.mp3"></source><source src="data/note2.ogg"></source></audio>
<audio id="note3"><source src="data/note3.mp3"></source><source src="data/note3.ogg"></source></audio>
<audio id="note4"><source src="data/note4.mp3"></source><source src="data/note4.ogg"></source></audio>
<audio id="note5"><source src="data/note5.mp3"></source><source src="data/note5.ogg"></source></audio>
<audio id="note6"><source src="data/note6.mp3"></source><source src="data/note6.ogg"></source></audio>
<audio id="note7"><source src="data/note7.mp3"></source><source src="data/note7.ogg"></source></audio>
<audio id="note8"><source src="data/note8.mp3"></source><source src="data/note8.ogg"></source></audio>

Different web browsers are compatible with different types of audio files.
To satisfy all browsers which support the audio tag you should specify two different audio types, mpeg and ogg.

We will allocate one audio element to each hoverable area and then onmouseover we will play the file and simultaneously swap the image to the image which highlights the hovered area on the map.

The javascript function

This is the function which will take care of playing the audio file and swapping the image.

function changeImg(note,image) {

Now in the html file we can use our function with onmouseover in each area tag like this.

<area shape="poly" coords="11,11,62,11,62,266,10,266"  nohref="nohref" onmouseover="changeImg('note1','della_logo1.png');"/>

…where ‘note1′ is the id of the audio you want to play and ‘della_logo1.png’ is the name of the image file to show.

If you have long audio files and you want to stop the audio when the mouse moves out of the map area you should make another function and use audio.pause() onmouseout.



No Comments

Comments are closed.