Adding a style to an area tag, e.g. change the colour on hover

Is it possible to add a style to an area tag so that when I hover over each section, the colour changes or a border is displayed?
LadousseAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

DoppyNLCommented:
You can add :hover to each item in css.
simply add an extra item to it.

If I wanted to invert the color of a link when I hovered over it for instance, I can do:

a {
    color: #FFFFF;
    background-color: #000000;
}
a:hover {
    color: #000000;
    background-color: #FFFFFF;
}

You can do that with every property available for every item on your page.
0
m_e_brownCommented:
I don't think that does work,  only for the <a> tag.

To get the desired effect you will need to put an onMouseOver and onMouseOut event on the tag and then call a js function from these events to change the properties.

ie...
<html>
<head>
blah
Blah
BLAH
<style type="text/css">
#tag {
color:blue;
}
</style>
<script type="text/javascript">
function mouseOVER() {
  document.getElementById("tag").style.color = "red";
}
function mouseOUT() {
  document.getElementById("tag").style.color = "blue";
}
</script>
</head>
<body>
<span id="tag" onMouseoVER="mouseOVER();" onMouseOut="mouseOUT();">Some text</span>
</body>

0
DoppyNLCommented:
>> I don't think that does work,  only for the <a> tag.

I've done it, and according to the css specs, browsers should do that. (not only for a a-tag.)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

FendrinCommented:
It works in advanced browsers such as mozilla. However, IE does not fully support the standards. indeed, it will not apply "hover" to anyhting but links. (not even just <a>.. it has to have an href)

If you must have this effect in IE, use javascript to change styles:

<style>
   .objectNorm{background-color: red}
  . objectHover{bakcground-color: blue}
</style>
<script>
   function hover(this){
      this.className = "objectHover";
   }
   function unhover(this){
      this.className = "objectNorm";
   }
</script>

and

<div class="objectNorm" onmouseover="hover(this)" onmouseout="unhover(this)">div content</div>
0
LadousseAuthor Commented:
I apologise for not wording my question clearing (it's my first time using this site).
I want to change the style of an <area> tag in an image map. I have several highlighted areas on an image and at the moment you can't see the difference when you move the mouse from one zone to another. Ideally, I would like to change the border colour of each <area>.

Many thanks in advance,
0
FendrinCommented:
http://tech.irt.org/articles/js026/

this article gives a couple explanations (and code) of how to do this using multiple images. my previous solution might work as well, just change the style section to

<style>
   .objectNorm{border: none;}
   .objectHover{border: 2px solid #f00;}
</style>

and put the javascript calls on the area.
0
LadousseAuthor Commented:
It still doesn't work, but the real problem is that I don't think that it is even possible de change the style of an <area> tag. Even when I add the style {border: 2px solid #f00;} directly to the tag, it isn't displayed.
Thanks anyway for your help.
0
FendrinCommented:
hmm. I am not familiar with the area tag... from the name, it sounds like a div. maybe you should try replacing the area with a div.
0
tony0682Commented:
He's trying to show the distinct areas for a image map using colored borders. I don't think its possible.
0
m_e_brownCommented:
I'm pretty sure its not possible, sorry
0
Computer101Commented:
PAQed, with points refunded (50)

Computer101
E-E Admin
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.