CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
The831st
The831st

Reputation: 43

Change img src on click in list

I'm trying to make an image which changes based on clicking on images in a list.

The only trouble is, the images in the list have their url embedded in a style as a background-image.

How would I call the url of the img src to the new image?

<ul id="swatchList_att1"><li class="Name AttributeSwatch In_stock colourSwatch" id="attributeSwatch_1" data-attname="att1" data-attvalue="Deep Blue (001)" data-atrsku="0012345" style="background-image: url(https://color.adobe.com/api/v2/themes/2022184.png);">

EDIT

Wow, great response time.

and

Wow, I phrased this incredibly poorly yesterday. Apologies.

The list "swatchList_att1" is a group of color swatches which are shrunk to 50% of the jpeg size.

All I'm trying to do is create a sort of "Preview" image which sits in a different div and will show a selected color swatch at an inflated size (110%). On page load, it would be the first color in the list. When a click occurs on a color in the group of color swatches, the "Preview" image would change to what color was clicked.

I can't make changes to how these list items work (i.e. change it to "data-background") because the functionality behind the scenes would break. Annoyingly, I can't do much about that. These list objects need to have their image defined in "style", for whatever reason (I don't know). I can, however, add an onclick function to the list (if I had something that could apply it to all items in the list, which all have very long and different names).

Thus I need to extrapolate the url from the "style" onclick and have "Preview" img src change to that url.

In response to BearSkyView:

Since it's a seperate image, this isn't exactly what I meant. Also, I'd need something which applied an onclick to everything in the list.

In response to somethinghere:

That is more closely along the lines of what I'd like to accomplish, but as I can't change the way these list objects are made, this sadly won't work for me.

Upvotes: 1

Views: 848

Answers (2)

BearSkyview
BearSkyview

Reputation: 385

http://api.jquery.com/css/

$('#attributeSwatch_1').css("background-image", new src here);

EDIT: Are you looking for something like this? http://jsfiddle.net/rsqtL805/

Upvotes: 1

somethinghere
somethinghere

Reputation: 17330

Since you are using data-attributes anyway, why don't you put it into one? Say data-background="URL". 

<img src="" id="myImageElement" alt="large image" />
<img src="path/to/image.jpg" data-background="path/to/image.jpg" onclick="setImg(this); return false;" alt="thumbnail" />

function setImg(obj){
    var img = obj.getAttribute('data-background');
    document.getElementById("myImageElement").attribute("src", img);
}

Otherwise you can read the background image property and split it in javascript to retrieve the URL and do with it as you like:

var img = this.style.backgroundImage;
    img = img.split("rl(")[1].split(")")[0];

The above will take the following string:

url(path/to/image.jpg);

And split it first into:

[0] => u
[1] => path/to/image.jpg)

And then we split the element at place 1 at the ) and select the remainder at index 0.

[0] => path/to/image.jpg
[1] =>

With that you could do

document.getElementById("myImageElement").attribute("src", img);

to set the src of the image element to the just retrieved source.

Upvotes: 0

Related Questions