SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Editting tags without a name or id

    I am making a javascript function that edits img tags and gives them an alt value. However these image tags won't have name attributes.

    I am using this page to test:
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function FindIMG() {
    	var out;
    	for (var im in document.images) {
    		if (typeof(document.images[im]) == 'object') {
    			if (document.images[im]['src']) {
                                  out = document.images[im]['src'] + "\n" + out;
                                  // document.images[im]['src'] = 'whatever'; will not work
                            }
    		}
    	}
    	alert(out);
    }
    </script>
    </head>
    <body>
    <img src="imgsrc">
    <a href="javascript:void(0)" onClick="FindIMG()">What is the image path?</a>
    </body>
    </html>
    Now this would output the correct img path. However, if I try to change the img src in the function like so:
    Code:
    document.images[im]['src'] = 'whatever';
    It doesn't work. I know I am missing something. I wish the Javascript documentation could be as good as that of PHP.

    Thanks in advance for your help.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work
    It works fine for me.

    Hint: saying something "doesn't work" is a big no-no when posting to programming forums. Instead state your expected results and the actual results.

  3. #3
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.images[im]['src'] = 'whatever';
    This changes the src of the image for you? It doesn't for me. Now im confused.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This changes the src of the image for you? It doesn't for me.
    Yes. Add this line to see:

    alert(document.images[im]['src']);

    Although, because there is no image named 'whatever' in the same directory as the .htm file on my computer, no image displays. If I change the src to an actual image name, then the image displays after I click on the link.

  5. #5
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by optl View Post
    Code:
    document.images[im]['src'] = 'whatever';
    It doesn't work. I know I am missing something. I wish the Javascript documentation could be as good as that of PHP.

    Thanks in advance for your help.
    Well I assumed you would understand by the code above that I am trying to change the src of the image on the page. Did I assume incorrectly? For me the code above, in junction with the entire page I posted, does not change the src of the image.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  6. #6
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I figured it out. When I view source after clicking the link, the src does not seem to have changed but I guess it actually does. Thanks for your help.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  7. #7
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you know how I can make the source reflect the actual image? When I click the link the image changes to the one I assign, but in the source it still has "imgsrc". Do you know how I can do this?
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Cologne, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Mozilla you can use one of several extensions, e.g. FireBug, which is an invaluable help.
    In IE you can use the Internet Explorer Developer Toolbar from Microsoft

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You could use the following instead which does exactly the same thing using a slightly more common notation:

    document.images[im].src = 'whatever';

    To be able to see the updated version of the page source you need a view source bookmarklet or user script. The ordinary view source option in the browser shows the source delivered to the browser and not the source as modified by the browser to display the current version of the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can view the live html of your page by reading the document.body.innerHTML property after you make any changes.

    Set the returned string as the value of a textarea, or the textNode of a <pre> element- it is usually too much for an alert to contain


Bookmarks

Posting Permissions

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