View Full Version : Change an image "src" / "url" / "alt" separately!

09-22-2011, 07:50 PM
I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt".
Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from:
[CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want
prefs = new gadgets.Prefs(), // Pulls from the user's preferences
yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences
title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc.
Thank you so much! I seriously could use as much help as possible!

Old Pedant
09-22-2011, 07:58 PM
No code, no help.

Not quite true, but what you are asking for help with really means we need to see the HTML you are trying to manipulate.

Just for starters, a <span> element doesn't even *HAVE* a src or href or url property. (Come to think of it, I can't think of any element that *does* have a url property.)

So... Show *AT LEAST* the HTML you are trying to manipulate.

09-22-2011, 08:04 PM
I had it originally in the post and for some reason took it out, my apologies... You are right about the "url" attribute but we added one for manipulations in jQuery so I still need it to be manipulated.

Yes, the <SPAN> does not have those attributes, that would just make life confusing even more. Here is the javascript:
var title01Span = document.getElementById('title01Span'), //Finds the id that I want
prefs = new gadgets.Prefs(), // Pulls from the user's preferences
yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences
title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc.

And here is the HTML:

<a href="http://randomlyopen.com/i/gallery/img/04.jpg"><img id="image01" src="" alt="Title One1 Area" url="http://google.com" /></a>
<div class="block">
<h2><span id='title01Span'></span></h2>
<p><a href="http://www.google.com" target="_parent" style="color:white;">Moving Us forward one step at a time... Description Area</a>.</p>

Old Pedant
09-22-2011, 08:09 PM
Okay, so what in the HTML do you want to change *to* what?

You don't have any src= for the image.

Do you mean you need to do

document.getElementById("image01").src = "...some image url...";


Or do you mean, for example, that you want to change the href= of the <a> tag that *follows* the <span id="title01Span">?

Or what?

09-22-2011, 08:22 PM
I need to change the href & img src to the same "thing"... That "thing" being a dynamically loaded image URL brought in by the users' preferences.

Yes, that is in essence what i want to do but the src = "...some image url..." is loaded dynamically underneath of the var.

As well, I need to then change the URL attribute to another separate link that the user dynamically loads into it through their preferences.

Again, thanks for your help!

Old Pedant
09-22-2011, 08:33 PM
You have two <a> and two href's there.

I hope you mean the second of the two? The one that follows the <span id="title01Span">???

09-22-2011, 08:35 PM
Sadly no... I need to change the first line, the following code:

<a href="changethis"><img id="image01" src="changethis" alt="changethis" url="changethis05" /></a>

Old Pedant
09-22-2011, 08:36 PM
Scratch that. Clearly you mean the other one, as it's the only one with an <img>.

Okay, can I refer to the <img> by id? That is, can I use


Or do I have to try to find the <a> and <img> by looking "in front" of the <span id="title01Span">?

(Fair warning: looking "in front" can be unreliable, esp. if the layout of the page ever has even minor changes.)

09-22-2011, 08:41 PM
Yes, I actually had put the <im> id to find it for this specific need but kept failing and turned to the forum.

09-22-2011, 08:43 PM
What I had started with was this:
var title05Span = document.getElementById('title05Span'),
prefs = new gadgets.Prefs(),
yourtitle05 = prefs.getString("title05");
title05Span.innerHTML = yourtitle05;

Which worked for my title replacement in the html below:

<h2><span id='title01Span'></span></h2>

But obviously that doesn't work for replacing these new things.

09-22-2011, 08:44 PM
Sorry, the html code above is wrong, here is the right one:

<h2><span id='title05Span'></span></h2>

Old Pedant
09-22-2011, 08:46 PM
Not sure I understand. You are saying that I can *NOT* depend on having an id= for the <img>???

That I must "look backwards"?

If so, can I depend on the pattern you showed?

That is, can I depend on finding:

<span id="..."></span>

(The other tags...<h2> and <p> are unimportant.)

If I can depend on that sequence, then I *can* rely on finding the <img> you want to affect.

Old Pedant
09-22-2011, 08:47 PM
The actual id for the <span> is unimportant, so long as you know what it is.

09-22-2011, 08:51 PM
I wrote that wrong I just realized... You CAN use the <img> ID... Please feel free to use that ID.

As well, yes, that structure doesn't change!

Old Pedant
09-22-2011, 09:19 PM
Then it's trivial.

var image = document.getElementById("image01"); // or whatever the id is
image.src = ...whatever you want...
image.alt = ... ditto...
image.url = ...ditto even if url is non-standard ...
var link = image;
while ( link.tagName == null || link.tagName.toLowerCase() != "a" )
link = link.parentNode;
if ( link == null ) { alert("<a> tag not found! oops!"); return; }
link.href = ...whatever is needed ...

Normally, the <a> will be the parentNode of the <img>, but MSIE especially is prone to putting extra text nodes in the way, hence the loop to make sure we get to the surrounding <a> tag.

Old Pedant
09-22-2011, 09:27 PM
If the <img> didn't have an ID you could do it thus:

// step 1: find the <span> with the magic id
var span = document.getElementById("title05Span");
// step 2: find the <div> that surrounds both the <span> and the following <a>
var div = span;
while ( div.tagName == null || div.tagName.toLowerCase() != "div" )
div = div.parentNode;
if ( div == null ) { alert("oops! no surrounding div?"); return; }
// step 3: find the <a> that is in the same <div> as the targeted <span>
var link2 = div.getElementsByTagName("a")[0];

// step 4: loop through all <a> elements remembering last one, searching for link2:
var links = document.getElementsByTagName("a");
var link1 = links[0];
for ( var i = 1; i < links.length; ++i )
if ( links[i] == link2 ) break; // found it! so link1 is correct
link1 = links[i]; // keep looking...remember new liink1
// now you can modify href of link1:
link1.href = "...whatever...";

// and then get and modify the <img> inside that <a>:
var image = link1.getElementsByTagName("img")[0];
image.src = "...";
image.alt = "...";
image.url = "...";

Utterly *UN*tested, but it should be close if not spot on.

09-22-2011, 09:30 PM
Truly, thank you! That is exactly what I was looking for and works so much cleaner.

09-22-2011, 09:31 PM
Awesome! Thanks for sending the second one too. I think this is proving to me that I need to take a course on JavaScript to further my knowledge. It really is an impressive language.

09-22-2011, 09:41 PM
One last question, is there a way to make it so that the child "href" can be the same as the URL attribute easily?

<a href=""><img id="image01" src="" alt="" url="" /></a>
<div class="block">
<h2><span id='title01Span'></span></h2>
<p><a href="... same as attribute URL above ..." target="_parent" style="color:white;"><span id='desc01Span'></span></a>.</p>

Old Pedant
09-22-2011, 09:58 PM
Well, you have to "find" the <a> that follows either the <span> or <img>.

That is, you have to start from an ID and then work up or down the "tree" of objects, looking for the positionally correct one.

If you used the code from my post #16 (and assuming it works! it is untested, remember), then you would indeed have link2 which is the second <a> there as well as image, so you'd just do link2.href = image.url;

If the code from post 16 doesn't work, then tell me and I'll play some more.