Web Analytics Made Easy -
StatCounter Names of Images - CodingForum

Announcement

Collapse
No announcement yet.

Names of Images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Names of Images

    Hello everyone.

    I want to be able to access the names of images which could be variably defined. That is, I won't know going in how many there will be or which ones. I have the following code:

    <html>
    <body>
    This is an image reference test
    <br>
    <img src="gifimage.gif" name=im1>
    <img src="jpgimage.jpg" name=im2>
    <script language="javascript">
    document.write(document.images["im1"])
    document.write(document.images[1])
    </script>
    </body>
    </html>

    All I'm trying to do is display the name of each image on the page, but what I get is [object][object] instead.

    Is there something I'm doing syntactically wrong here?

    I was hoping to see "gifimage.gif" and "jpgimage.jpg".

    Thanks in advance.

    Russell.

  • #2
    you could do this

    --------

    <html>
    <body>
    This is an image reference test
    <br>
    <img src="gifimage.gif" name=im1>
    <img src="jpgimage.jpg" name=im2>
    <script language="javascript">
    document.write(document.im1.src)
    document.write("<BR>")
    document.write(document.im2.src)
    </script>
    </body>
    </html>

    ---------

    Hope this helps
    CYWebmaster.com - See why we dot com!!
    ACJavascripts.com - Cut & Paste Javascripts!
    SimplyProgram.com - Personal Blog

    Comment


    • #3
      Re: Names of Images

      Originally posted by rah111
      All I'm trying to do is display the name of each image on the page, but what I get is [object][object] instead.
      That is correct behaviour of javascript, you just print out the references to some document.images objects.

      Is there something I'm doing syntactically wrong here?

      I was hoping to see "gifimage.gif" and "jpgimage.jpg".
      Not quite "wrong", you just missed something. See, document.images is a collection of objects. Each of these objects has also properties. Compare that to a car e.g.. The car is the object, and a property of it would be color, price, maximum speed etc. Ok so far? Now imagine that the car has also a name. If you want to get that name, you'd ask like

      "what is the name or the second car".

      In javascript, we could code that like

      document.images[1].name

      In your example, if you do

      document.write(document.images[1].name);

      it would print "im2". Why? Because "name" is defined by the attribute "name" in the <img> tag. You rather wanted to get it's filename, or speaking more technically, the value of it's src attribute, so you have to retrieve

      document.write(document.images[1].src);

      See how the individual attributes of a tag correspond to properties of an images object?
      Putting it all together, since document.images is an object that behaves like an array, you can print out the "filename" of each image by using this snippet:

      for (var i = 0; i < document.images.length; i++) {
      document.write(document.images[i].src + "<br />");
      }
      De gustibus non est disputandum.

      Comment


      • #4
        Here's the script:

        <img src="do.gif" name="img1">

        <script language="JavaScript">
        function showImgName(imgID) // The main function
        {
        document.write(document[imgID].src.split("/")[document[imgID].src.split("/").length-1]);
        }
        showImgName("img1"); // Call the function wherever you want
        </script>

        Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

        Comment


        • #5
          Thanks

          Thanks ACJavascript and Mordred.

          Now I get it.

          Particularly like the loop. That's just what I wanted to understand.

          Russell.

          Comment

          Working...
          X