Solved

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

Posted on 2003-10-24
12
878 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
Independent Software Vendors: 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

Independent Software Vendors: 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 writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

688 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