Data Picture
Vous cherchez la BOEW v3.1?
À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.
Intention
Conversion de Picturefill guidé par l'événement.
Caractéristiques
Largeur de navigateur
Cet exemple utilise min-width afin de déterminer l'image à afficher. Redimensionner la fenêtre de navigateur pour voir les différentes images qui chargent.
Photo par Noema Pérez, autorisé sous licence Creative Commons.
Visualiser le code
<figure>
<span data-pic="data-pic" data-alt="Colline du Parlement" data-class="img-responsive">
<!-- Image par défault : l'élément <div [data-src]> sans attribut data-media est affiché quand :
1. Aucun des autres requêtes médias <div [data-src]> correspond.
2. Le navigateur ne supporte pas les requêtes médias CSS -->
<span data-src="img/parliament-hill-large.jpg"></span>
<!-- Images pour les navigateurs qui supportent les requêtes médias CSS -->
<span data-src="img/parliament-hill-small.jpg" data-media="(min-width: 0px)"></span>
<span data-src="img/parliament-hill-medium.jpg" data-media="(min-width: 500px)"></span>
<span data-src="img/parliament-hill-large.jpg" data-media="(min-width: 960px)"></span>
<span data-src="img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"></span>
<!-- Contenu alternatif pour les navigateurs non-JS -->
<noscript><img src="img/parliament-hill-large.jpg" alt="Parliament Hill"/></noscript>
</span>
<figcaption>
<p>Photo par <a href="http://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, autorisé sous licence <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr_CA">Creative Commons</a>.</p>
</figcaption>Haute densité de pixels
Cet exemple utilise deux requêtes médias pour servir des images à haute résolution à des appareils qui en bénéficieront (p.ex. écrans Retina).
Photo par snowpeak, autorisé sous licence Creative Commons.
Visualiser le code
<figure>
<span data-pic="data-pic" data-alt="False Kiva dans les Canyonlands" data-class="img-responsive">
<!-- Images pour différentes résolutions de l'appareil -->
<span data-src="img/cave-low-res.jpg"></span>
<span data-src="img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"></span>
<!-- Contenu alternatif pour les navigateurs non-JS -->
<noscript><img src="img/cave-low-res.jpg" alt="False Kiva dans les Canyonlands"/></noscript>
</span>
<figcaption>
<p>Photo par <a href="http://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, autorisé sous licence <a href="http://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
</figcaption>
</figure>- Date de modification :