J'utilise l'infobulle. Mais je veux que sur l'étiquette de l'image, par exemple lorsque je passe la souris sur l'image, l'infobulle doit fonctionner. J'ai essayé mais cela ne fonctionne pas pour moi sur la balise image.
Réponses
Trop de publicités?
Matthias
Points
2033
Paresh Shiyal
Points
176
Je mets des infobulles sur mon projet qui fonctionne à 100%.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.size_of_img{
width:90px}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>
<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>
</body>
</html>
Sushma Reddy
Points
11
En utilisant le javascript, vous pouvez définir des infobulles pour toutes les images de la page.
<!DOCTYPE html>
<html>
<body>
<img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
<img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
<script>
//image objects
var imageEls = document.getElementsByTagName("img");
//Iterating
for(var i=0;i<imageEls.length;i++){
imageEls[i].title=imageEls[i].alt;
//OR
//imageEls[i].title="Title of your choice";
}
</script>
</body>
</html>
Hasshi Sudler
Points
1
