Solved

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

Posted on 2003-10-24
12
869 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

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

730 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