0

I need to be able to make this as a link and have the subsequent linked page show the correct image file based on screen size. The html was working to choose the correct image before i added the a href. Is there a way to accomplish what I'm seeking? 

<picture class="imagesVerticalGallery">
<!--small img -->
<a href="http://sofialeiby.com/update/img/abc/1abcinstall_1200.jpg">
<source srcset="http://sofialeiby.com/update/img/abc/1abcinstall_1200.jpg"   media="(min-width: 768px)"></a>

<!--large img -->
<a href="http://sofialeiby.com/update/img/abc/1abcinstall.jpg">
<source srcset="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"></a>


<!--default large img --> 
<a href="http://sofialeiby.com/update/img/abc/1abcinstall.jpg">
<img srcset="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"></a> 
</picture>

my attempt is here, top image

user3697526
  • 37
  • 10

1 Answers1

1

So the image is presented through the img srcset so in theory, and this will not work, you would need to add an anchor tag around the img specifically and call the sources via a srcset:

<picture>
<source srcset="1380.jpg"media="(min-width: 1380px)">
<source srcset="990.jpg"media="(min-width: 990px)">
<source srcset="640.jpg"media="(min-width: 640px)">
<a srcset="320.jpg"">
<img srcset="320.jpg">
</a> 
</picture>

But this above will not work as HTML alone.

You could do something like this:

<a href="newpage.html">
<picture>
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=1380%C3%97150&w=1380&h=150" media="(min-width: 1380px)">
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150" media="(min-width: 990px)">
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=650%C3%97150&w=650&h=150" media="(min-width: 640px)">
<img srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</picture>
</a>

Then on the new page:

<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height;">
<style>
</style>
<title></title>
</head>
<body>

<picture>
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=1380%C3%97150&w=1380&h=150" media="(min-width: 1380px)">
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150" media="(min-width: 990px)">
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=650%C3%97150&w=650&h=150" media="(min-width: 640px)">
<img srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</picture>

</body>
</html>
Timber Hjellum
  • 330
  • 2
  • 7