Get image src using JavaScript

The very simple method in javascript to swap images of named imag tags

For example,

<img name=”image1″ src=”image.jpg” />
<script>document[“image1″].src=”image1.jpg”;</script>

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=”image.jpg” /></div>

The answer is possible, 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=”image1.jpg”;
</script>

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:

<script>
var div = document.getElementById(“namedDiv”);
var image = div.getElementsByTagName(“img”)[0];
image.src = “image1.jpg”;
</script>

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

<script>
document.getElementById(‘namedDiv’).getElementsByTagName(‘img’)[0].src = ‘image1.jpg’;
</script>

but that makes it a bit harder to debug when you make a mistake 😉

I hope this will be useful to you. Please post your comments here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: