MichaelEvangelista
asked on
Use JS to set class of all images inside of link tags?
All of the links in my site have a hover background color..
but I dont want that to apply to *images* inside of links
( <a href="whatever"><img src="whatever"></a> )
I want to create a javascript solution that will
check for <img> tags inside of <a> tags, and assign the class "nohover",
which I can then specify means no background color.
How can I do this?
The tricky part - most of the images will have another class already assigned, but some will have no class before the javascript gets to them.
but I dont want that to apply to *images* inside of links
( <a href="whatever"><img src="whatever"></a> )
I want to create a javascript solution that will
check for <img> tags inside of <a> tags, and assign the class "nohover",
which I can then specify means no background color.
How can I do this?
The tricky part - most of the images will have another class already assigned, but some will have no class before the javascript gets to them.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Can't you combine them.. or something like:
<body onload="first();second();s
or otherwise:
function doThis()
{
first();
second();
setClassNames();
}
<body onload="doThis();">
Mark
<body onload="first();second();s
or otherwise:
function doThis()
{
first();
second();
setClassNames();
}
<body onload="doThis();">
Mark
ASKER
well yeah... I have a lot of scripts running in a combined onload statement... but for some reason the classes are not being set. Also, part of what I need involved appending that class to the existing class if the image already has one defined.
in other words
<img class="thisclass">
must become
<img class="thisclass nohover">
(two classes, rather than replace... possible?)
in other words
<img class="thisclass">
must become
<img class="thisclass nohover">
(two classes, rather than replace... possible?)
sure you can use
img.className += " nohover";
notice the space before nohover.
Mark
img.className += " nohover";
notice the space before nohover.
Mark
Worked for me
<html>
<head>
<title></title>
<style>
a:hover {background-color:red}
a:hover img {background-color:green}
</style
</head>
<body>
<a href="#"><img src=""></a>
<a href="#">Test</a>
</body>
</html>
<html>
<head>
<title></title>
<style>
a:hover {background-color:red}
a:hover img {background-color:green}
</style
</head>
<body>
<a href="#"><img src=""></a>
<a href="#">Test</a>
</body>
</html>
ASKER
Aww... I just realized...
while the css works just fine for the images, what I am going to need is the javascript for the
LINKS!
I need to assign the class to the <a> tag, not the <img> !!!
I should have asked more clearly, and had some coffee before checking answers this morning too.
What would be the mod for that JS to make it change the <a tag class (or add a class if not exists)
And this is what I was bumping up against with css the day before, but had forgotten...
css cannot look for <a> tags that *contain* and <img> and then set the clss of the <a>
(unfortunately... upwards cascade would be nifty)
I can open new question for this if you'd rather...
what i need now is the tweak to that js so that if an A tag contains an IMG,
the class gets set on the A
thanks!
while the css works just fine for the images, what I am going to need is the javascript for the
LINKS!
I need to assign the class to the <a> tag, not the <img> !!!
I should have asked more clearly, and had some coffee before checking answers this morning too.
What would be the mod for that JS to make it change the <a tag class (or add a class if not exists)
And this is what I was bumping up against with css the day before, but had forgotten...
css cannot look for <a> tags that *contain* and <img> and then set the clss of the <a>
(unfortunately... upwards cascade would be nifty)
I can open new question for this if you'd rather...
what i need now is the tweak to that js so that if an A tag contains an IMG,
the class gets set on the A
thanks!
img.parentNode.className = "nohover";
Or in the final version it became sth like:
img.parentNode.className += " nohover";
Mark
img.parentNode.className += " nohover";
Mark
ASKER
brilliant - perfect - thanks very much!!
ASKER
I may have some conflicting js, lots of stuff happening 'onload' with my pages.
Is there another way to trigger the function besided body onload?
mplungian - tried that, but apparently that doesn't work css-wise, least not the way we would think.