Search code examples
javascriptjqueryhtmlcssimagemap

Using an IMG Map to display larger images

I am using an IMG Map that has many small pictures. When I hover over each image it will display a larger image. How do I do this? I do not mind using javascript, css, etc as long as it works. Please provide an example.

HTML OF IMG MAP

<img src="img.jpg" alt="Main Photo - Please View With Images On"
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
 <area class="1" shape="rect" coords="4,3,225,150" />
 <area class="2" shape="rect" coords="2,152,221,303" />
 <area class="3" shape="rect" coords="3,303,221,452"  />
</map>

Each class would have a different image to display larger.

Solution

  • I think you want something like the below given fiddle. Code written is very rough & can be optimized. Just check you want this or something else.

    Demo: http://jsfiddle.net/3GF6s/3/