?
Solved

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

Posted on 2007-03-30
11
Medium Priority
?
243 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 1000 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 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Industry Leaders: 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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…
Suggested Courses

777 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