/    Sign up×
Community /Pin to ProfileBookmark

getElementsById and modifying strings…

Copy linkTweet thisAlerts:
Apr 16.2010

Hi guys,

I’m new to Jscript but trying to combien it with CSS to build a website. I need to do the following:

1) Read the img src property in the mainPicture DIV
2) Replace a string in the actual name of the image
3) Store the new result and pathname

The code I have so far is this:

function getPic(){
var currentPicture = document.getElementById(“mainPicture”).getElementsByTagName(“img”)[0].src;
alert(currentPicture);
}

This works well for part 1, but gives me the path of the image *relative* to the Document vs. the Site Root (C:/website/me/images/pic1_before.jpg instead of /images/pic1_before.jpg). I need to get the Site Root path.

For part 2, what code do I write to take the string pic1_[B][I]before[/I][/B].jpg and change it to pic1_[B][I]after[/I][/B].jpg?

For part 3, how do I then save the whole string /images/pic1_after.jpg? I will be applying it somewhere else.

Hope this makes sense and thanks in advance for helping.

milton

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ShortsApr 16.2010 — Close.

[CODE]function getPic() {
document.getElementById("mainPicture").src;
window.alert(currentPicture);
}[/CODE]
If the img tag has id="mainPicture"

To change:
[CODE]function changePic() {
document.getElementById("mainPicture").src = '/images/pic1_after.jpg';
}[/CODE]
Copy linkTweet thisAlerts:
@MiltonAdamouauthorApr 16.2010 — Hi there,

[CODE]function getPic() {
document.getElementById("mainPicture").src;
window.alert(currentPicture);
}[/CODE]
If the img tag has id="mainPicture"

That doesn't work for me. When I do a mouseDown on my image that calls the getPic function, the alert box gives me the info I need with my code, but not with the one above.

To change:
[CODE]function changePic() {
document.getElementById("mainPicture").src = '/images/pic1_after.jpg';
}[/CODE][/QUOTE]

I need to run some code to actually find/change the name of the jpg, dynamically, not statically like above, because the mainPicture DIV may be holding an image called pic1_after.jpg or pic3_after.jpg...anywhere up to 60! That's why I need to do this dynamically, hence my post.

Any more help you could provide though would be helpful.

cheers,


milton
Copy linkTweet thisAlerts:
@MiltonAdamouauthorApr 17.2010 — Hi guys,

I finally managed to figure this out. Here is the code I used:

function swapBefore(){

var currentPic, changePic;

currentPic = document.getElementById("mainPicture").getElementsByTagName("img")[0].src;

changePic = currentPic.replace ("after", "before");

document.images.mainPicture.src = changePic;

}

Thanks for all your help guys,

cheers,


milton
×

Success!

Help @MiltonAdamou 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...