Tooltip pour une image map [Résolu]

chourouk86 47 Messages postés samedi 14 avril 2007Date d'inscription 17 décembre 2013 Dernière intervention - 27 nov. 2013 à 16:03 - Dernière réponse : @karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention
- 29 nov. 2013 à 16:36
Bonjour,
Je suis en train de faire une image map, je voudrais quand je mets la souris sur une zone cette dernière change de couleur et avoir un tooltip où je peux mettre un message. Est ce que c'es possible? Merci
Afficher la suite 

2 réponses

Répondre au sujet
cs_AlexN 719 Messages postés lundi 5 décembre 2005Date d'inscription 8 janvier 2014 Dernière intervention - Modifié par kazma le 29/11/2013 à 19:10
0
Utile
Bonjour,

il existe plusieurs modules jQuery qui ont cette capacité :
- Qtips2 : http://qtip2.com/demos
- jQuery tooltips : http://www.red-team-design.com/image-map-with-css3-jquery-tooltips
- Tooltip Magic : http://www.projectseven.com/products/tools/tooltips/tutorials/quick-tutorials/image-map/index.htm

J'ai eu ces réponses avec la requête : tooltip on imagemap
--
Commenter la réponse de cs_AlexN
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - Modifié par kazma le 29/11/2013 à 16:46
0
Utile
bonjour pour changer la couleur d'une zone il n'y a pas 36 solution il faut crée une image map pour chaque zones avec la zone survolé de couleur différente ensuite on met un evenement onmousever pour chaques zones qui changera l'image c'est lourd mais c'est la seul solution. pour le toltype un simple div qui sera affiché selon la position de la souris avec un petit decalage par un display block et que l'on fera disparaitre par un display block

tu peut t'inspirer de ce code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

tbt1 =new Array ("texte 1 tab1","texte 2 tab1","texte 3 tab1","texte 4 tab1")
tbimage =new Array ("image_de _la_mape_zone1.jpg","image_de _la_mape_zone2.jpg","image_de _la_mape_zone3.jpg","image_de _la_mape_zone4.jpg")

function trap(evt,index){

dyna=document.getElementById('dyn')

if(arguments.length>0){
var dde=(navigator.vendor) ? document.body : document.documentElement;
evt =(!evt) ? window.event : evt;
var XX =evt.clientX + dde.scrollLeft;
var YY =evt.clientY + dde.scrollTop;
dyna.style.top=YY-15+'px'
dyna.style.left=XX+15+'px'

document.getElementById('txt1').firstChild.nodeValue=tbt1[index];
document.getElementById('zone_map').src=tbimage[index]
dyna.style.display='block'
}
else{
dyna.style.display='none'
document.getElementById('zone_map').src='image_de _la_mape_originale.jpg'
}
}
</script>
</head>
<body>

<div id='dyn' style='height:70px;width:100px;display:none;position:absolute;top:0;left:0;background-color:yellow'>
<span id='txt1'>du texte</span>
</div>

<IMG src="image_de _la_mape_originale.jpg" USEMAP="#la_mape" id='zone_map' Alt="coucou">
<MAP NAME="la_mape">

<AREA SHAPE=RECT COORDS="0,50,215,149" onmouseover='trap(event,0)' onmouseout='trap()'>
<AREA SHAPE=RECT COORDS="1,165,78,299" onmouseover='trap(event,1)' onmouseout='trap()'>
<AREA SHAPE=RECT COORDS="2,0,480,35" onmouseover='trap(event,2)' onmouseout=trap()>>

<AREA SHAPE=RECT COORDS="268,45,480,147" onmouseover='trap(event,3)' onmouseout='trap()'>
</MAP>
</body></html>
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.