使用 srcset 更改图像链接而不是图像本身?
Use srcset to change links to images instead of the images themselves?
我想要一个 100 像素的静态缩略图(在所有屏幕尺寸下都是 100 像素),点击它会显示同一图像的放大版本(取决于屏幕尺寸)。因此,缩略图实质上将充当 srcset
变体的 link。这可能吗?
<a href="/">
<img src="thumb.jpg">
</a>
<img src="default.jpg" class="thumbnail" srcset="small.jpg 600w, medium.jpg 1000w large.jpg 2000w">
您可以添加一个 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" />
我想要一个 100 像素的静态缩略图(在所有屏幕尺寸下都是 100 像素),点击它会显示同一图像的放大版本(取决于屏幕尺寸)。因此,缩略图实质上将充当 srcset
变体的 link。这可能吗?
<a href="/">
<img src="thumb.jpg">
</a>
<img src="default.jpg" class="thumbnail" srcset="small.jpg 600w, medium.jpg 1000w large.jpg 2000w">
您可以添加一个 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" />