11548 sujets

JavaScript, DOM et API Web HTML5

Gestion de comportement avec des calques urgent!

Bonjour à tous!

à l'aide de l'assistant dreamweaver, j'ai créé un roll over sur un texte qui fait apparaitre un tableau; les deux éléments sont dans deux claques.
J'ai utilisé les fonctions masquer et afficher le claque mais...lorsque je charge la page, le tableau, qui ne devrait apparaitre que lorsqu'on passe sur le texte, est déjà présent...? Quelqu'un peut-il me dire quel comportement je dois ajouter pour que ma page s'affiche uniquement avec le texte et non le tableau masqué.

Merci!
oui excusez-moi, je pensais que c'était un problème fréquent:

voici pour les calques:


<div id="texte" onmouseover="MM_showHideLayers('mainContainer','','inherit','texte','','show','tableau','','show')" onmouseout="MM_showHideLayers('texte','','show','tableau','','hide')"><a href="#">co&ucirc;t p&eacute;dagogique </a></div>
 <div id="tableau">
   <table width="350" border="1" bgcolor="#FFFFFF">
     <tr>
       <th scope="col">Masterclasses</th>
       <th scope="col">Prix individuels </th>
       <th scope="col">Prix organismes </th>
     </tr>
     <tr>
       <td>Cycle Afrique(s)</td>
       <td>500 a</td>
       <td>850 a</td>
     </tr>
     <tr>
       <td>MC Salia SANOU et Seydou BORO</td>
       <td>200 a</td>
       <td>340 a</td>
     </tr>
     <tr>
       <td>MC Robyn ORLIN</td>
       <td>200 a</td>
       <td>340 a</td>
     </tr>
     <tr>
       <td>MC Germaine ACOGNY</td>
       <td>200 a</td>
       <td>340 a</td>
     </tr>
     <tr>
       <td>MC Merce Cunningham Dance Company (R. Swinston, C. Therrien)</td>
       <td>180 a</td>
       <td>310 a</td>
     </tr>
     <tr>
       <td>Cycle Alwin Nikola&iuml;s</td>
       <td>500 a</td>
       <td>850 a</td>
     </tr>
     <tr>
       <td>MC Carolyn CARLSON</td>
       <td>220 a</td>
       <td>375 a</td>
     </tr>
     <tr>
       <td>MC Susan BUIRGE</td>
       <td>180 a</td>
       <td>310 a</td>
     </tr>
     <tr>
       <td>MC Carte Blanche &agrave; Dominique BOIVIN (D. Boivin, P. Decoufl&eacute;, D. Larrieu)</td>
       <td>220 a</td>
       <td>375 a</td>
     </tr>
     <tr>
       <td>MC David ZAMBRANO</td>
       <td>320 a</td>
       <td>545 a</td>
     </tr>
     <tr>
       <td>MC Pichet KLUNCHUN</td>
       <td>320 a</td>
       <td>545 a Stage</td>
     </tr>
     <tr>
       <td>MC Beno&icirc;t LACHAMBRE (B. Lachambre, L. Lecavalier, Lee S.F. )</td>
       <td>Nous consulter</td>
       <td>Stage en cours de conventionnement AFDAS</td>
     </tr>
     <tr>
       <td>MC Josef NADJ (J. Nadj, M. Aoyama, A. Szelevenyi, G. Etevenard)</td>
       <td>Nous consulter</td>
       <td>Stage en cours de conventionnement AFDAS</td>
     </tr>
   </table>
 </div>


Voici pour le script:


<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible' [decu]v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>


merci d'avance pour votre aide[/i][/i][/i]
Modérateur
Le mieux serait de ne pas laisser Dreamweaver faire ce rollover. Il te génère du code inutile... et dépassé. Faire un rollover en JS n'est pas ce qu'il y a de plus difficile ; ça ne demande pas un gros investissement.

Par ailleurs, si tu mets un rollover sur un élément non focusable (une div ici), il n'est pas possible de conserver la navigation clavier... Ca veut dire que certains ne verront jamais ton tableau ; cette action devrait être portée sur un lien et les événements focus et blur devraient être gérés.

Et puis... Un tableau affichable via un rollover tu dis ? Smiley sweatdrop
C'est un peu tordu non ? Pourquoi ne pas le montrer directement ou l'afficher au clic ? Là, tu rends la manipulation (et visualisation) plus difficile.
Merci koala64 pour tes conseils.

A vrai dire je me sers de dreamweaver parce que je ne suis pas vraiment capable de coder toute seule encore...mais je pense que je trouverai le script sur le web (à moins qu'une bonne âme me le donne...).

Ensuite pour la div ce n'est pas moi qui l'ai généré mais l'assistant DM quand j'ai créé mes calques.

J'ai pris cette option car je veux conserver (ou plutôt la personne pour qui je fais le site) une certaine hauteur de page donc comme le tableau ne rentre pas dans la page j'ai pensé à ce roll over.
Concernant ta proposition
a écrit :
C'est un peu tordu non ? Pourquoi ne pas le montrer directement ou l'afficher au clic ?

je ne comprends pas bien; tu proposes de cliquer sur un lien pour ouvrir une autre page ou une pop pup? J'avais envisagé les deux mais là encore mon "boss" a préféré la solution du roll over...mais si tu as une autre n'hésite pas.

merci!
Modérateur
Je pensais plus à quelquechose de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	.display {
		display: table;
	}
	.hidden {
		display: none;
	}
}

		--></style>
		<script type="text/javascript"><!--

var Script, Sp, displayTable;

Script = function() {};

Sp = Script.prototype =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},

	getSource: function(e)
	{
		return e.target || e.srcElement;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	control: function(oEl, e)
	{
		var oA = document.createElement('a');
		oA.href = '#';
		var oTxt = document.createTextNode('Afficher le tableau');
		oA.appendChild(oTxt);
		oEl.parentNode.insertBefore(oA, oEl);
		
		return Sp.connect(
			oA,
			'click',
			function(e)
			{
				if(e)
				{
					Sp.cancelClick(e);
					Sp.display(oEl, e);
				}
				else
					Sp.display(oEl);
			},
			false
		);
	},

	display: function(oEl, e)
	{
		if(e)
		{
			var oSrc = Sp.getSource(e);
			oSrc.firstChild.nodeValue = (oSrc.firstChild.nodeValue == 'Afficher le tableau') ?
				'Cacher le tableau':
				'Afficher le tableau';
		}
		
		return oEl.className = (oEl.className == 'display') ?
			'hidden':
			'display';
	},

	initTable: function()
	{	
		var aTable = Sp.aTag(document, 'table');
		var iTable = aTable.length;

		do if(aTable[--iTable].className == 'display')
		{
			Sp.control(aTable[iTable]);
			Sp.display(aTable[iTable]);
		}
		while(iTable > 0);
	},
	
	initialize: function()
	{
		return Sp.connect(window, 'load', Sp.initTable, false);
	}
};

displayTable = new Script;
displayTable.initialize();

		//--></script>
	</head>
	<body>

<table summary="Coût des ingrédients" class="display">
	<tr>
		<th>Ingrédient</th>
		<th>Coût</th>
	</tr>
	<tr>
		<td>Crabes farcis</td>
		<td>11.20€</td>
	</tr>
	<tr>
		<td>Jus de pamplemousse</td>
		<td>2.26€</td>
	</tr>
	<tr>
		<td>Tartelettes citron</td>
		<td>2.75€</td>
	</tr>
</table>

	</body>
</html>
Ca évite d'avoir à rester au dessus du lien pour visualiser le tableau. Smiley smile
Sujet clos
Aller à