Home › Forums › JavaScript › [Solved] Changing the text in an atrtibute
- This topic is empty.
-
AuthorPosts
-
July 27, 2010 at 1:15 pm #29761noahgelmanParticipant
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?
July 27, 2010 at 4:55 pm #80498jamygoldenMemberTry this:
Code:$("img").click(function(){
$(this).attr("src", "yadayada-apple.png")
});July 27, 2010 at 5:06 pm #80499noahgelmanParticipantYeah, 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.
July 28, 2010 at 4:47 am #80527jamygoldenMemberCode:$("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")July 28, 2010 at 12:16 pm #80585noahgelmanParticipantYeah, 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.
July 28, 2010 at 1:02 pm #80587jamygoldenMemberYeah, 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.jpgThe 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.
July 28, 2010 at 1:09 pm #80589noahgelmanParticipantYeah, 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.
July 28, 2010 at 1:16 pm #80590noahgelmanParticipantI’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"
July 28, 2010 at 1:39 pm #80598jamygoldenMemberSubstring works like this:
substring(3) of "jamy_za" would be "y_za"
So I’m pretty sure the above example would work.July 28, 2010 at 1:47 pm #80600noahgelmanParticipantRight, 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.
July 28, 2010 at 2:46 pm #80603noahgelmanParticipantFinally 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.
July 28, 2010 at 2:57 pm #80604jamygoldenMemberLol, sorry, it seems I am more tired than I thought.
HTMLCode:<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
July 28, 2010 at 3:00 pm #80605jamygoldenMemberAwesome, your way is really efficient. I’ll make a note of it. I’m sure everyone needs this answer at one time or another.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.