www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to get src value of image clicked on

Hybrid View

  1. #1
    Join Date
    Jun 2005
    Posts
    86

    Unhappy How to get src value of image clicked on

    I'm sure I've done this before, but I can't find where it is... I have a photo album with images whose names end with _Thumb. I then have those same images in the full size without the _Thumb. What I want to do is to have a link on the _Thumb images to call a Javascript. That function would then take the source of the image that was clicked and strip out the _Thumb to get the full size image name. How do I code the javascript to get the src of the selected image?

    I've tried using this.src in the function, but I get the value "undefined". I also tried using an onclick event instead of a normal a href, and it still doesn't work.


    Chris

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    Show some code that you have attempted.
    Perhaps it works but you have a syntax or typo error.
    Make it brief, if possible.

  3. #3
    Join Date
    Jun 2005
    Posts
    86
    I just figured out my problem. I had forgotten to use event.srcElement. Instead, I was just using this.src. So now I have:
    function changeImg() {
    var clickedImg = event.srcElement.src;
    var mainImg = document.getElementById("mainImg");
    var newImg = clickedImg.substr(0, clickedImg.indexOf(".")-6); //Take of _Thumb.jpg
    mainImg.src = newImg+".jpg";
    }

  4. #4
    Join Date
    Feb 2014
    Location
    Viet Nam
    Posts
    33
    you can use Jquery and get many values from object.
    If get value of src, you can use attribute "attr"

    See example on this:

    http://api.jquery.com/attr/

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles