question about images in HTML

[BALIstik916]

Just a quick question. If I were to put an image in HTML and I wanted to make it so that a portion of an image is a hyperlink to a certain page and another portion is a link to another page. How do you do this?

 

[QED]

Imagemaps.

Normally to display an image, you would just use the <img> tag:

<img src="foo.gif">

To create linkable "hotspots" on this image, create an imagemap using the <map> tag, and fill it with shapes (such as rectangles) using the relative pixel coordinates of the image:

<map name="foomap">
<area shape="rect" coords="1,1,100,100" href="page1.htm">
<area shape="default" href="page2.htm">
</map>

In this case, we created a single rectange from (1,1) to (100,100) that, when clicked, will take you to page1.htm. Note that we also created a "default" shape, which specifies where to send every space not already defined-- in this case, to page2.htm.

To use the map, just include it in your original <img> tag:

<img src="foo.gif" usemap="#foomap" border=0>

(By default, a hyperlinked image will have an unnatural-looiking blue-border around it-- her we get rid of it by specifying "border=0" in the <img> tag).

 

[Vogel515]

Another way of doing it is to position an invisible <div> on top of an image and make it a hyper link.

 

[Woosta]

Originally posted by: QED
Imagemaps.

Normally to display an image, you would just use the <img> tag:

<img src="foo.gif">

To create linkable "hotspots" on this image, create an imagemap using the <map> tag, and fill it with shapes (such as rectangles) using the relative pixel coordinates of the image:

<map name="foomap">
<area shape="rect" coords="1,1,100,100" href="page1.htm">
<area shape="default" href="page2.htm">
</map>

In this case, we created a single rectange from (1,1) to (100,100) that, when clicked, will take you to page1.htm. Note that we also created a "default" shape, which specifies where to send every space not already defined-- in this case, to page2.htm.

To use the map, just include it in your original <img> tag:

<img src="foo.gif" usemap="#foomap" border=0>

(By default, a hyperlinked image will have an unnatural-looiking blue-border around it-- her we get rid of it by specifying "border=0" in the <img> tag).

Although those aren't semantic elements, map and area element. And the image element doesn't have alternative text, stylistic attributes for a markup language are deprecated in favor of css (border attribute, bye bye).

Another way of doing it is to position an invisible <div> on top of an image and make it a hyper link.

Doesn't have to be a division, can be any common element, really. The basic markup you should have is a wrapper with a background image and its position set to relative, and then an absolutely positioned element inside.. eg

<div id="wrap"><a id="inner" href="#">bar</div></div>

#wrap { position:relative; width:500px; height:500px; background:url(foo.jpg) no-repeat; }
#inner { position:absolute; bottom:0; left:0; height:20px; width:20px; }

Although in MSIE6 youll have problems if theres no content inside the anchor itself, if you're going to have text or even whitespace, then it'll be fine but if no content then set a transparent 1x1 gif (that or inline-block as the display mode sometimes can fix the problem).