CODEWITHSUNDEEP
javascript
user3011784
user3011784

Reputation: 839

Change value of element inside img tag in JS

I have a HTML fragment like this to display a product image:

<img src="/some/path" border="0" id="bigImg"  data-zoom-image="/some/path">

The code data-zoom-image is a path to a larger image so on mouse over, it can zoom in on the image.

I also have a JavaScript function that when I click somewhere else it change that picture... like this:

function showLarge(path)
{
 var full_path = 'upload/product_image/large_'+path;
  document.getElementById("bigImg").src = full_path;
  document.getElementById("bigImg").data-zoom-image = full_path;
}

I want to also change the data-zoom-image value when the SRC of the image changes... I tried by adding the line document.getElementById("bigImg").data-zoom-image = full_path; But it doesn't work... how should I do this...

Thank you

Upvotes: 0

Views: 154

Answers (1)

naota
naota

Reputation: 4718

You can use setAttribute to changes the value of an existing attribute on the specified element.

document.getElementById("bigImg").setAttribute('data-zoom-image',full_path);

The document is here:

https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute

Upvotes: 1

Related Questions