Code html
vincentdesrosiers
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
vincent -
vincent -
j'ai un petit probleme avec mon code "Title" dans mon HTML
<img src="../images/avion.jpg" width="100" height="75" title="F18" />
sur un ordi et une souris tout va bien... mais avec une tablette (iPad) sa ne fonctionne pas. Quel code faut-il de plus svp
Merci
<img src="../images/avion.jpg" width="100" height="75" title="F18" />
sur un ordi et une souris tout va bien... mais avec une tablette (iPad) sa ne fonctionne pas. Quel code faut-il de plus svp
Merci
A voir également:
- Code html
- Code ascii - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Editeur html - Télécharger - HTML
3 réponses
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.
vincentdesrosiers
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
je fais des recherche et encore merci de l'info.
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
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 :)
