Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image Hot Spot in CSS

Posted on 2003-10-25
7
Medium Priority
?
652 Views
Last Modified: 2006-11-17
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;
 
}
0
Comment
Question by:kattz7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 6

Assisted Solution

by:DoppyNL
DoppyNL earned 140 total points
ID: 9625222
you could position (with absolute positioning) another block over the first one with a much smaller image. and put the link in there.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9625784
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.)
0
 

Author Comment

by:kattz7
ID: 9627907
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;
 
}
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 11

Accepted Solution

by:
Zontar earned 400 total points
ID: 9630407
Nope.

That's not what CSS is for. It controls the formatting and presentation of HTML structural elements; it's not some sort of magical replacement for them.

Note that I said "structural" -- the FONT tag wasn't a structural element, why is exactly why it was deprecated and replaced with CSS. Only logical elements can be made into hyperlinks.

You might want to look into SVG, where you can create an element consisting of an arbitrary shape and then turn *that* into a link.

Why don't you want to use an IMG tag, anyway?
0
 

Author Comment

by:kattz7
ID: 9630743
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

0
 
LVL 11

Expert Comment

by:Zontar
ID: 9630993
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

<!-- include virtual="/includes/myfile.inc" -->

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.
0
 

Author Comment

by:kattz7
ID: 9631189

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.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question