11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Voici le but de ma page :
Une image d'une cuisine avec des flèches rouges éparpillées partout.
Un map sur chaque flèches.
Chaque map doit faire apparaître un texte blanc sur fond rouge à côté de la flèche.
Je voudrais éviter de créer autant de div qu'il y a de flèches que cela soit dans la page où dans ma css.

Voici mon problème :
Les div contenant les textes restent bloquer en haut à gauche sous Mozilla alors que sous IE/OPERA il n'y a pas de problème.

Voici mon code :

D'abord la fonction (qui se trouve dans un js) :

function helpGetOffset(obj, coord)
{
	var val = obj["offset"+coord] ;
	if(coord == "Top")
	{	
		val += obj.offsetHeight;
	}
	
	while((obj = obj.offsetParent)!= null)
	{
		val += obj["offset"+coord];
		if (obj.border && obj.border != 0)
		{
			val++;
		}
	}
	return val;
}

function helpDown()
{
	var ptrLayer;
	ptrLayer = MM_findObj("helpBox");
	ptrLayer.style.display = "none";
}

function ViewTxt(event,texte)
{
	var ptrObj, ptrLayer;
	ptrLayer = MM_findObj("helpBox");

	if((Navigateur == "PC" || Navigateur == "MAC") && (Browser == "NETSCAPE" ||  Browser =="FIREFOX" ||  Browser =="SAFARI"))
	{
		ptrObj = event.target;
	}
	
	if((Navigateur == "PC" || Navigateur == "MAC") && (Browser == "MSIE" ||  Browser =="OPERA"))
	{
		ptrObj = event.srcElement;
	}

	var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>';
	ptrLayer.innerHTML = str;
	ptrLayer.bgColor = "#E20026";
	ptrLayer.style["top"]  = helpGetOffset (ptrObj,"Top")+50;
	ptrLayer.style["left"] = helpGetOffset (ptrObj,"Left");
	ptrLayer.style.display = "block";
}


Les détections de plates-formes et de navigateur sont dans un autre js et fonctionnent très bien.

Le lien qui se trouve sur un des maps:

onMouseOver="javascript:ViewTxt(event,'Pour faciliter les mouvements, placez les colonnes en bout de linéaire.');" onMouseOut="javascript:helpDown();"



Ce qui se trouve dans la feuille de style :

#helpBox{
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
	width: 160px;
}

.helpBoxDIV{
	width: 125px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	background: #e20026;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 10px;
}


Le DOCTYPE que j'utilise :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




Merci d'avance aux personnes qui pourront m'aider.

PS : Lorsque j'enlève le DOCTYPE cela fonctionne bien sur les différents navigateur.

Adresse de la page : http://asmon1.free.fr/xhtml/fiche-produits2.htm
Il n'y a un lien que sur la flèche rouge en haut à gauche.
Modifié par asmon (27 Apr 2006 - 17:52)
Bonjour et bienvenue asmon Smiley smile

Visiblement, tu n'as pas lu les règles du forum, notamment la partie qui concerne la publication de code sur le forum : 13- Mise en forme générale des messages

Merci de bien vouloir corriger ton post Smiley cligne
Modifié par dominique (27 Apr 2006 - 18:13)