Solved

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

Posted on 2007-03-30
11
237 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

708 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

23 Experts available now in Live!

Get 1:1 Help Now