?
Solved

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

Posted on 2003-10-24
12
Medium Priority
?
885 Views
Last Modified: 2012-05-04
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?
0
Comment
Question by:Ladousse
[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
  • 2
  • 2
  • +3
12 Comments
 
LVL 6

Expert Comment

by:DoppyNL
ID: 9612586
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
 
LVL 1

Expert Comment

by:m_e_brown
ID: 9613845
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
 
LVL 6

Expert Comment

by:DoppyNL
ID: 9613927
>> 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:Fendrin
ID: 9614145
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
 

Author Comment

by:Ladousse
ID: 9614189
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
 
LVL 4

Expert Comment

by:Fendrin
ID: 9615996
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
 

Author Comment

by:Ladousse
ID: 9648322
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
 
LVL 4

Expert Comment

by:Fendrin
ID: 9650798
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
 

Expert Comment

by:tony0682
ID: 9712895
He's trying to show the distinct areas for a image map using colored borders. I don't think its possible.
0
 
LVL 1

Expert Comment

by:m_e_brown
ID: 9713769
I'm pretty sure its not possible, sorry
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 10490980
PAQed, with points refunded (50)

Computer101
E-E Admin
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

765 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