Multiple Image Maps On A Page


Image Maps, Image Maps... Image Maps Everywhere.
I have a blog...
I have a store...
I have a page...
Can we put multiple image maps on a page?

The Short answer is YES! So keep on reading to find out how it is done and why it may not be working right on your own site.

Take a look at the code below. Notice the usemap="#mylinks0" and name="mylinks0". Besides the attribute names the only difference is the pound sign. This is what we are calling the image map name. So If you are wanting to host two or more image maps on a page you need to make sure these are unique for each image map.


<img 
	id="Image-Maps-Com-mylinks1" 
	src="/images/articles/18/mylinks1.png" 
	border="0" 
	width="150" 
	height="204" 
	usemap="#mylinks0" 
	alt="" />
<map 
	name="mylinks0" 
	id="ImageMapsCom-mylinks1">
	<area  shape="rect" coords="1,54,150,98" title="Home" href="#Home" />
	<area  shape="rect" coords="1,98,150,139" title="Blog" href="#Blog" />
	<area  shape="rect" coords="0,139,150,186" title="Contact" href="#Contact" />
</map>



Here is an example of broken image maps. Both are named mylinks0. Notice the first map works fine but the second map... while it looks fine. Try moving your mouse over the links you will see all the map attributes are coming from the first map.

Image Map
Image Map
 


Now look at the next two maps one is named mylinks1 and the other named mylinks2. They both work perfectly. So when you move your mouse over the facebook text you will see the tooltip for facebook, twitter for twitter and youtube for youtube. Also notice MyLinks1 still works.

Image Map
Image Map
 


Tada!!! now we have two maps working on one page! Oh technically we have three maps working the first one works as well even thou it is the same as MyLinks1 it is called MyLinks0 :)

So now you may ask how do I do this on the most awesomeness image mapping tool on the planet? I am glad you asked. There are a few ways to achieve this.

Option 1 - Options Box
  • Right click and bring up the menu list.
  • Click Options
  • Change Map Name.
Option 2 - Menu Save
  • Right click and bring up the menu list.
  • Click Save
  • The tool looks for the default name and brings up the warning about multiple images with an input box to change it before saving.
Option 3 - Get Code Box
  • Right click and bring up the menu list.
  • Click Get Code
  • Change the Image Map Name.


Have questions?? Comments?? Put them below. I will do my best to help everyone out! Or contact me here.

Comments (0)


No Comments...


Post a Comment


*Email:
 
*Name:
 
URL:
 
*Comment: