HTML Elements

Page 4

Simple Image Map

Introduction Image Map Audio Tags JavaScript CSS Graphics Summary

Introduction

Find components on an image of the inside of an iPhone 5. The name of the element highlights and you hear a chime, when you select an item from the list below.

Learn to create a simple image map, with rectangles, that define each area within a picture. See the associated JavaScript, HTML markup and CSS for this image map. Developers can easily add code for scoring, and change images, to create hidden object games and games for learning.

Find iPhone Components

Information Area

Find the Following iPhone Components

Camera

You tapped the main camera.

SIM Card

You tapped the SIM card with SIM card box.

Battery

You tapped the battery.

Speaker Module

You tapped the speaker module.

Headset Jack

You tapped the headset jack.

Microphone

You tapped the microphone.

Serial Number Area

You tapped the serial number area. Look here for the serial number of your phone.

Image Map

When the user taps a declared area within if-iphone.png, then call JavaScript function highlight(), pass the textual element's id attribute, as the only parameter to highlight(). Optionally hyperlink scroll the page, to the text element with href="#eCamera" or href="#eSim".

<img id="imMap"  
 width="250"
 height="503"  
 src="if-iphone.png" 
 alt="Internal Components of an iPhone 5"  
 usemap="#iphone"
>

<map name="iphone">

  <area id="camera"     
  shape="rect" 
  coords="186,28,220,62"   
  alt="Camera"         
  href="#eCamera"  
  onclick="highlight('eCamera')">
  
  <area id="sim"        
  shape="rect" 
  coords="152,224,226,274" 
  alt="Sim Card"       
  href="#eSim"     
  onclick="highlight('eSim')">
  
  <area id="battery"    
  shape="rect" 
  coords="25,80,142,425"   
  alt="Battery"        
  href="#eBattery" 
  onclick="highlight('eBattery')">
  
  <area id="speaker"    
  shape="rect" 
  coords="163,377,210,424" 
  alt="Speaker Module" 
  href="#eSpeaker" 
  onclick="highlight('eSpeaker')">
  
  <area id="headset"    
  shape="rect" coords="47,432,71,469"   
  alt="Headset Jack"   
  href="#eHeadset" 
  onclick="highlight('eHeadset')">
  
  <area id="microphone" 
  shape="rect" coords="80,446,178,418"  
  alt="Microphone"     
  href="#eMicrophone" 
  onclick="highlight('eMicrophone')">
  
  <area id="serial"     
  shape="rect" 
  coords="179,276,213,294" 
  alt="Serial Number Area" href="#eSerial" 
  onclick="highlight('eSerial')">
</map>

Audio Tags

This audio tag includes three source files for MP3, OGG and WAV formats.

<audio id="aAudio">  
        
<source 
src="../../audio/effects/chime.mp3" 
type="audio/mpeg" />

<source 
src="../../audio/effects/chime.ogg" 
type="audio/ogg" />

<source 
src="../../audio/effects/chime.wav" 
type="audio/wav" />
          
</audio>

JavaScript

When the user taps an area in the image, then obtain the text element they tapped, play the chime sound and highlight the textual element.

If a previous element was tapped, then remove the highlighting.

var lastElem = null;
var eAudio = null;

/**
 * Call this function once
 * when the Web page loads.
 * This just obtains the audio element.
 */
function loadExample(){
 eAudio = document.getElementById("aAudio");
}

/**
 * @param s: String id of an HTML Element.
 * Highlight the selected element.
 * Play the chime audio.
 * Remove highlighting from any
 * previously selected elements.
 */
function highlight(s){
 var elem = document.getElementById(s);
 if (elem != null){
  elem.style.backgroundColor = "red";
  elem.style.color = "black";
  eAudio.play();
  if(lastElem != null){
   lastElem.style.backgroundColor = "#00052d";
   lastElem.style.color = "#00aaaa";
  }
  lastElem = elem;
  }
}

CSS

Declare precise pixel dimensions for this image because we use precise pixel coordinates to locate items in the image.

body{
 background-color:#00052d;
}

#imMap{
 width:250px; 
 height:503px; 
 display:block; 
 margin-left:auto; 
 margin-right:auto; 
 text-align:center;
}

h4{
font-weight:bold;
}

Audio

Audio Markup

<audio 
id="aAudio"
>
          
<source 
src="../../audio/effects/chime.mp3" type="audio/mpeg" 
/>

<source 
src="../../audio/effects/chime.ogg" type="audio/ogg" 
/>

<source 
src="../../audio/effects/chime.wav" type="audio/wav" 
/>  
        
</audio>

Graphics

This particular image was a screen shot from the 3D iPhone Game for my book, Create 3D Games on Amazon Kindle. However any two dimensional graphic should work fine.

Photoshop's info window with the eye drop selector was used to find coordinates on the image.

Summary

You found components on an image of the inside of an iPhone 5. The name of the element highlights and you hear a chime, when you selected an item from the list above.

You learned to create a simple image map, with rectangles, that define each area within a picture. You saw the associated JavaScript, HTML markup and CSS for this image map. Developers can easily add code for scoring, and change images, to create hidden object games and games for learning.