HTML / Image question
 

I have an image (1024X768) and I want to use it as a hyperlink. Now, I don't want the whole image used as a hyperlink, just a certian peice. I know there is a way to "draw" a hyperlink around a certian part of an image, making the rest of it NOT linked. Anyone know how to do this?

Yep

You need to make the pic into an imagemap. Just do a web search for free image map programs...there should be lots of 'em.


Zone

Gee tnx. hake:

You can straight up do it in HTML.

First you need to use the tag <MAP> and name it.

[code:bc76e] <MAP NAME="joe"> [/code:bc76e]

Next you need to figure out which shape, coordinates you want maped, and linked using the <AREA> tag. There are 3 variables you'll need in the <AREA> tag: SHAPE, COORDS, HREF.

[code:bc76e]<AREA SHAPE="" COORDS="," HREF="">[/code:bc76e]

The SHAPE tag also has 3 variables: RECT, CIRCLE, POLYGON. Using SHAPE=RECT will give you a rectangle, SHAPE=CIRCLE will give you a cirlce using a specified radius and location and the SHAPE=POLYGON will yield a multisided user-defined shape.

[code:bc76e]<AREA SHAPE="CIRCLE" COORDS=",," HREF="">[/code:bc76e]

The COORDS tag dictates where the chosen SHAPE will be drawn on the image in a standard X,Y fashion. Use photoshop or some other photo editing program to figure out which coordinates you will use. The RECT variable requires you place the Top Left Corner and Bottom Right hand corner coordinates in that order in the <AREA COORDS=> tag. The CIRCLE variable require you to place a center point and radius in that order in the <AREA COORDS=> tag. The POLYGON again requires you to put in the Top Left and Bottom right coordinates, but in this case you can put in multiple points in between.

[code:bc76e]
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="">
[/code:bc76e]

Finally, the HREF variable allows you to link the map to a certain area. use this just as you would use it in the Anchor <A> tag. You can use direct and indirect links.

[code:bc76e]
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="http://www.teamaftermath.com">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="http://www.alliedassault.com">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="#Forums">
[/code:bc76e]

Now that you've made an image map, you need to make it work with an image. The HTML you've created will do nothing unless you make it work with something else. To do this for an image, use the <IMG> tag as normal, and place the USEMAP="" variable inside the tag. A # should be placed in front of the map name.

[code:bc76e] [img]http://www.teamaftermath.com/images/insultpics/stfu.jpg[/img][/code:bc76e]

Now to put it all together....

[code:bc76e]
<MAP NAME="joe">
<AREA SHAPE="RECT" COORDS="50,50,30,30" HREF="http://www.teamaftermath.com">
<AREA SHAPE="CIRCLE" COORDS="100,100,15" HREF="http://www.alliedassault.com">
<AREA SHAPE="POLYGON" COORDS="125,110,100,100,39,48,125,10" HREF="#Forums">
</MAP>

[img]http://www.teamaftermath.com/images/insultpics/stfu.jpg[/img]
[/code:bc76e]

There ya go, that should do it. Note that I made up all of those coordinates, they probably aren't logical and won't work.

Ya, that would work, but an imagemapping app will automate all that for you and spit out the html.


Zone

I guess either way will work. Bleu, appriciate it. I really wanted to know the tags! Zoner the proggie looks cool, I'll look into it sometime today. Thx guys!

it is easier if you just crop out a part of the image in paint and then use that as the hyperlink.......

I use Imagemapic, its free and you can download it from here: http://www.snowblind.net/download.asp?q=imagemapic

Bleu, your method worked perfectly, thank you! Those proggies are pretty buggy, they don't export the code properly. biggrin: