Comment faire apparaître une autre image sur l'image

par creange Jeu 2 Jan 2025 - 17:31

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://dangela.forumgratuit.org/

Description du problème

Bonjour

j'avais fait mon calendrier de l'avent pour mettre dans un widget personnalisé et mis ce code

Code:: <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 6<a href="https://dangela.forumgratuit.org/t442-l-atelier-de-noel#42035" target="" blank"="" title="Atelier de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" style="height: 30px;" /></a> <br /><br /> </span> </td>

j'ai essayé de mettre celui là mais ça m'ouvre une autre fenêtre

Code:: 30<a title="Nuit de la St Sylvestre" blank"="" target="" href="https://i.servimg.com/u/f47/12/27/40/27/bettyb14.gif"><img src="https://i.servimg.com/u/f47/12/27/40/27/pngwin11.png" img="" style="height:30px;" /></a> </span> </td>

ce que je souhaite c'est qu'une image remplace l'image existante quand on clique dessus
bon je sais c'est trop tard pour cette fois mais si quelqu'un peut m'aider je saurai le faire pour le prochain Razz

Bonne journée

par Stefano123 Jeu 2 Jan 2025 - 17:48

Bonjour creange,

Ce code ouvre une fenêtre :

Code:: target="_blank"

Essayez comme ça si cela fonctionne !

Code:: <a href="https://dangela.forumgratuit.org/t442-l-atelier-de-noel#42035" title="Atelier de Noël" /><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" style="height: 30px;" /></a>

Ou comme ça :

Code:: <a href="https://dangela.forumgratuit.org/t442-l-atelier-de-noel#42035" target="_blank" title="Atelier de Noël" /><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" style="height: 30px;" /></a>

Je vous donne un lien Le codage HTML : peut-être ceci pourra vous aider comment ouvrir une fenêtre ou autre :

http://broussaille.free.fr/cours/lien.htm

Cordialement,

par creange Jeu 2 Jan 2025 - 18:03

Bonjour Stéphano 123 merci pour le code mais je l'ai déjà essayé et ce n'est pas le but
recherché . Ce que je souhaite c'est que l'image soit remplacée par une autre image mais
toujours sur le calendrier avant d'aller sur le lien .
oui je sais c'est compliqué ce que je demande Razz

Cordialement

par Stefano123 Jeu 2 Jan 2025 - 18:12

Rebonjour creange, Smile

Rien est compliqué s'il y a l'idée de base, suffit juste de savoir comme si prendre et l'adapter !! Lunette

Franchement, je ne saurais comment faire pour vous aider au mieux, à part faire perdre votre temps...!

En espérant que quelqu'un vienne vous donner l'astuce pour ce faire...

Cordialement,

par creange Jeu 2 Jan 2025 - 18:26

Merci d'avoir tenté de m'aider Staphano 123
je vais patienter
bonne fin de journée

par creange Ven 3 Jan 2025 - 23:26

un petit up Very Happy

par creange Mar 7 Jan 2025 - 16:25

Bon j'ai trouvé comment superposer l'image avec ce code

Code:: <a href="ici url de redirection" target="_blank"><img src="image1" onmouseover="this.src=''https://i.servimg.com/u/f47/12/27/40/27/coucou13.gif" onmouseout="this.src=''https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </center><span style="color: rgb(0, 0, 0);"></span><a href="ici url de redirection a hef="https://dangela.forumgratuit.org/f32-la-galerie-des-cadeaux" target="_blank"> </a>

mais par contre je n'arrive toujours pas à mettre
le lien sur la 2eme image Lunette

par creange Jeu 9 Jan 2025 - 18:37

et encore un petit up

par creange Ven 10 Jan 2025 - 20:23

Un autre petit Up
Je crois que finalement je vais laisser sans lien .....

par creange Dim 12 Jan 2025 - 15:19

par MlleAlys Dim 12 Jan 2025 - 16:02

Bonjour, je ne comprends pas bien, vous souhaitez que l'image de départ soit celle-ci :
https://i.servimg.com/u/f47/12/27/40/27/pngwin11.png
et quand on clique dessus, elle devient celle là ?
https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png
J'imagine que si l'utilisateur a déjà cliqué dessus mais quitte le forum puis revient dessus, l'image ne doit pas revenir à la première mais rester la deuxième ?
Vous affichez une seule image à la fois, ou bien cela doit fonctionner pour plusieurs images dans votre widget ?

par creange Dim 12 Jan 2025 - 16:41

Bonjour MlleAlys la deuxième image apparaît juste au passage de la souris et je souhaite que lorsque l'utilisateur clique dessus il y ai un lien qui s'ouvre

voici le lien pour que vous puissiez voir j'ai temporairement laissé le calendrier de l'avent en dessous du calendrier du forum
https://dangela.forumgratuit.org/portal

par MlleAlys Dim 12 Jan 2025 - 17:11

