Links on certain part of a picture

liunx

Guest
Ok, i have a picture that looks like a menu. on it i have titles of tutorials i have made.<br />
<br />
I would like to have it where people can click on them and it goes to that tutorial. So the question is, how do I place multible links on a certain part of the picture?<br />
<br />
EDIT: The attachment is an example of what im doing<!--content-->on Microsoft Frontpage there is a 'HOTSPOT' facility, this means that you can make a selection over an image and this selection means that when the viewer moves their mouse over that part of the image its the same as a link. <br />
<br />
you can choose what shape hotspot you want and then you drag it over the area of the image you want, then you are prompted to insert the web-address for the link.<br />
<br />
once this is done and saved when you hover your mouse over that part of the image then click you will go to that page therefore it is the same as a link.<br />
<br />
Joe<!--content-->oh yea, if you do not have frontpage then im sorry i do not know how to do it otherwise, but hopefully you do and hopefully you understood my instructions<br />
<br />
i have uploded another example if i did not explain clearly enough in my first post.<br />
<br />
Joe<!--content-->thanks man! thats exactly what i wanted to do. other places just said it couldnt be done unless i used flash :rolleyes: <br />
<br />
im using frontpage, and your info is very helpful. I wont forget this! your the best!<!--content-->only to glad to help m8, its what im here for!<br />
<br />
joe<!--content-->conventionally, you'll use the map tag. here is an example from my website.<br />
<br />
<map name="m_menu"><br />
<area shape="rect" coords="468,4,615,32" href=http://www.htmlforums.com/archive/index.php/"http://24.238.145.39/flash/version7/contact.php" alt="" ><br />
<area shape="rect" coords="319,2,439,29" href=http://www.htmlforums.com/archive/index.php/"http://24.238.145.39/flash/version7/about.php" alt="" ><br />
<area shape="rect" coords="155,4,273,29" href=http://www.htmlforums.com/archive/index.php/"http://24.238.145.39/flash/version7/media.php" alt="" ><br />
<area shape="rect" coords="27,2,128,27" href=http://www.htmlforums.com/archive/index.php/"http://24.238.145.39/flash/version7/index.php" alt="" ><br />
</map><!--content-->conventionally, you'll use the map tag<br />
<br />
yes he could have used those, but if hes using frontpage its alot easier to use the hotspots, and also its much easier than finding out the co-ords which looks very difficult.<br />
<br />
its alot easier to use the hotspots m8<br />
<br />
Joe<!--content-->true. technically frontpage uses the map tag, as do all image editors, they just make them for you.<br />
<br />
a little background info never hurts<!--content-->true. technically frontpage uses the map tag, as do all image editors, they just make them for you.<br />
<br />
a little background info never hurts<br />
yeah, frontpage does do that for you, it gives the same cade as you would if you did it yourself, althought doing it yourself would probably take ages and p**s you off with the trial and error lol.<br />
<br />
as you say it never hurts to have background info.<!--content-->Originally posted by joe2kiss <br />
yeah, althought doing it yourself would probably take ages and p**s you off with the trial and error lol.<br />
<br />
<br />
<br />
ImageMap<br />
<br />
Using irfanview<br />
<br />
Open your image in Irfanview Freeware: <!-- m --><a class="postlink" href="http://www.irfanview.com">http://www.irfanview.com</a><!-- m --><br />
<br />
Draw a rectangle with the mouse on the image<br />
Then: Text, select Font and Color etc<br />
Now there is text on the image.<br />
Create more text to be used as link.<br />
Save.<br />
Now see where the links are: using irfanview.<br />
Put the cursor left top of the link, click.<br />
At the top of the irfanview interface you see the XY<br />
Write down this coordinate: 8,43<br />
Put the cursor down right of the link, click.<br />
At the top you see the XY<br />
Write down this coordinate: 54,60<br />
This part is the link: 8,43,54,60<br />
Do this for all the links.<br />
Create the html code for the ImMap<br />
Attention: first the coordinates, then the image<br />
Thats all.<br />
<br />
Of course you have to give a name to your immap <br />
and in the img tag you add usemap.<br />
<MAP name=windowmap><br />
<AREA shape=RECT coords=13,27,57,42 href=http://www.htmlforums.com/archive/index.php/"index.html"><br />
<AREA shape=RECT coords=66,27,110,42 href=http://www.htmlforums.com/archive/index.php/"begin.html"><br />
<AREA shape=RECT coords=120,27,165,42 href=http://www.htmlforums.com/archive/index.php/"opzet.html"><br />
<AREA shape=RECT coords=170,27,235,42 href=http://www.htmlforums.com/archive/index.php/"uitwerking.html"><br />
<AREA shape=RECT coords=240,27,290,42 href=http://www.htmlforums.com/archive/index.php/"menu.html"><br />
<AREA shape=RECT coords=300,27,345,42 href=http://www.htmlforums.com/archive/index.php/"tekst.html"><br />
<AREA shape=RECT coords=350,27,400,42 href=http://www.htmlforums.com/archive/index.php/"kop.html"><br />
<AREA shape=RECT coords=405,27,460,42 href=http://www.htmlforums.com/archive/index.php/"plaatjes.html"><br />
<AREA shape=RECT coords=465,27,510,42 href=http://www.htmlforums.com/archive/index.php/"upload.html"><br />
<AREA shape=RECT coords=520,27,570,42 href=http://www.htmlforums.com/archive/index.php/"linken.html"><br />
</MAP><br />
<IMG SRC=http://www.htmlforums.com/archive/index.php/"zweef3.jpg" WIDTH=600 HEIGHT=65 USEMAP="#windowmap" BORDER=0><br />
<br />
:cool:<!--content-->
 
Back
Top