11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,


Je tourne en rond dans les quelques lignes de code en javascript.
Ce code fonctionne, mais n'est pas un exemple type de fonction...
J'aurai tant voulu simplifier ces quelques lignes.
Mais je n'y arrive pas.
Pourriez-vous m'aider ?

Au lieu d'avoir :
onMouseOver="region('region05')
j'aurai voulu avoir :
onMouseOver="region(1)"

et aussi
créer une boucle pour mettre toutes les divs
style.display = "none"

D'avance, un grand merci !!!

<?php
require_once("php/connexionMysql.inc.php");
$requete="SELECT existence,zone,abreviation,nomcomplet,siteinternet,rue,cpostal,localite,tel,fax,teltravaux,email FROM prestataires ";
$resultat=mysql_query($requete);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
<script type="text/javascript">
function region(div) {
	document.getElementById('region01').style.display = "none";	
	document.getElementById('region02').style.display = "none";	
	document.getElementById('region03').style.display = "none";	
	document.getElementById('region04').style.display = "none";	
	document.getElementById('region05').style.display = "none";	
	document.getElementById('region06').style.display = "none";	
	document.getElementById('region07').style.display = "none";	
	document.getElementById(div).style.display = "block";	
}
</script>
</head>

<body>
<div id="site">
...
  <div id="contenu">
  	  <div id="defilant01">
      	<img src="images/responsables/france.gif" alt="carte_france" width="409" height="380" border="0" usemap="#Map2">
      	<map name="Map2">
        	<area shape="poly" coords="..." href="" alt="region01" onMouseOver="region('region01');">
        	<area shape="poly" coords="..." href="" alt="region02" onMouseOver="region('region02');">
        	<area shape="poly" coords="..." href="" alt="region03" onMouseOver="region('region03');">
        	<area shape="poly" coords="..." href="" alt="region04" onMouseOver="region('region04');">
        	<area shape="poly" coords="..." href="" alt="region05" onMouseOver="region('region05');">
        	<area shape="poly" coords="..." href="" alt="region06" onMouseOver="region('region06');">
        	<area shape="poly" coords="..." href="" alt="region07" onMouseOver="region('region07');">
      	</map>
      </div>
      <div id="defilant02">
      	<?php
			while($prestataires=mysql_fetch_array($resultat))  { 
				$zone= substr("00".$prestataires['zone'],-2);
				echo "<div id='region".$zone."'>";
				echo $prestataires['rue']."<br>";
				echo $prestataires['cpostal']."  ".$prestataires['localite']."<br>";
				echo "<strong><span class='c15'>Tél : ".$prestataires['tel']."</span></strong><br>";
				echo "Fax : ".$prestataires['fax']."<br>";
				echo "Email : <a href='mailto:".$prestataires['email']."'>".$prestataires['email']."</a><br>";
				if ($prestataires['siteinternet'] != "") {
					echo "Site : <a href='http://".$prestataires['siteinternet']."' target='_blank'>".$prestataires['siteinternet']."</a><br>";
				}
				echo "</div>";
			}
		?>
      </div>
    </div>
  </div>
  ...
</div>

</body>
</html>

Modifié par jytest (13 May 2011 - 08:33)
jytest a écrit :
Au lieu d'avoir :
onMouseOver="region('region05')
j'aurai voulu avoir :
onMouseOver="region(1)"


Il te suffit juste de concaténer le numéro que tu passes en paramètre à la chaîne "region", de cette façon :

function region(numero)
{
     var idDiv='region'+numero;
     //Suite du code [...]
}


Selon ton exemple, ces numéros doivent avoir un 0 devant s'ils sont inférieurs à 10. Une simple condition te permet de le rajouter !

Idem pour ta boucle, une simple concaténation suffit =)
Voilà, j'adapte...
Mais cela ne fonctionne pas, pourquoi ?
A l'aide.



function region(numero) {
	for (ireg; ireg <=7; ireg++) {
		document.getElementById('region0'+ireg).style.display = "none";	
	}
	document.getElementById('region0'+numero).style.display = "block";	
}

Modifié par jytest (12 May 2011 - 23:08)
Tu as donné une valeur à ton variable ireg avant de lancer ta boucle?

Normalement on écrit comme ca:


function region(numero) {

	for (var ireg = 0; ireg <=7; ireg++) {

		document.getElementById('region0'+ireg).style.display = "none";	

	}

	document.getElementById('region0'+numero).style.display = "block";	

}