Oh, donc au survol et non au clic ?
Je ne sais pas si le sélecteur sera assez sélectif, mais essayez par exemple en ajoutant le code css suivant :

Code:: /************ début calendrier de l'avent************/ #calendar .hover-td a { display: inline-block; } #calendar .hover-td a:hover { background: url(https://i.servimg.com/u/f47/12/27/40/27/pngwin11.png); background-size: contain; } #calendar .hover-td a:hover img { opacity: 0; } /************ fin calendrier de l'avent************/

L'image au survol apparait en fait en image de fond du lien, tandis que celle de votre code devient transparente.

par creange Hier à 15:41

merci MlleAlys ça semblait bien fonctionner jusqu'à ce que j'ai un bugg au niveau
de la validation dans les modules du coup j'ai dù tout retiré et j'ai ouvert un sujet
à propos du bugg du coup je laisse ce sujet en attente

bonne journée

PS: apparement le bugg vient du code
MlleAlys je mets
le lien du sujet https://forum.forumactif.com/t411080-je-n-arrive-plus-a-faire-des-changement-dans-le-pa?nid=118#3421884 pour que vous puissiez voir la réponse qui m'a été faite

par MlleAlys Hier à 17:24

Le code que je vous ai proposé est un code css à placer dans votre feuille de style, a priori pas besoin de toucher au widget. Si vous voulez le mettre dans le widget, alors il faut l'insérer entre balises <style>...</style>.
Si c'est le code actuel du widget qui pose déjà souci, alors il faudrait corriger et "nettoyer" ce code, pourriez vous le partager en entier ?

par creange Hier à 17:26

je l'avais bien placé dans le css et ça fonctionnait parfaitement jusqu'à ce que ça bugg !

dés que j'essaie de mettre l'image2 et le lien le calendrier au 29

je ne peux pas mettre le code en entier sur ce forum on me dit que la limite du message est
dépassé donc je vous mets le lien de la page html j'espère que ça vous suffira pour récupérer le code ????

par creange Hier à 18:34

MlleAlys puis-je vous envoyer le code par MP ?
je n'arrive pas à le poster
il est refusé à chaque fois !

par MlleAlys Hier à 19:18

Un mp pour envoyer quoi que vous ne pouvez mettre ici ?

Vous avez mis le widget sur la page html c'est ça ? Par quoi commence votre code et par quoi finit-il ?

