Solved

Use JS to set class of all images inside of link tags?

Posted on 2007-03-30
11
241 Views
Last Modified: 2008-02-01
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.
0
Comment
Question by:MichaelEvangelista
[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
  • 5
  • 4
  • 2
11 Comments
 
LVL 10

Accepted Solution

by:
ADSLMark earned 250 total points
ID: 18822116
<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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 18822246
erm

<style>
a:hover {background-color:red}
a:hover img  {background-color:green}
</style  
0
 

Author Comment

by:MichaelEvangelista
ID: 18823228
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 10

Expert Comment

by:ADSLMark
ID: 18823252
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
 

Author Comment

by:MichaelEvangelista
ID: 18823320
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
 
LVL 10

Expert Comment

by:ADSLMark
ID: 18823368
sure you can use

img.className += " nohover";

notice the space before nohover.
Mark
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18823793
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
 

Author Comment

by:MichaelEvangelista
ID: 18824468
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
 
LVL 10

Expert Comment

by:ADSLMark
ID: 18824511
img.parentNode.className = "nohover";
0
 
LVL 10

Expert Comment

by:ADSLMark
ID: 18824517
Or in the final version it became sth like:

img.parentNode.className += " nohover";

Mark
0
 

Author Comment

by:MichaelEvangelista
ID: 18824632
brilliant - perfect - thanks very much!!
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

Title # Comments Views Activity
Jquery Ajax - on change event not being picked up 9 60
Geolocation works...sometimes 2 36
Diff of the day 2 41
Jquery syntax 12 29
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

737 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