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” />

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.

var imgDiv=document.getElementById[‘namedDiv’];

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 = “image1.jpg”;

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

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

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


Leave a Reply

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

You are commenting using your 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: