Solved

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

Posted on 2003-10-24
12
852 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
  • 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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 …

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now