Bonjour,
Décidement, en deux jours: deux messages sur le forum... j'envahi le forum.
J'ai un bug que je ne comprends pas ... je débute en javascript, je n'ai seulement fais que trois tutorials... donc je ne connais pas les choses impossibles ! (d'ailleurs je conseille vivement les tutos du
https://openclassrooms.com/fr/
Le but de mon opération est d'afficher ou masque une div. Le problème que je ne sais pas comment les placer aux mêmes endroits et pas l'une dessous l'autre...
j'ai 5 liens vers 5 div... et tout se passe bien, sauf que quand je clique mes étants les une en dessous des autres, mon affichage fait pareil. Suis pas sur d'être clair ... arf.
Mon doc est là :
<!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" >
<head>
<title>Reflets locals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design_bk.css" />
<script language="JavaScript">
function affichage(eltAafficher)
{
var tableaudiv= new Array("1","2","3","4", "5", "6", "7" );
for(var j = 0;j<7;j++){
if(document.getElementById(tableaudiv[j])){
var eltcacher = document.getElementById(tableaudiv[j]);
eltcacher.style.visibility="hidden";
}
}
var eltAfficher = document.getElementById(eltAafficher);
eltAfficher.style.visibility="visible";
}
</script>
</head>
<body>
<!-- tableau de mise en page -->
<table width=100% height=100%>
<!--ligne1: les TITRES des RUBRIQUES--> <tr height=100 >
<!-- colonne1--> <td ></td>
<!-- colonne2--> <td></td>
<!-- colonne3--> <td align=center width=33% height="30" ><img src="img/picto.jpg"><br /><div class="sous_rubrique"><a href="#">localsReflet</a><div></td>
<!-- colonne4--><td align=center width=29%><img src="img/picto.jpg"><br /><div class="rubrique"><a href="#">Reflet</a></div></td>
<!-- fin de la ligne1--></tr>
<!--ligne2--><tr>
<!-- colonne2--><td width=10%></td>
<td width=15% align=letf valign="top">
<div class="liste_domaine">
<a href="#">Reflet Nîmes</a><br />
<a href="#">Reflet Artivistic</a><br />
<a href="#">Reflet Noilac</a><br />
<a href="#">Reflet Festival du Mot</a><br />
</td>
<!-- colonne3 LA MAP--><td align=center width=50%>
<div class="map">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="
http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0 " width="700" height="400" id="zoom_map" align="top">
<param name="movie" value="world.swf?data_file=data.xml" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="world.swf?data_file=data.xml" quality="high" bgcolor="#FFFFFF" width="700" height="400" name="Clickable World Map" align="top" type="application/x-shockwave-flash" pluginspage="
https://get.adobe.com/flashplayer/ "></embed>
</object>
</td>
<!--colonne4--><td></td>
</tr><!--FIn de la ligne 2-->
<!-- ligne3 MENU--><tr height=30>
<!-- colonne1--><th></th>
<!-- colonne2--><td></td>
<!-- colonne3--><td>
<!--**************************************************************************-->
<!-- MENU -->
<a href="#"value="1" onclick="affichage('1' );">1</a>
<a href="#"value="2" onclick="affichage('2' );">2</a>
<a href="#"value="3" onclick="affichage('3' );">3</a>
<a href="#"value="4" onclick="affichage('4' );">4</a>
<a href="#"value="5" onclick="affichage('5' );">5</a>
<a href="#"value="6" onclick="affichage('6' );">6</a>
<a href="#"value="7" onclick="affichage('7' );">7</a> </td>
<!-- colonne4--><td></td>
</tr>
<tr>
<th></th>
<td></td>
<td> <!-- Contenu-->
<div id="1" class="focus" style="visibility:visible;">aaaaa</div>
<div id="2" class="cache" style="visibility:hidden;">bbbbbbbb</div>
<div id="3" class="cache" style="visibility:hidden;">cccccccc</div>
<div id="4" class="cache" style="visibility:hidden;">ddddddddddd</div>
<div id="5" class="cache" style="visibility:hidden;">eeeeeeeee</div>
<div id="6" class="cache" style="visibility:hidden;">fffffffffffff</div>
<div id="7" class="cache" style="visibility:hidden;">ggggggggggg</div>
</td> </td>
<td></td>
</tr>
</table>
</body>
</html>
Par exemble, J'ai bien pensé à donner une coordonnées fixe à mes divs mais j'aimerais plus que ça soit proportionnel:
<div id="3" class="cache" style="top:58px;left:50px; position:absolute; visibility:hidden;">
cccccccc
</div>
Auriez vous un conseil siouplait ? merci merci d'avance !
Afficher la suite