Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Changing the text in an atrtibute

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #29761
    noahgelman
    Participant

    I have an image and I want to change it’s src: during a click function. Here’s an example:

    <img src:yadayadaorange.png>

    Now, on click:

    <img src:yadayadaapple.png>

    Any ideas?

    #80498
    jamygolden
    Member

    Try this:

    Code:
    $("img").click(function(){
    $(this).attr("src", "yadayada-apple.png")
    });
    #80499
    noahgelman
    Participant

    Yeah, normally that would work, but in this situation, the image is dynamic so I don’t always know the file name. At the end though they all will have one of three endings appened to them (like yadayadaapple, yadayadaorange and yadayadagrape for example) and I want to be able to switch the endings depending on what the user clicks.

    In the end, the goal is that the user can switch between several versions of an image by clicking.

    Sorry for the confusion.

    #80527
    jamygolden
    Member
    Code:
    $("img").click(function(){
    $("body").text($(this).attr("src").substring(5));
    });

    Check that out.

    If you got the amount of characters the src has before the apple.jpg then you could do something like:
    $(this).attr("src", $url + "pear.png")

    #80585
    noahgelman
    Participant

    Yeah, but the file names aren’t the same length. What do you think of having an if else statement, like

    Code:
    if(‘img.attr("src", "*-apple.png")
    {
    remove ending and append new one
    }
    else if(‘img.attr("src", "*-orange.png")
    {
    remove ending and append new one
    }
    else(‘img.attr("src", "*-orange.png")
    {
    remove ending and append new one
    }

    Theres only three different endings so that would work. But I dont know how to cut off the ends and append new ones because the file names will have different lengths.

    #80587
    jamygolden
    Member

    Yeah, that could work

    Let’s say the destination is: http://noah.gelman/images/

    And we have:
    http://noah.gelman/images/apple.jpg
    http://noah.gelman/images/pear.jpg
    http://noah.gelman/images/grapefruit.jpg

    The HTML

    Code:
    <img class="noah" src="http://noah.gelman/images/apple.jpg" alt="" />

    jQuery

    Code:
    $(document).ready(function(){

    $("img.noah").click(function(){
    var $url = $(this).attr("src").substring(26);
    if($url == "apple.jpg"){
    $(this).attr("src", $url + "pear.jpg");
    }
    else if($url == "pear.jpg"){
    $(this).attr("src", $url + "grapefruit.jpg");
    }
    else{
    $(this).attr("src", $url + "apple.jpg");
    }
    });

    });

    I haven’t tested this at all, so there may be a couple of mistakes, but, I think it should work.

    #80589
    noahgelman
    Participant

    Yeah, but then again, that uses a substring, meaning I know the length of the file name. Since the images are dynamic, it’s not always the same. That’s where the problem is. The unknown file length. I only know whats appended to the end by default.

    #80590
    noahgelman
    Participant

    I’ll give an example as well. Say I have 2 images

    Code:
    <img class="noah" src="http://noah.gelman/images/noahsvacationtimeapple.jpg" alt="" />

    <img class="noah" src="http://noah.gelman/images/noahhappyapple.jpg" alt="" />

    You’re idea won’t work because the file names of the image are different so the .substring() cant cut properly.

    And as a side question? Doesn’t a .substring() grab everything after the number? Then in your if else statement, you were appending things to look like "apple.jpgpear.jpg"

    #80598
    jamygolden
    Member

    Substring works like this:
    substring(3) of "jamy_za" would be "y_za"
    So I’m pretty sure the above example would work.

    #80600
    noahgelman
    Participant

    Right, that cuts off the beginning and leaves me with the end. The file name lengths change so it wont apply to some of them properly. That’s why I want to keep the beginning and cut off the end and append a new ending.

    #80603
    noahgelman
    Participant

    Finally got it with some help from my friend. It took us a while to break it down. We needed the ‘replace’ function which is a javascript function, not a jquery one.

    Code:
    $(document).ready(function(){

    var = $source = $(‘img’).attr(‘src’),
    $newSource = $source.replace(‘-apple.jpg’, ‘-pear.jpg’);

    $("img.noah").click(function(){
    $(‘img’).attr(‘src’, $newSource);
    });
    });

    Thanks for all your help. It’s really appreciated.

    #80604
    jamygolden
    Member

    Lol, sorry, it seems I am more tired than I thought.
    HTML

    Code:
    <img src="test1.png" alt="" />

    javascript

    Code:
    $("img").click(function(){
    if($(this).attr("src").substring(4) == "1.png"){
    $(this).attr("src", $(this).attr("src").substr(0, 4) + "2.png");
    }
    else if($(this).attr("src").substring(4) == "2.png"){
    $(this).attr("src", $(this).attr("src").substr(0, 4) + "3.png");
    }
    else{
    $(this).attr("src", $(this).attr("src").substr(0, 4) + "1.png");
    }
    });

    Tried and tested this time :lol:

    #80605
    jamygolden
    Member

    Awesome, your way is really efficient. I’ll make a note of it. I’m sure everyone needs this answer at one time or another.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.