(PS : la désactivation du clic droit n'est pas très pratique ^^")

par creange Hier à 19:20

mon code commence par ça

Code:: class="module"> <div class="inner"> <div class="h3"> <strong><span style="color: rgb(51, 0, 0);">DECEMBRE 2024</span></strong> </div> <div id="calendar" style="margin: 0 auto;max-width:250px;"> <br /><br /> <table class="table1" cellspacing="1"> <tbody></tbody> <tbody></tbody> <tr style=""> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Lun </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Mar </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Mer </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Jeu </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Ven </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Sam </span> </th> <th style="padding-left:0;padding-right:0;width:14%;text-align:center;"> <span style="color: rgb(0, 0, 0);"> Dim </span> </th> </tr><tbody></tbody><tbody> </tbody> <tbody></tbody> <tr style=""> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> </td> <td class="hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"><br /> </span> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> </td> <td class="row2 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 1 <a title="Ouvrons La Galerie de Noël" blank"="" target="" href="https://dangela.forumgratuit.org/t440-reouverture-de-la-galerie-de-noel"><img style="height: 30px;" src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> <br /><br /> </span> </td> </tr><tbody></tbody><tbody> </tbody> <tbody></tbody> <tr style=""> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 2<a title="Achats de Noël" blank"="" target="" href="https://dangela.forumgratuit.org/f13-vous-et-le-shopping"><img style="height: 30px;" src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> <br /><br /> </span> </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 3<a href="https://dangela.forumgratuit.org/t299-les-produits-fabriques-maison" target="" blank"="" title="Le Made in France"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" style="height: 30px;" /></a> <br /><br /> </span> </td> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 4<a title="Des Livres pour Noël" blank"="" target="" href="https://dangela.forumgratuit.org/t166-vos-gouts-literraires"><img style="height: 30px;" src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> <br /><br /> </span> </td>

par creange Hier à 19:22

et finit par ça

Code:: <td class="row1 center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 25 <a href="https://dangela.forumgratuit.org/f32-la-galerie-des-cadeaux" target="" blank"="" title="Nos Cadeaux de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/76373810.gif" style="height: 30px;" /></a> </span> </td> <td class="row1 center" =""="" style=" padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 26</span> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 27</span> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 28<br /> </span> </td> <td class="row1 center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 29</span> </td> </tr><tbody></tbody><tbody> </tbody> <tbody></tbody> <tr style=""> <td class="row3 hover-td center" style="padding-left:0;padding-right:0;"> <span style="color: rgb(0, 0, 0);"> 6<a href="https://dangela.forumgratuit.org/t442-l-atelier-de-noel#42035" target="_self " =""="" title="Atelier de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" style="height: 30px;" /></a> <br /><br /> </span> </td> <td style="padding-left:0;padding-right:0;" class="row2 hover-td center"> <span style="color: rgb(0, 0, 0);"> 31</span> <center style="color: rgb(0, 0, 0);"> <a href="ici url de redirection" target="_blank"></a> </center> </td> </tr><tbody></tbody><tbody></tbody> </table> </div> </div> </div>

le code est dans un widget personnalisé et je l'ai recopié dans une page html pour le garder

par MlleAlys Hier à 20:30

L'éditeur des modules transforme votre code en rajoutant des balises, des espaces, etc.
Si vous devez modifier le code du widget, ne reprenez pas depuis le code déjà dans le module, sinon à chaque enregistrement, l'éditeur va ajouter encore plus de balises : Ayez le code de votre calendrier bien propre dans un document, un bloc note par exemple, et à chaque fois, vous reprenez le code du bloc note. Comme ça le code restera bien celui de départ et cela évitera l'accumulation des balises.

Voici un début de code "nettoyé" :

- dans votre widget personnalisé, cochez l'option : utiliser une table type : OUI.
- titre : décembre 2024
- source du widget :

Code:: <table id="calendar" class="table1" cellspacing="1" align="center" valign="top"> <tr> <th>Lun</th> <th>Mar</th> <th>Mer</th> <th>Jeu</th> <th>Ven</th> <th>Sam</th> <th>Dim</th> </tr> <tr> <td class="row2"></td> <td class="row2"></td> <td class="row2"></td> <td class="row2"></td> <td class="row2"></td> <td class="row2"></td> <td class="row2 hover-td">1 <a title="Ouvrons La Galerie de Noël" target="_blank" href="/t440-reouverture-de-la-galerie-de-noel"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> </tr> <tr> <td class="row3 hover-td">2 <a title="Achats de Noël" target="_blank" href="/f13-vous-et-le-shopping"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">3 <a href="/t299-les-produits-fabriques-maison" target="_blank" title="Le Made in France"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">4 <a title="Des Livres pour Noël" target="_blank" href="/t166-vos-gouts-literraires"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">5 <a href="/t358p75-pulls-de-noel#42033" target="_blank" title="Pulls de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">6 <a href="/t442-l-atelier-de-noel#42035" target="_blank" title="Atelier de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">7 <a title="Marché de Noël" target="_blank" href="/t242-decos-de-noel"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">8 <a title="Marché de Noël" target="_blank" href="/t242-decos-de-noel"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> </tr> <tr> <td class="row2 hover-td">9 <a title="Jeux de Noël" target="_blank" href="/t158p300-le-jeu-du-rebus"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">10 <a href="/t441-vos-decos-de-noel-24" target="_blank" title="Vos Décos de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">11 <a href="/f21-la-galerie-d-art" target="_blank" title="Préparons nos cadeaux de Noël"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">12 <a title="Les Récits de Noël" target="_blank" href="/t217p625-les-petites-rubriques-de-marinbleu"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">13 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">14 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">15 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> </tr> <tr> <td class="row3 hover-td">16 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">17 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">18 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">19 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">20 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">21 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">22 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> </tr> <tr> <td class="row2 hover-td">23 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">24 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">25 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">26 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">27 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">28 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row2 hover-td">29 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> </tr> <tr> <td class="row3 hover-td">30 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3 hover-td">31 <a title="TITRE DU LIEN" href="ADRESSEDULIEN" target="_blank"><img src="https://i.servimg.com/u/f47/12/27/40/27/tete_b10.png" /></a> </td> <td class="row3"></td> <td class="row3"></td> <td class="row3"></td> <td class="row3"></td> <td class="row3"></td> </tr> </table> <style> #calendar th, #calendar td { padding-left:0; padding-right:0; width:14%; text-align:center; vertical-align: top; color: black; } #calendar a img { max-width: 100%; } #calendar a { display:block; } #calendar a:hover { background: url(https://i.servimg.com/u/f47/12/27/40/27/pngwin11.png) no-repeat; background-size: contain; } #calendar a:hover img { opacity:0; } </style>

J'ai commencé à remplir les dates 1 à 12, je vous laisse remettre dans les cases suivantes les liens voulus selon le même modèle Wink

J'ai mis le css associé à la fin du code du tableau, donc pas besoin de le remettre dans le css du forum.

par creange Hier à 21:39

Merci MlleAlys ça fonctionne parfaitement
mon calendrier sera prêt pour les prochains fêtes mdr merci thumright

J'ai pourtant mis tous mes codes dans un bloc notes mais j'ai le défaut
de recopier celui qui est déjà dans le module ... Rolling Eyes

Merci pour l'astuce je retiens Wink

je ferme le sujet
bonne fin de soirée

Comment faire apparaître une autre image sur l'image