Change colour of a href text

JavaScript
1

I have an images map and a list. When the user rolls over the image, a javascript makes the relevant text in the list bold and red, and reverts back onmouseout.

The trouble is that I have now made the text <a href> links and the colour change has stopped working (the bold still works fine).

Any idea how I can sort this. the javascript targets divs wrapped around the text.

cheers
monkey

2

Here’s one way to do it easily using classes:


<html>
<head>
<script type="text/javascript">
function hl(divId) {
	var div = document.getElementById(divId);
	div.className = "highlight";
}
function unhl(divId) {
	var div = document.getElementById(divId);
	div.className = "";
}
</script>
<style type="text/css">
.highlight, .highlight a {
	color: red;
	font-weight: bold;
}
</style>
</head>
<body>
<div id="thinger">
	Some Text
	<a href="a">a link</a>
	Some More Text
</div>
<button onclick="hl('thinger');">Highlight</button>
<button onclick="unhl('thinger');">Unhighlight</button>
</body>
</html>
3

i thought it might be a css class thing - thank a lot for your help

monkey

4

Why not just use CSS to change the text color/attributes?

:link
:active
:hover
:visited

5

I have done that on the links, but this stops the javascript which is run by the image map from making its changes. I don’t really understand what you are suggesting, if any different from what i have done :stuck_out_tongue:

monkey

6

Applying a style to a link (<A> tag) has no bearing whatsoever on JavaScript. My comment is that you don’t need JS just to change a style. Look at the menu bar of my website - none of those buttons use JS, the colour change and button effect are pure CSS.

If CSS styles are affecting your JS code, then it indicates that the JS code is not right.

7

but, if you read my initial post, I have an image map which changes the link text! How can you do this with css? You need a javascript to say which link is effected by which part of the image. When i do this the a href stops the javascript text changes from working:


function showLink(nptCode){
	document.getElementById(nptCode).style.color='red'
	document.getElementById(nptCode).style.fontWeight='bold'
}

My image map has onmouseover=“showLink(‘dn14’)”. This works fine, but when i make the text in the div an <a href> (which has a css class attached), the javascript doesn’t effect the text anymore.

monkey

8

Would need to see more complete code (including any CSS styles and an example of the image map) to be able to help further. Is this online so you can link us to it?

9

image map link:


onmouseover="showLink('test')" onmouseout="hideLink('test')"

Link:


<div id="test"><a href="apage.asp?id=test" class="npts">test link</a></div>

Javascript:


function showLink(nptCode){
	document.getElementById(nptCode).className='npthighlight'
}
function hideLink(nptCode){
	document.getElementById(nptCode).className='npts'
}
</script>

Styles:


a.npts:link    { text-decoration:none; }
a.npts:visited { text-decoration:none; }
a.npts:hover   { color:#FF0000; font-weight:bold; text-decoration:underline }

.npthighlight a {
	color: red;
	font-weight: bold;
}

This works great!