8771 sujets

Développement web côté serveur, CMS

Divi Wordpress : faire apparaître balises Alt au survol dynamiquement

Bonjour à tous !

Je souhaite faire apparaître dynamiquement le crédit des images de mon site (Wordpress + Divi) par l'ajout d'une classe "credit" à mes images, par exemple, et d'un bout de code, dans les functions.php, qui dirait :
"Au survol de l'image, fais apparaître un fin bandeau en bas de cette image, présentant le contenu de sa balise Alt"
Cela me permettrait d'éviter toute opération supplémentaire à celle qui consiste déjà à renseigner les balises Alt et Cie de mes images.
Mon bandeau ne serait pas un overlay global, je voudrais le rendre ultra minimaliste et discret. Mais ça, ça ira, en css. Il me manque simplement le code "activateur".

Sauf erreur de ma part, je ne trouve pas de solution ou de problème semblable posé dans les forums.
Merci à tous pour votre réflexion,

Fanny
Ou plutôt afficher le contenu de la Balise LongDesc pour laisser l'accessibilité à ceux qui en ont besoin.
Salut,

de base je vois bien une solution en javascript :
- un addEventListener pour gérer le survol des images qui ont la classe que tu veux puis quelques lignes pour récuperer la valeur de l'attribut que tu veux (tu suggères l'attribut alt mais je verrais plutôt un data-attribute )

Ensuite selon la construction du code on doit pouvoir imaginer une solution en full css je pense
Modérateur
Bonjour,

Comme Mathieuu si le départ est une simple balise <img>, alors il faudra du javascript pour récuperer la valeur d'in un attribut et ensuite l'injecter dans le DOM du document pour l'afficher. Une balise img est une balise de remplacement ce qui rend impossible l'usage d'un pseudo element pour afficher le contenu d'un de ses attibut.

En Full HTML/CSS, je te conseillerais d'utiliser une balise figure contenant une balise img et une balise figcaption . figcaption sera plus sur et efficace que l'attribut longdesc.

par exemple
HTML 
<figure>
  <img src="https://picsum.photos/id/40/200/300" alt="museau">
  <figcaption>Description ou légende de l'image</figcaption>
</figure>

et possible CSS
figure {
  width:min-content;
  position:relative;
  overflow:hidden;
}
figure img {
  vertical-align:top;
}
figure figcaption {
  position:absolute;
  bottom:0;
  transform:translateY(100%);
  background:yellow;
  padding:3px;
  transition:0.25s
}
figure:hover figcaption {
  transform:translateY(0);
}


Cdt
Bonjour Mathieuu et Gcyrillus,

Un grand merci pour le temps que vous avez pris et pour la précision de vos réponses !

Dans mon cas, il me manque la syntaxe Javascript. Je demande ici pour gagner du temps si un meilleur polyglotte de Script peut me taper la requête. Je vais passer trois heures là où quelqu'un va peut-être trouver cette syntaxe somme toute basique en 5 minutes... Problème de graphiste pas assez dév'...

Par exemple, comment taper le script disant :
"Au survol de mon image ayant pour classe "credit", fais apparaître sa figcaption" ?

(Figcaption étant en effet bien plus judicieux, je l'avais oubliée, celle-ci).
Ceci fait, je saurai où placer le reste, c'est vraiment le script qui me fait défaut...

Merci encore,
Fanny
Modérateur
Flammette a écrit :

(Figcaption étant en effet bien plus judicieux, je l'avais oubliée, celle-ci).
Ceci fait, je saurai où placer le reste, c'est vraiment le script qui me fait défaut...

Avec figure et figcaption , le css en exemple ne fonctionne pas ?
Administrateur
Bonjour,

Flammette a écrit :
Ou plutôt afficher le contenu de la Balise LongDesc pour laisser l'accessibilité à ceux qui en ont besoin.

Cet attribut n'a jamais vraiment été supporté par les navigateurs, tu peux l'oublier.
Préférer ce qui est décrit sur AcceDe Web : 4.4. Images informatives complexes : rédiger un court texte de remplacement ainsi qu’une description détaillée mais pas pour un copyright, pour ça figcaption est très bien.

Pour l'accessibilité de l'élément figure, il faudrait systématiquement rajouter 2 attributs, si l'outil le permet bien entendu (si on a la main sur le gabarit ou le composant) :

<figure
  role="figure"
  aria-label="le contenu de figcaption et pas du alt de l'image oh et ici le copyright">
  <img
    src=""
    alt="Description succincte de l'image elle-même">
  <figcaption>
    <!-- les span sont complètement optionnels -->
    <span>le contenu de figcaption</span>
    <span> et pas du alt de l'image</span>
    <span>oh et ici le copyright</span>
  </figcaption>
</figure>

C'est demandé par le référentiel général d’amélioration de l’accessibilité (RGAA) pour une meilleure accessibilité dans tous les navigateurs et lecteurs d'écran parce que sans ça, chacun fait un peu à sa sauce et oublie l'une ou l'autre information... (et j'ai vérifié récemment et longuement : c'est toujours d'actualité)
Bonjour à tous et merci à chacun d'avoir pris le temps de répondre.
Je n'ai pas réussi à mettre en place vos solutions car je n'ai pas la main sur tout mon code Wordpress. Aussi ai-je trouvé une autre recette, moins légère, mais plus facile pour moi, consistant à ajouter l'extension "Divi Image Helper" à mon site WP.

J'active dans chaque module Image l'option "Enable Caption", je renseigne ladite caption dans ses attributs, puis, je style soit dans mon module, soit dans mon code <style> par le code css suivant, par exemple :
.et_pb_image .pac_dih__caption p {text-transform:uppercase;font-size:0.8em}

Dans mon cas, j'ai défini la position en absolute (bottom:0), et ajouté un peu de padding pour que la caption se superpose à l'image en restant discrète.

Merci encore et pardonnez ma solution pas très dév' mais je pense qu'elle peut aider d'autres profils comme le mien Smiley smile
Prévenir un modérateur
Répondre au sujet
Aller à