Alternate means to get image src using JavaScript

Question

So I know that it is easy enough to swap images of named img tags

<img name="image1" src="" />
<script>document["image1"].src="candybar.jpg";</script>

The problem is that I am being forced to use content server, and I can't name the image tag.

So If I name a Div tag that wraps the image can I use that to specify the image tag in question?

Something like..

<div id="namedDiv"><img src="" /></div>
<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.$imgtag$.src="candybar.jpg";
</script>

So because I know the parent, and it only has 1 image tage within, i want to say "hey Div, give me your only child as an object"

Based on djko's answer, here's my final solution [code] <script type="text/javascript"> //source div. var imgDiv=document.getElementById('hidImgDiv'); //target img. var eventBg=document.getElementById('eventDate'); eventBg.style.background='url('+imgDiv.childNodes[1].src+') no-repeat scroll 55% 90%'; </script> [/code] — Eddie
– Eddie, Commented Aug 31, 2009 at 15:32

annakata · Accepted Answer · 2009-08-31 14:58:43Z

4

Yes that follows, something like:

document.getElementById('namedDiv').getElementsByTagName('img')[0].src = 'mynewpath.jpg';

answered Aug 31, 2009 at 14:58

annakata

76k18 gold badges116 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eldar Djafarov · Accepted Answer · 2009-08-31 14:58:25Z

2

Every dom node have childNodes property which is an array of nodes. You can pick first one.

<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.childNodes[0].src="candybar.jpg";
</script>

answered Aug 31, 2009 at 14:58

Eldar Djafarov

25k2 gold badges36 silver badges27 bronze badges

4 Comments

Eddie Over a year ago

Weird, even though my html looks like; <div id="hidImgDiv" style="clear: both; display: none;"> <img src="TechForum.jpg" alt="NA" border="0"> </div> I had to use an index of 1. I wonder if the non-breaking space counts as a node? or if the index just starts at 1.

Eldar Djafarov Over a year ago

in this case maybe it is better to use getElementsByTagName('img')[0] just to be sure

Ian Clelland Over a year ago

See NickFitz's answer, any text at all between the div and the img tags will count as a node

annakata Over a year ago

I concur - just asking for the first node isn't reliable at all.

NickFitz · Accepted Answer · 2009-08-31 15:19:44Z

Depending on the markup and the browser, the <img> element may not be the only child. For example, if there is any whitespace such as a line break then many browsers other than IE will create a text node.

The easiest way is to use the getElementsByTagName method of the wrapper element, which returns a NodeList, and get the first element in that NodeList:

var div = document.getElementById("namedDiv");
var image = div.getElementsByTagName("img")[0];
image.src = "candybar.jpg";

You can shorten that if you don't mind making it slightly harder to follow:

document.getElementById("namedDiv").getElementsByTagName("img")[0].src = "candybar.jpg";

but that makes it a bit harder to debug when you make a mistake ;-)

Ratón vaquero · Accepted Answer · 2009-08-31 20:12:49Z

0

why dont use css style and sprite for get the same resutl without javascript. ????

the idea: http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249

I can explain it :)

answered Aug 31, 2009 at 20:12

Ratón vaquero

Collectives™ on Stack Overflow

Alternate means to get image src using JavaScript

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related