Используйте srcset для изменения ссылок на изображения вместо самих изображений?

Question

Я хочу иметь статичное эскиз 100px (он будет размером 100px во всех размерах экрана), нажав на который будет показана большая версия (в зависимости от размера экрана) того же изображения. Поэтому миниатюра будет по существу действовать как ссылка на варианты srcset. Это возможно?

<a href="/"> 
    <img src="thumb.jpg"> 
</a> 


<img src="default.jpg" class="thumbnail" srcset="small.jpg 600w, medium.jpg 1000w large.jpg 2000w"> 

Answer 1

Вы можете добавить слушателя событий javascript, который прослушивает клик по изображению.

При нажатии на изображение вы можете добавить атрибут srcset.

Браузер сделает все остальное.

Пример:

var thumbnail = document.getElementsByClassName('thumbnail')[0]; 
 
var srcsetAttribute = document.createAttribute('srcset'); 
 
var srcsetValue = 'http://placehold.it/200x100 600w, http://placehold.it/300x100 1000w, http://placehold.it/600x100 2000w'; 
 
srcsetAttribute.value = srcsetValue; 
 

 
function addSrcset() { 
 
this.setAttributeNode(srcsetAttribute); 
 
} 
 

 
thumbnail.addEventListener('click',addSrcset,false);

<img class="thumbnail" src="http://placehold.it/100x100" alt="Thumbnail - Click Me" />