Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Change an image "src" / "url" / "alt" separately!

    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.
    [CODE]
    Thank you so much! I seriously could use as much help as possible!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Completely True

    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:
    Code:
    <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>
                </div>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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
    Code:
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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">???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sadly no... I need to change the first line, the following code:
    Code:
    <a href="changethis"><img id="image01" src="changethis" alt="changethis" url="changethis05" /></a>

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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
    Code:
        document.getElementById("imag01")
    ???

    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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yes, I actually had put the <im> id to find it for this specific need but kept failing and turned to the forum.

  • #10
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <h2><span id='title01Span'></span></h2>
    But obviously that doesn't work for replacing these new things.

  • #11
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, the html code above is wrong, here is the right one:
    Code:
    <h2><span id='title05Span'></span></h2>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    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:
    Code:
        <a><img></a>
        <div>
           <span id="..."></span>
           <a>...</a>
        </div>
    (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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SimpleNE (09-22-2011)

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    The actual id for the <span> is unimportant, so long as you know what it is.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Sep 2011
    Location
    washington, dc
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,538
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Then it's trivial.

    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SimpleNE (09-22-2011)


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •