How do I embed a link into an image?

Question

I know how to create a general link (using a href, etc), but I am trying to find out how to use html to embed a link into an image. I have a large image that I would like to embed links into in five different locations on the image. i.e. one spot on the image says "click here" for a movie... another has "click here" for more info... how can I link only these certain spots on the image?

Answer 1

<a href="http://link.com"> <img src="image.jpg" border="0"></a>

The reason I added border="0" is because when you link an image it automatically wraps a blue border around it so that removed it.

However that wasn't your question, I just did it to give an example to those who are just looking to link the image.

What you are going to be doing is mapping, this can be done in both HTML and JavaScript.

An Example.

<img src ="planets.gif"

width ="145" height ="126"

alt="Planets"

usemap ="#planetmap" />

<map id ="planetmap"

name="planetmap">

<area shape ="rect" coords ="0,0,82,126"

  href ="sun.htm" target ="_blank"

  alt="Sun" />

<area shape ="circle" coords ="90,58,3"

  href ="mercur.htm" target ="_blank"

  alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

  href ="venus.htm" target ="_blank"

  alt="Venus" />

</map>

as you can look at the coords define the location, href="the link" you want it to travel, and there all enclosed in a map which is givin a name that has to be called in the image, this is so it can be overlayed in away. well best of luck to you.

Answer 2

You need to make an image map. Google "image map maker" and you should be able to make one online if you are not proficient at html. Good luck.

Answer 3

You have to code an image map. You can do it manually or using a editing program like dreamweaver. Look for image map.

Pretty much you have to identify your image as a map, then find the coordinates of the area you want hotlinked, and use

<area shape="rect" coords="" href=""> with coords being coords of the top left and the the coords of the bottom right. the shape can be "poly", "rect", and more.

For more info:http://www.w3schools.com/TAGS/tag_map.as...

Answer 4

This is called "image mapping." You can Google the term for available tutorials on how to do this (it is helpful if you have Adobe ImageReady as well). Here is an example tutorial: http://www.javascriptkit.com/howto/image...