18010 sujets

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

Texte aficher image html

Bonjour,

Après avoir parcouru beaucoup de pages sur internet je n'ai pas réussi à trouver une solution à mon problème, je me demande même si c'est possible.

Je souhaite qu'une image s'affiche lorsque la souris passe par dessus un texte
et cela en HTML uniquement.
Autre possibilité,
cliquer sur un texte (lien) qui donne accès a une image, mais il ne faut pas l'ouvrir sur la page courante ou sur une deuxième page. J'aimerais pouvoir rester sur la même page et pouvoir voir la page courante et l'image en même temps.


Merci d'avance Smiley smile
Modifié par Jeano (08 Apr 2018 - 12:07)
Modérateur
Jeano a écrit :
Bonjour,

Après avoir parcouru beaucoup de pages sur internet je n'ai pas réussi à trouver une solution à mon problème, je me demande même si c'est possible.


Si si, c'est possible !

Mais avant de répondre, à vous de poster la structure dans laquelle vous tentez d'appliquer ceci.
Merci d'avoir pris le temps de me lire
c'est dans un CMS. l’éditeur de texte permet d'ajouter du code html
Modérateur
Bonne nouvelle !

Et quel est ce code html sur lequel vous n'arrivez pas à appliquer l'effet désiré ?

Avez-vous la possibilité de personnaliser le Css dans ce CMS (qui semble ne pas avoir de nom) ?

Avez-vous fait votre choix entre afficher l'image au survol ou dans ce qui je pense serait une pop-up ?


Bref, vous semblez aussi vague que la mer qui cogne la jetée.

Des détails, des détails, je me nourris de détails alors nourrissez-moi !
Du code, du code, il n'est que ça qui me désaltère alors hydratez-moi !
Sans quoi je risque fort de vous poser un lapin.
Modifié par Greg_Lumiere (28 Jan 2018 - 18:57)
Merci beaucoup,
je vais essaye d’être plus claire.
je ne souhaite pas mettre du css ni du javascrip puisque dans le CMS prestashop (site de teste hébergé en local) qui est en PHP s'il faut changer le code c'est plus difficile de faire les misa jours.

Dans mon site, j'ai une éditeur de texte comme celui de ce site, mais en plus j'ai beaucoup plus de possibilités comme celle d’introduire du code HTML
Modifié par Jeano (28 Jan 2018 - 22:24)
Modérateur
Bonjour,

Petit à petit nous avançons, votre réponse a réduit le champs des possibles mais reste à savoir deux choses afin de déterminer si de possible nous ne passerions pas à impossible:
- sur quel code html souhaitez-vous appliquer votre effet ? Montrez-nous la partie html auquel vous avez accès et ce que vous avez codé jusqu'à présent.
- souhaitez-vous un effet au survol ou autre chose ?
- avez-vous al possibilité de modifier le html complet c'est-à-dire à l'intérieur des balises head y compris ?

Oui je sais ça fait 3 choses mais si j'avais mis 3 dès le départ ça vous aurait rebuté car j'ai bien lus que vous n'aviez déjà pas répondu à toutes les questions précédentes.
voici un bout de code
<p><span style="color: #000000;">La principale caract&eacute;ristique de ces berceuses est la ligne m&eacute;lodique (chant pour bercer les enfants). Elle est soutenue par une harmonie simple, mais avec quelques dissonances "consonantes".</span></p>
<p>&nbsp;<span style="font-size: 8pt; color: #99cc00;"><span style="color: #000000;">Niveau de difficult&eacute; :</span> interm&eacute;diaire.</span></p>

j'aimerais placer après un texte
exemple
"chanson pour enfants"
et lorsque la souris passe sur ce texte une image apparais

je ne souhaite pas modifier la balise head du fichier template de mon thème

Merci d'avnace
Modérateur
C'est bien ce que je craignais...

Une des seules possibilités de personnalisation consiste à ajouter du style inline (comme c'est déjà le cas ici) mais pas pour ce que vous voulez faire. En effet, de cette façon il n'existe aucun moyen d'y inclure un sélecteur css.

La seule option que je vois, qui réponde à tous vos impératifs est d'inclure du style en css côté Html. Ca vous semble obscur, hein ? Ne bougez pas vous allez comprendre.

Depuis peu de temps, il est normalisé par le W3C d'insérer des balises style au sein du html sans qu'elles soient forcément incluent dans le head. Cette particularité a l'avantage de pouvoir ne faire appliquer du style qu'à une partie du html ou, comme c'est votre cas, lorsqu'on n'a pas accès au head de la page. Toutefois, gardez en mémoire que cette possibilité est fort récente et n'a donc pas une très grande (rétro-)compatibilité. C'est pourquoi vous devrez vous acquitter de tests sur différents navigateurs.

Ce que je vous propose est d'afficher l'image par défaut puis si la style dans le html est reconnu de masquer cette image pour la faire réapparaître au survol d'un élément.

Grosso merdo... modo, voici ce que ça donnerait dans sa plus pure expression:
<body>

  <style>
    .view_img img {
      display: none;
    }
    .view_img:hover img {
    display: initial;
    }
  </style>

  <p><span style="color: #000000;">La principale caract&eacute;ristique de ces berceuses est la ligne m&eacute;lodique (chant pour bercer les enfants). Elle est soutenue par une harmonie simple, mais avec quelques dissonances "consonantes".</span></p>
  <p>&nbsp;<span style="font-size: 8pt; color: #99cc00;"><span style="color: #000000;">Niveau de difficult&eacute; :</span> interm&eacute;diaire.</span></p>
  <figure class="view_img">
    <figcaption>chanson pour enfants</figcaption>
    <img src="/" width="x" height="y" alt="">
  </figure>
</body>


Vous voyez le principe ?


PS: l'unité "pt" est une unité d'imprimerie, je dis ça je dis rien... Smiley cligne
Modifié par Greg_Lumiere (29 Jan 2018 - 09:51)
Modérateur
Et si vos tests sur les navigateurs ciblés ne sont pas concluant, et bien... vous l'avez dans le baba (au rhum) ! Smiley lol

Je ne vois absolument aucune alternative en suivant toutes les contraintes énoncées. Smiley ohwell
Je viens de tester, et tout fonctionne très, très bien sur Firefox Edge

Un grand merci Greg_Lumiere
Bonjour Greg_Lumiere
je vient de faire une mise-jours de prestashop version 1.7 et malheureusement l'astuce ne fonctionne plus,
Connais-tu une autre solution?

Un grand merci
Modérateur
Bonjour Jeano,

Vous me voyez surpris du fait que le CMS empêche le bon fonctionnement de l'astuce évoquée ; je pensais plus à un problème d'implémentation du navigateur lorsque j'avais écris ces lignes.


Là, à l'instant et pour ne citer que moi-même, ne me vient qu'une chose à l'esprit:
myself a écrit :
vous l'avez dans le baba (au rhum) !



Si un éclair de génie me traverse l'esprit, je vous le ferais savoir. Pour l'heure, bonne chance ! Smiley decu
Sujet clos
Aller à