Sujet Précédent Sujet Suivant

Tooltip pour une image map

Résolu
chourouk86 Messages postés 45 Date d'inscription samedi 14 avril 2007 Statut Membre Dernière intervention 17 décembre 2013 - Modifié par chourouk86 le 27/11/2013 à 16:04
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 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
A voir également:

2 réponses

Réponse 1 / 2
cs_AlexN Messages postés 694 Date d'inscription lundi 5 décembre 2005 Statut Membre Dernière intervention 8 janvier 2014 19
Modifié par kazma le 29/11/2013 à 19:10
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
--
0
Réponse 2 / 2
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 29/11/2013 à 16:46
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>
0

Discussions similaires

image avec FPDF
cs_sebalex -
Franck -

12 réponses
vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
ToolTipText (info-bulle) en Vb.Net
cs_Esquisse -
hichamsand -

5 réponses
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
insérer une image dans une form
cs_jordinette -
Warning -

2 réponses
Rejoignez-nous