I would like to know the precise code for creating "hot-spot"
hyperlinks on specific parts of a .jpg image, specifically a banner
situation with "hot-spot" links on specific coordinates of the banner
corresponding to meaningful text, for site navigation purposes.

The following link is to a sample page I just created which contains
an instance of the banner image I am working with. 

http://hometown.aol.com/rchesler/myhomepage/index.html

All I want is the
code that does the following:

When the mouse is placed over the text part of the image which reads,
"Donate," "Contacts," What's New" and "Site Map," I would like the
text to change color to indicate it has the focus, and to include an
alt tag (if possible, although this isn't absolutely necessary) that
says the name of it, and of course for it to be an active hyperlink,
so that when clicked it goes to another page of the site (for now,
just make the hyperlinks go to any site you want, just as long as they
are funcitonal).

A working sample of what I am after is at the following link, from
Amgen, Inc.'s main page: http://www.amgen.com/

You can see their "buttons" (upper right of page--right upper corner
of banner image) which are not really buttons (as with VB Script) but
just coordinates.

The code involved will be something like this:

 <td align="right" valign="top"><img
src="/imgs/nav_images/top_navHome.gif" width="466" height="59"
border="0" usemap="#TopNav">
<map name="TopNav"> 
  <area shape="rect" coords="245,14,365,31" href="/directory.html">
	<area shape="rect" coords="245,36,365,54" href="/contactInfo.html">

But rather than separate out what I need from all their existing code,
I am paying for someone to create the "hot-spots" specifically for
just my banner image, so that I may more fully understand how it works
and incorporate it to my site.

Note, I'm only intersted in working code specifically for what I've
asked, not in links to tutorials or references. I will take the code
posted in the Answer, paste it into Notepad, refresh my page and if it
doesn't work I'll reject the answer. In other words, if you KNOW
exactly how to do it from having done it many times before, then
please answer with code, otherwise, hold off.

Thanks!

---

Request for Question Clarification by willie-ga on 14 Oct 2002 08:32 PDT

Hi there

The example you give doesn't change colour to indicate focus. Do you
need  your's to change? (It's a bit more involved a process)

---

Clarification of Question by omniscientbeing-ga on 14 Oct 2002 08:34 PDT

willie-ga,

Yes, I noticed that myself just after I posted the Question. Never
mind the color change. (It would be nice, if you can add that too, but
it's not necessary). Just working hyperlinks for the indicated parts
of the image would be great.

Thank you.

Hi there

Here you go

<IMG SRC="linksbanner5.jpg" USEMAP="#linksbanner" ALT="Menu" BORDER=0>


<MAP NAME="linksbanner">
<area shape="rect" coords="127,35,192,51" href="/donate.html"> 
<area shape="rect" coords="204,35,259,51" href="/contactus.html">  
<area shape="rect" coords="143,54,212,69" href="/whatsnew.html"> 
<area shape="rect" coords="229,54,287,69" href="/sitemap.html">  
</MAP>

You can't use an ALT name in this case, as the ALT applies to the
whole jpg picture. It could be done with some fancy javascript, but
this works just fine as it is.

It's pretty self explanatory, but any questions, let me know

Willie

Thank you very much! Very quickly answered, too. If you could take a
minute to explain briefly in a Comment how you identify which
coordinates to use (i.e. are they based off the upper left corner of
the image, in pixels,  or what), I would appreciate it, although I
know I didn't ask for this in the Question.
Thanks again!

Glad you liked it

The coordinates are the offset from the top left of the jpg picture

eg, the first one 127,35,192,51  means 

- the top left of the "hyperlinked" rectangle is 127 pixels in from
the top, and 35 pixels down
- the bottom right of the rectangle is 192 in, and 51 down

The rectangle itself for the first one therefore is 65 pixels wide and
16 deep.

I loaded your jpg into PaintshopPro to work out where the rectangles
went. Most graphics programs have the facility to show you the pixel
counts  while you're working on the image.

Willie

Thank you very much, willie-ga!