asked on

Image Hot Spot in CSS

How do I put a "hot spot" on a graphic in a CSS? ( Only a small portion of the graphic will be the link, not the entire graphic) I do NOT want the image src to be included in the HTML body. All info has to be put into the CSS, with the exception of the

<a class="imgmap">
<AREA SHAPE='rect' COORDS='182,94,277,128' HREF='http://www.moggies-and-more.com/index1.html' ALT='Enter'>
</a>

tag that is in the HTML body.

( I know this HTML setup is wrong, just clarifying my question)

CSS example:

a.imgmap{

background: transparent url(anienter2.gif);
margin-top:-150px;
width: 416;
height: 273px;
position:absolute;
right:0px;
repeat:no-repeat;

}

SOLUTION

DoppyNL

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zontar

That's the only way you're going to be able to do it -- a MAP has to be assigned to an IMG element. You can't use an image map with a background image any more than you can use one with a background colour -- there's no element there for it to be assigned to.

(In theory a MAP can also be assigned to an OBJECT element, but I know of no browser which supports this yet.)

kattz7

ASKER

Thank you very much for your responses. However, I was wondering if this
could this not be obtainable?

HTML:

<a class="imgmap">
</a>

CSS:

a.imgmap{

background: transparent url(anienter2.gif);
AREA SHAPE:rect;
COORDS:182,94,277,128;
HREF:http://www.moggies-and-more.com/index1.html (ALT=Enter);
margin-top:-150px;
width: 416;
height: 273px;
position:absolute;
right:0px;
repeat:no-repeat;

}

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kattz7

ASKER

Thank you so much for your input.

Shucks.....oh well, guess I will have to forget this idea.
My CSS class doesn't start until next week and I really wanted to have a CSS page ready
according to my preferences.

The reason I don't want to use an IMG tag:

My website is approximately 50 pages. If there is ever a time that I would like to change the IMG, that I wanted to put the "hot spot", I only wanted to change the one CSS page and not the entire site.

Have a fabulous day/evening. Again, many thanks.

Kim

Zontar

Use a serverside include in your pages and put the IMG tag in that. Then, should you wish to change the image, you need change only the include file.

There are several different ways to do includes, depending on what webserveryour site uses and what programming environments are installed on it. Here's an example:

Source of /includes/myfile.inc:

<img src="/images/myimg.jpg" width="415" height="125" border="0" usemap="#mymap">

<map name="mymap">
<area shape="rect" coords="182,94,277,128" href="index1.html" alt="Enter" title="Enter">
</map>

Then in your HTML pages use



That's *not* a literal example, as the specifics will deifinitely vary according to the server being used, your directory structure, etc., but that's the basic idea. SSI's are a very handy and powerful tool, and it'd be well worth the time spent learning how to use them.

kattz7

ASKER

Thank you so very much. If there was a "Triple A" to be given, I would give it to you for your generous time in helping me and the informative answers.

I wondered what SSI meant and how it fit into web design.
I will register for that class for next term. I can hardly wait to learn it.