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.
MichaelEvangelistaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ADSLMarkCommented:
<html>
<head>
<style type="text/css">
IMG.someclass
{
    background-color: red;
}
IMG.nohover
{
    background-color: blue;
}
</style>
<script language="javascript">
function setClassNames()
{
    var numImgs = document.images.length;
    for(var i=0;i<numImgs;i++)
    {
        var img = document.images[i];
        if(img.parentNode.nodeName == "A")
            img.className = "nohover";
    }
}
</script>
</head>
<body onload="setClassNames();">
<img class="someclass" src="img.jpg" width="50" height="50" />
<br/>
<img src="img.jpg" width="50" height="50" />
<br/>
<a href="link.html"><img class="someclass" src="img.jpg" width="50" height="50" /></a>
<br/>
<a href="link.html"><img src="img.jpg" width="50" height="50" /></a>
<br/>
</body>
</html>

This looks like it works.
It loops through all the images and checks whether their parent is a link yes/no. If so it changes the classname to "nohover".

Mark
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
erm

<style>
a:hover {background-color:red}
a:hover img  {background-color:green}
</style  
0
MichaelEvangelistaAuthor Commented:
Mark - that works in your demo page, but not in mine.
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ADSLMarkCommented:
Can't you combine them.. or something like:

<body onload="first();second();setClassNames();">

or otherwise:

function doThis()
{
   first();
   second();
   setClassNames();
}
<body onload="doThis();">

Mark
0
MichaelEvangelistaAuthor Commented:
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?)
0
ADSLMarkCommented:
sure you can use

img.className += " nohover";

notice the space before nohover.
Mark
0
Michel PlungjanIT ExpertCommented:
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>
0
MichaelEvangelistaAuthor Commented:
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!
0
ADSLMarkCommented:
img.parentNode.className = "nohover";
0
ADSLMarkCommented:
Or in the final version it became sth like:

img.parentNode.className += " nohover";

Mark
0
MichaelEvangelistaAuthor Commented:
brilliant - perfect - thanks very much!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.