18034 sujets

Questions générales et questions de débutants

HTML - Responsive

Bonjour,

Par rapport à ces lignes, jugez-vous utile de répéter 6 fois ceci : alt="entreprise" ? Sinon, le reste vous semble-t-il cohérent ?


<figure>
    <span data-picture="" data-alt="entreprise">
    <span data-src="img/entrepriseSmall.png" class="entreprise" alt="entreprise"></span>
    <span data-src="img/entrepriseMed.png" class="entreprise_med" alt="entreprise" data-media="(min-width: 400px)"></span>
   <span data-src="img/entrepriseLarge.png" class="entreprise_large" alt="entreprise" data-media="(min-width: 760px)"></span>
   <span data-src="img/entrepriseExtraLarge.png" class="entreprise_extra_large" alt="entreprise" data-media="(min-width: 1200px)"><img alt="entreprise" src="img/entrepriseExtraLarge.png"></span>
   </span>
</figure>


Merci ! Smiley smile
Bonjour,

Afin d'éviter la soupe de span, et étant donné que leur utilisation est clairement orientée javascript de par leur attributs data, je les aurais créé directement en javascript.

J'aurais aussi mis le data-picture="" data-alt="entreprise" directement sur l'élément figure afin de supprimer un span inutile...

Pour la balise alt, étant donné qu'elle n'a rien à faire sur un élément span... autant alors continuer la logique javascript jusqu'au bout et mettre un "data-span".

Au fond, le code html aurait pu ressembler à ceci :
<figure data-picture="" data-alt="entreprise">
    <img alt="entreprise" src="img/entrepriseExtraLarge.png">
    <figcaption>Éventuellement une description...</figcaption>
</figure>

Tout le reste devrait être des éléments créés par javascript et géré par javascript.
Merveilleux Olivier... et merci pour cette réponse... MAIS COMMENT LES CRÉER DIRECTEMENT EN JAVASCRIPT ?
Me concernant, je n'en ai pas la moindre idée !
En javascript, il faut cibler l'élément recherché via une class (document.getElementsByClassName) ou un id (document.getElementById) et utiliser document.createElement.

Mais perso - et malgé la mode Vanilla JS - j'utilise jQuery Smiley cligne . Avec donc : .append() ou .prepend(), .wrapInner() etc...

Quoi qu'il en soit, la logique serait un peu différente : au lieu de créer des spans et les transformer après coup en balises images (c'est bien ça l'idée non ?) il faudrait appeler directement la balise img dans la résolution voulue.

Dans un premier jet, d'abord une fonction du genre :
$('figure img').each(function(){}

Le .each() permet de ne pas tester une seule image sur la page mais toutes les images inclues dans un élément figure. On peut aussi changer la bible pour le faire sur une classe définie.

Puis quelque part dans la fonction, une ligne de ce style :
$(this).append('<img src="' + $(this).attr('src') + '" id="ceQueLOnVeux" alt="' + $(this).attr('title') + '"/>');

Il s'agirait donc ici de non seulement ajouter l'élément désiré après l'image native, mais aussi de récupérer ses attributs (attribut title, mais surtout src) en ajoutant ce qu'il leur faut pour correspondre à la nouvelle image.

Voilà pour un premier jet. Il faudrait ensuite modifier l'attribut src afin qu'il soit bien dans la bonne résolution en fonction de la résolution d'image demandée en ajoutant avant .png (Large, ExtraLarge, Small, Med...). Je nettoierais le .png ou .jpg par une regex (mais il y a peut-être une meilleure solution...) puis ajouterais la nouvelle extension (ex : ExtraLarge.png).
Modifié par Olivier C (27 May 2015 - 08:02)
Sujet clos
Aller à