Solved

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

Posted on 2007-03-30
11
238 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

895 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

11 Experts available now in Live!

Get 1:1 Help Now