HTML

6 Responses to “What is the html code when placing multiple links on a single image?”

1. By ✞☠ Ron ☠✞ on Feb 14, 2010

   You must make the image an image map. These are free online image map makers:

   http://www.image-maps.com/
   http://www.maschek.hu/imagemap/imgmap
   http://www.online-image-editor.com/
   http://thurmania.com/Mapmaker2.html
   http://www.kolchose.org/simon/ajaximagemapcreator/
   http://www.image-maps.com/
   http://webdesign.about.com/gi/dynamic/offsite.htm?zi=1/XJ/Ya&sdn=webdesign&zu=http%3A%2F%2Fwww.pangloss.com%2Fseidel%2FClrHlpr%2Fimagemap.html

   Ron
   References :

2. By Mark on Feb 14, 2010

   You will need to splice the image up or use CSS and make some floating links.
   References :

3. By websco137 on Feb 14, 2010

   What you want is called IMAGE MAPPING.

   Here’s an example:
   <center><map NAME="secondmap">
   <area SHAPE="rect" ALT="text1" COORDS="278,72,546,112" HREF="http://www.bu.edu/law/" onMouseOver=" window.status= ‘Hyperlink to BU school of law ! Check it out !’;return true">
   <area SHAPE="rect" ALT="text2" COORDS="280,151,547,191" HREF="http://www.bu.edu/com/" onMouseOver=" window.status= ‘Hyperlink to BU College of Communications !’;return true">
   <area SHAPE="rect" ALT="text3" COORDS="280,231,548,269" HREF="http://www.cs.bu.edu" onMouseOver=" window.status= ‘Hyperlink to BU Computer Science Department ! Cool but Slow !’;return true">
   <area SHAPE="rect" ALT="text4" COORDS="280,306,548,350" HREF="http://www.bumc.bu.edu/" onMouseOver=" window.status= ‘Hyperlink to BU Medical School ! ‘;return true">
   <area SHAPE="rect" ALT="text5" COORDS="280,386,548,428" HREF="http://management.bu.edu/" onMouseOver=" window.status= ‘Hyperlink to School of Management !’;return true">
   <area SHAPE="rect" ALT="text6" COORDS="642,72,708,137" HREF="author.html" onMouseOver=" window.status= ‘Here you can find information about the author of these web pages )) !’;return true">
   <area SHAPE="rect" ALT="text7" COORDS="642, 184,708,244" HREF="http://www.bu.edu/" onMouseOver=" window.status= ‘Hyperlink to main page of Boston University ! Welcome to the Main Gate !’;return true">
   <area SHAPE="rect" ALT="text8" COORDS="642,296,709,356" HREF="Image.html#third" onMouseOver=" window.status= ‘Surprise !!! Click me !!! ‘;return true" onClick="alert(’OK. Enough playing. Go Back to Work ! ‘)">
   </map>
   <center>
   References :
   http://cs-people.bu.edu/dbuzan/today/third.html

4. By Annoymus on Feb 14, 2010

   I know exactly what your talking about. Its called an image map. to make one go to image-maps.com Super easy to use and make just type in the url of the image or upload one from your hard drive. Really easy to do. For more instructions watch my video at http://www.youtube.com/watch?v=fht0vcS4lcA
   References :

5. By Michael on Feb 14, 2010

   To place multiple links on a single image you need an image map. You associate the image map with the image by giving the image map a name and referring to this name with you IMG tag’s USEMAP attribute. Within your map you will need one area element (tag) for each link.

   Here is a simple example:

   <img src="tree.jpg" alt="tree" usemap="leaves" width="100" height="150">
   <map name="leaves">
   <area coords="25,0,74,49" alt="Leaf 1" href="leaf-1.html" title="Leaf 1">
   <area coords="0,50,49,99" alt="Leaf 2" href="leaf-2.html" title="Leaf 2">
   <area coords="50,50,99,99" alt="Leaf 3" href="leaf-3.html" title="Leaf 3">
   </map>

   To aid the process of creating your map, there are lots of free image mapping sites. The one that I use is http://www.image-maps.com/

   For more information, and an example, see http://www.html-tags-guide.com/html-map-tag.html
   References :

6. By Yuriy on Feb 14, 2010

   http://phpforms.net/tutorial.html – Tag MAP
   References :
   http://phpforms.net/tutorial.html