11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour!

J'ai une galerie photo dans laquelle j'associe une map à la photo affichée.
J'aimerai que lorsque l'utilisateur passe sa souris sur l'area en question, quelque chose de visible (outre le changement de curseur) apparaisse.
Par exemple qu'un bordure encadre l'area, ou que la zone couverte par l'area soit recouverte d'un masque qu'il la fonce...

Pour le moment j'ai adopté pour l'apparition d'une petite boite "Cliquez moi!".
Mais c'est pas extraordinaire selon moi...

Quelqu'un serait-il comment faire quelque chose dans le genre?
Je n'arrive pas à trouver sur quel attribut agir et comment m'y prendre...

Un exemple ICI
Et le code par là:

<script language="JavaScript" type="text/javascript">
var coordX;
var coordY;
function untel (objet_event)
{
	coordX = objet_event.clientX;
	coordY = objet_event.clientY;
	create();
}
function create()
{
	var target = document.getElementById('main');
	var elem = document.createElement('div');
	var txt = document.createTextNode('Cliquez pour zoomer!');
	elem.appendChild(txt);
	elem.id = 'zoom';
	elem.style.position = "absolute;";
	elem.style.left = (coordX)+"px;";
	elem.style.top = (coordY)+"px;";
	elem.style.width = "150px;";
	elem.style.height = "40px;";
	elem.style.textAlign = "right;";
	elem.style.background = "#FFFFFF";
	elem.style.border = '1px solid #000000;';
	target.appendChild(elem);
}
function delElem()
{
	var obj = document.getElementById('main');
	var old = document.getElementById('zoom');
	obj.removeChild(old);
}
</script>
<div id='main'>
<img src="galerie/l_enfant.jpg" usemap="#map" />
<map name="map">
<area coords="341,133,124" shape="circle" href="#" onMouseOver="untel (event)" onMouseOut="delElem()">
</map>
</div>


Merci d'avance! Smiley cligne