Dynamically Change the href path of image using jquery

Question

I am not sure is possible or not but someone know suggest me if possible.

For example:

<a href="image/image.jpg"><img src="image/image.jpg" alt="image"/></a>

in this how to change the href path to another image dynamically using jquery. i.e.,

<a href="image/img.jpg"><img src="image/image.jpg" alt="image"/></a> like this.

EDITED: If

<a href="#"><img src="image/image.jpg"/></a>
<a href="http://stackoverflow.com"><img src="image/image.jpg"/></a>
<a href="image/image.jpg"><img src="image/image.jpg"/></a>

How can i vary this href attr that condition should satisfy only when the anchor tag of href link contain image. then the anchor text is should img tag.

Here is the JSFIDDLE: http://jsfiddle.net/HMsSE/9/ Any suggestion would be much appreciated.

Thanks, vicky

do you want to change it by click or simply on load?

vladkras
– vladkras

2013-07-04 06:20:22 +00:00
Commented Jul 4, 2013 at 6:20 — vladkras
– vladkras, Commented Jul 4, 2013 at 6:20
By click the image it should be change the path

Vignesh Pichamani
– Vignesh Pichamani

2013-07-04 06:21:55 +00:00
Commented Jul 4, 2013 at 6:21 — Vignesh Pichamani
– Vignesh Pichamani, Commented Jul 4, 2013 at 6:21

Darin Dimitrov · Accepted Answer · 2013-07-04 06:18:23Z

3

You could try using the .attr() function to set the href to the new value:

$('a[href="image/image.jpg"]').attr('href', 'image/img.jpg');

Of course it probably would be easier if you give the anchor an unique id:

<a href="image/image.jpg" id="myLink"><img src="image/image.jpg" alt="image"/></a>

So that you could more easily select it:

$('#myLink').attr('href', 'image/img.jpg');

answered Jul 4, 2013 at 6:18

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

6 Comments

Vignesh Pichamani Over a year ago

Thanks for your response. That changing the href path only if the <img> tag present how can i do this

Darin Dimitrov Over a year ago

The same way: $('img[src="image/image.jpg"]').attr('src', 'image/img.jpg');.

Vignesh Pichamani Over a year ago

Thanks. I need to explain detail. checking the condition if the anchor text contain <img> tag then only it should perform.? is it possible

Darin Dimitrov Over a year ago

Yes, you could give your img an unique id as shown in my answer and then make an id selector: $('#myImage').

Darin Dimitrov Over a year ago

What do you mean by dynamically? What if you have multiple <img> elements? You want to replace all their src properties? If so then you could simply use $('img').attr(...). But once again this will replace ALL the images.

|

Praveen · Accepted Answer · 2013-07-04 06:41:21Z

2

Also you can try using .prop()

$('a').prop('href', 'image/img.jpg')

From your comments, you're trying to change the href of a tag when it has a child element img. If so,

if($('a').find('img').length) {  // it return the no. of img tag within a
   $('a').prop('href', 'image/img.jpg');
}

edited Jul 4, 2013 at 6:41

answered Jul 4, 2013 at 6:20

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

8 Comments

Praveen Over a year ago

@vicky you can use .find() like this if( $('a').find('img').length )

Vignesh Pichamani Over a year ago

Thanks for your Response. sorry for asking multi question. That above code is for anchor tag with child as img also is possible to check anchor tag with href as image src then child as img tag

Praveen Over a year ago

@vicky If I understood your question properly then possible. You want to check the if( href of a is img src && $('a').find('img').length). Correct me if I was wrong.

Praveen Over a year ago

@vicky ok I understood your question. we can have a condition like this if($('a').attr('href').indexOf('.jpg') > 0)

Praveen Over a year ago

@vicky you can use this var ext = $('a').attr('href').split('.').pop(); console.log(ext); to get the ext of the href.

|

sdespont · Accepted Answer · 2013-07-04 06:18:40Z

2

Just use attr function

$('a').attr('href','image/img.jpg');

You can change it also by id which would be more useful

<a id="myLink" href="image/image.jpg"><img src="image/image.jpg" alt="image"/></a>

$('#myLink').attr('href','image/img.jpg');

answered Jul 4, 2013 at 6:18

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

1 Comment

Vignesh Pichamani Over a year ago

Thanks for your response, How can i check if the anchor text contain image tag

vladkras · Accepted Answer · 2013-07-05 00:47:03Z

2

as topicstarter aksed, change performs on image click

$('img').click(function() {
    $(this).parent('a').attr("href","image/img.jpg");
});

if you want to check href too, you have to use a condition

$('a').click(function() {
    event.preventDefault();
    if ($(this).attr('href').search('jpg')!=-1)
        $(this).attr("href","image/img.jpg");
});

also, I have to mention that <img> inside <a> is not always responsive for click

oh yeah, fiddle UPD I don't know how could I forget about filter

$('a').click(function() {
    event.preventDefault();
    $(this).filter('[href*=jpg],[href*=png],[href*=gif]').attr("href","image/img.jpg");
});

new shorter demo

edited Jul 5, 2013 at 0:47

answered Jul 4, 2013 at 6:51

vladkras

17.2k4 gold badges50 silver badges55 bronze badges

7 Comments

vladkras Over a year ago

@vicky no problem, here we are, but my code also must be a little bit updated

Vignesh Pichamani Over a year ago

Thanks How to check if the png or jpg or gif accordingly

vladkras Over a year ago

@vicky just use search('jpg|png|gif') instead

Vignesh Pichamani Over a year ago

Thanks for your response, but in your fiddle itself third image path is to anchor tag href image/image.jpg and is not coming image/img.jpg

vladkras Over a year ago

@vicky maybe I don't understand you, are you sure it doesn't change?

|

Ali · Accepted Answer · 2013-07-04 06:45:58Z

0

You can also do this in native Javascript without including jQuery

element.setAttribute(attributename,attributevalue)

Hope this will help you.

answered Jul 4, 2013 at 6:45

Ali

7826 silver badges18 bronze badges

2 Comments

Praveen Over a year ago

I think it should be like document.getElementsByTagName("tagName").setAttribute("attributename","attributevalue")

Ali Over a year ago

I wrote a general syntax. You specify getElementByTagName. Developer might use more ways to get element like Id or so.

Collectives™ on Stack Overflow

Dynamically Change the href path of image using jquery

5 Answers 5

6 Comments

8 Comments

1 Comment

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

8 Comments

1 Comment

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related