/    Sign up×
Community /Pin to ProfileBookmark

How to change inline img src with javascript/dom

Copy linkTweet thisAlerts:
Nov 18.2007

Hey Guys,

I have a inline image inside a html page that I need to change. I cannot modify the html markup so I need to somehow change it with javascript. Im assuming this will require messing with the dom. Can someone show me how this is done?

Example:

<div id=”footer”>
<img src=”/seal.gif” width=”100″ height=”100″ alt=”” />
</div>

So basically, I need to change the img src value /seal.gif to something else.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@samliewNov 18.2007 — &lt;img src="/seal.gif" [B][COLOR="Red"]id="theImg"[/COLOR][/B] width="100" height="100" alt="" /&gt;

[B][COLOR="red"]&lt;script type="text/javascript"&gt;&lt;!--
document.getElementById('theImg').src="/newImg.gif";
//--&gt;&lt;/script&gt;[/COLOR][/B]
Copy linkTweet thisAlerts:
@A1ien51Nov 18.2007 — quick way to do it

<i>
</i>document.getElementById("footer").getElementsByTagName("img")[0].src = "aaaaa.gif";


Eric
Copy linkTweet thisAlerts:
@laboboyauthorNov 18.2007 — Hey thanks for the quick responses.

samliew, I cannot modify the html markup so thats not possible. If i could i would just change the img src directly.

A1ien51, I tried your code but firebug is telling me i have a error.

"document.getElementById("footer") has no properties"

Anyway, I have written the updated code I have below. I get a error saying document.getElementByClass is not a function. What am i doing wrong here?

<script type="text/javascript"><!--

document.getElementByClass("footerlink").getElementsByTagName("img")[0].src = "/images/newimage.gif";

//-->

</script>

<a class="footerlink" href="#">

<img src="/images/seal.gif" width="100" height="100" alt="" />

</a>
Copy linkTweet thisAlerts:
@A1ien51Nov 18.2007 — Because there is no method named getElementByClass

With that first code you posted with the div, my code will work if the div id is actually footer. Are you calling the code onload or at come other point?

Eric
Copy linkTweet thisAlerts:
@laboboyauthorNov 18.2007 — Sorry, I should of been more clear in my initial post. I thought I would modify the code you wrote to just target the class=footerlink since i figured if i used id-footer it would affect the other images inside that div that i did not want. I did not know getElementbyclass is not a method. I just assumed it was. The image im trying to change repeats inside the footer div but will always be inside a anchor with a class of 'footerlink'. Im not sure what you mean by onload. I am a total newbie. Also, im just using this code inside a inline script tag if that helps you determine what im doing wrong.

<div id="footer">

<a class="footerlink" href="#">

<img src="/images/seal.gif" width="100" height="100" alt="" />

</a>

<a class="footerlink" href="#">

<img src="/images/seal.gif" width="100" height="100" alt="" />

</a>

<a class="footerlink" href="#">

<img src="/images/seal.gif" width="100" height="100" alt="" />

</a>

<a class="logo">

<img src="/images/logo.gif" width="120" height="130" alt="" />

</a>

<a class="footerlink" href="#">

<img src="/images/seal.gif" width="100" height="100" alt="" />

</a>

</div>
Copy linkTweet thisAlerts:
@samliewNov 18.2007 — Are you are trying to create a userscript for greasemonkey or IE7Pro?
Copy linkTweet thisAlerts:
@Declan1991Nov 18.2007 — Use:

Javascript:
[code=php]
var imgs = document.getElementById("footer").getElementsByTagName("img");
for (var i = 0, l = imgs.length; i < l; i++) {
imgs[i].src =""; //img[i].src is the reference to the image.
}
[/code]
That must be called after the page has loaded the footer part of the DOM.
Copy linkTweet thisAlerts:
@mahipsoniMay 10.2012 — i am replace the image by using this code

document.getElementById("footer").getElementsByTagName("img")[0].src = "aaaaa.gif";...

but i need to change <a href></a> also.....

plz help me....
Copy linkTweet thisAlerts:
@mahipsoniMay 10.2012 — Is there any javascript code i could use to change the inline link..
Copy linkTweet thisAlerts:
@skater8705Jun 27.2012 — Thanks mahipsoni, your code helped.

Now my question would be, what if the image repeats multiple times throughout page? how do i go about that? This code only allows it to work once. This is what i have.

[CODE]document.getElementById("InsertHere").getElementsByTagName("img")[1].src = "image.jpg";[/CODE]
×

Success!

Help @laboboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...