Changing alt tags and image path with jQuery

Question

I have a bit of an issue here. As Im new to jQuery this will probable will sound simple for you.

I need to add path to alt and change the alt so it will have extension .jpg and screen within jquery

So how can I transfer this

<img src="small.jpg" class="image"  alt="big01">

into this:

<img src="/image/small.jpg" class="image"  alt="/image/big01.jpg">

I forgot to add: I need to fish out image name and then add path to that image as this will change as there is many on the site. Not sure if I made myself clear Any ideas please?

Many Thanks for your help in advance

Nice question I needed it for ajax loading of page. thanks.. stackoverflow.com/questions/12085559/… — Dilip Rajkumar
– Dilip Rajkumar, Commented Aug 23, 2012 at 7:35

Anthony Potts · Accepted Answer · 2009-10-07 14:33:10Z

6

My first question would be, why aren't those paths in the img tag already?

If you need all img tags to be updated to include that information. First, you need to loop through all the img elements. This is simply: $("img").each( functions here)

From here, you can do as some others have pointed out and get the attributes using the attr method and then alter them.

$("img").each( function(){
  $(this).attr({
     src: '/image/' + $(this).attr('src'),
     alt: '/image/' + $(this).attr('alt') + '.jpg'
  });
});

edited Oct 7, 2009 at 14:33

answered Oct 7, 2009 at 12:39

Anthony Potts

9,1908 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Haigh Over a year ago

are you missing brackets around 'this' ?

Kieron · Accepted Answer · 2009-10-07 12:36:07Z

2

The attr method is the way to go:

$(".image").attr({
    src : "New image source",
    alt : "Alternative image text"
});

answered Oct 7, 2009 at 12:36

Kieron

27.2k16 gold badges81 silver badges124 bronze badges

2 Comments

peirix Over a year ago

+1 for handling both attributes in one go! Just recently discovered that myself. Pretty neat stuff (:

Kieron Over a year ago

Good stuff isn't it. I've only recently discovered it myself.

Makram Saleh · Accepted Answer · 2009-10-07 12:29:16Z

0

$("img").attr("src", "/image/small.jpg").attr("alt", "/image/big01.jpg");

The above will work on all images, but to get direct access to your specific image give it an id and address it like this:

<img id="myimg" src="...

$("#myimg").attr("src", "/image/small.jpg").attr("alt", "/image/big01.jpg");

answered Oct 7, 2009 at 12:29

Makram Saleh

8,6814 gold badges30 silver badges44 bronze badges

2 Comments

Dom Over a year ago

This is grat guys, but i forgot to add that I need to fish out image name as this will change as there is many on the site. Any ideas please?

Makram Saleh Over a year ago

use the thing I described in this answer: adding a unique ID to each image tag.

dpq · Accepted Answer · 2009-10-07 12:29:38Z

0

$("img[src='small.jpg']").attr("src", "image/small.jpg")

answered Oct 7, 2009 at 12:29

dpq

9,34812 gold badges54 silver badges71 bronze badges

Comments

spmason · Accepted Answer · 2009-10-07 12:33:56Z

0

You need the attr method:

$('img.image').attr('alt', '/image/big01.jpg').attr('src','/image/small.jpg');

Edit: see the docs for more information

edited Oct 7, 2009 at 12:33

answered Oct 7, 2009 at 12:28

spmason

4,0882 gold badges27 silver badges19 bronze badges

Comments

dano · Accepted Answer · 2009-10-07 13:51:04Z

0

I know you won't want to hear this, but you're not using the alt tag correctly. Alt is there to explain to less accessible web users (ie Someone with a screen reader) what your image is actually showing.

If you are using it to store an image you're toggling between, can i suggest you just make your own custom attribute. Something like altImage would work perfectly.

answered Oct 7, 2009 at 13:51

dano

5,6105 gold badges29 silver badges27 bronze badges

Collectives™ on Stack Overflow

Changing alt tags and image path with jQuery

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related