How to Make an Interactive Map in jQuery

An interactive map is an image that can be inserted into a Web page and divided into sections, each representing a clickable link to a specified URL. You can use CSS to section the image and then use jQuery to create the clickable functions that trigger when you click on a section of the image. You can use any image as the interactive map and link the image sections to a jQuery function.

Instructions

1. • 1
     Right-click the HTML file you want to use to create the map. Click "Open With" and select your preferred editor.
   • 2
     Insert the image you want to use. The following code adds an image to your HTML document:

     <img src="myimage.jpg" id="map" />

     Replace "myimage.jpg" with your own image filename.
   • 3
     Set up the CSS to section off the image into the clickable segments. The following code sections the image into two distinct sections:

     #panel1b {left: 0; width: 95px;}
     #panel2b {left: 96px; width: 75px;}
   • 4
     Add the jQuery function that activates when a user clicks on one of the sections. This code navigates to the Web page associated with the section:

     $('#map').click(function() {
     if ("#panel2b") {
     browser.navigate = "page1.php";
     } else {
     browser.navigate = "page2.php";
     }
     });

     Replace the Web page filenames with your own.
   • 5
     Add the jQuery script files to your head tags. Copy and paste the following code to the head section of your code:

     <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>