Code html
Fermé
vincentdesrosiers
Messages postés
18
Date d'inscription
vendredi 17 mars 2017
Statut
Membre
Dernière intervention
24 juillet 2019
-
19 janv. 2018 à 03:24
vincent - 21 janv. 2018 à 15:41
vincent - 21 janv. 2018 à 15:41
A voir également:
- Code html
- Code asci - Guide
- Editeur html - Télécharger - HTML
- Code puk bloqué - Guide
- Code telephone oublié - Guide
- Code blocks free - Télécharger - Langages
3 réponses
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
19 janv. 2018 à 07:42
19 janv. 2018 à 07:42
Déjà... Bonjour.
Ensuite... Si tu veux dire que tu n'as pas de petite info bulle lorsque tu "survoles" l'image... C'est que tu dois ajouter un tooltip.
Il existe pleins de plugins en JavaScript pour ça.
Cberche "jquery tooltip" sur ton moteur de recherche internet favori et tu trouveras sans mal.
Ensuite... Si tu veux dire que tu n'as pas de petite info bulle lorsque tu "survoles" l'image... C'est que tu dois ajouter un tooltip.
Il existe pleins de plugins en JavaScript pour ça.
Cberche "jquery tooltip" sur ton moteur de recherche internet favori et tu trouveras sans mal.
le seul que j'ai trouvé est:
CSS
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #FF6600;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 110%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 3px;
border-style: solid;
border-color: #FF6600 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
HTML
<p class="tooltip" style="margin-left: -5px; margin-right: -5px; margin-top: 0px;">
<img src="../images/avion.jpg.jpg" width="100" height="75" />
<span class="tooltiptext">F18</span></p>
et lui il fonctionne sur toutes les nouvelles platfomes (iPad et cies) L'icone s’ouvre lors de mon passage dessus l'image mais ne se referme pas quand mon doigt est retiré de sur la tablette, il reste ouvert sur le dernier ou j'ai retiré mon doigt.
Pour la souris sur un ordi tous va très bien et la fenêtre se referme après le passage de la souris. Peut-on avoir la fermeture de la fenêtre après le retrait de mon doigt sur la tablette et faire le même effet que la souris?
Merci pour votre aide. Vincent
CSS
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #FF6600;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 110%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 3px;
border-style: solid;
border-color: #FF6600 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
HTML
<p class="tooltip" style="margin-left: -5px; margin-right: -5px; margin-top: 0px;">
<img src="../images/avion.jpg.jpg" width="100" height="75" />
<span class="tooltiptext">F18</span></p>
et lui il fonctionne sur toutes les nouvelles platfomes (iPad et cies) L'icone s’ouvre lors de mon passage dessus l'image mais ne se referme pas quand mon doigt est retiré de sur la tablette, il reste ouvert sur le dernier ou j'ai retiré mon doigt.
Pour la souris sur un ordi tous va très bien et la fenêtre se referme après le passage de la souris. Peut-on avoir la fermeture de la fenêtre après le retrait de mon doigt sur la tablette et faire le même effet que la souris?
Merci pour votre aide. Vincent
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
Modifié le 19 janv. 2018 à 16:41
Modifié le 19 janv. 2018 à 16:41
lut;)
plutôt que de me casser la tête avec un 'title' je mets toujours une balise " alt ' c'est ce quii est pris par GG ou autres moteurs ;)
<img src="../images/avion.jpg" alt=F108machintruc />
le 'www' est fait aussi pour communiquer, partager et échanger, non ? Merci d'avoir la politesse de répondre à ceux qui essaient de vous aider :)
plutôt que de me casser la tête avec un 'title' je mets toujours une balise " alt ' c'est ce quii est pris par GG ou autres moteurs ;)
<img src="../images/avion.jpg" alt=F108machintruc />
le 'www' est fait aussi pour communiquer, partager et échanger, non ? Merci d'avoir la politesse de répondre à ceux qui essaient de vous aider :)
vincentdesrosiers
Messages postés
18
Date d'inscription
vendredi 17 mars 2017
Statut
Membre
Dernière intervention
24 juillet 2019
19 janv. 2018 à 21:24
19 janv. 2018 à 21:24
merci je vais faire le test en soirée.
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
20 janv. 2018 à 12:11
20 janv. 2018 à 12:11
tiens-nous au courant altos .... :)
19 janv. 2018 à 21:25