Bonjour,
J'aimerais avoir votre avis sur mon code, notament sur la partie CSS (La partie javascript est à améliorer...)
Mon principal soucis c'est que je voudrais pouvoir afficher plusieurs Bôites sans être obligé de dupliquer le code CSS et d'en avoir un propre a chacune d'elles comme je l'ai fait.
Sinon tout passe sur firefox, sur safari j'ai un bug avec mon span et explorer pas testé...
En ligne : http://thewinterdesign.com/depot/test.htm
le code :
Modifié par supercanard (26 Oct 2006 - 16:10)
J'aimerais avoir votre avis sur mon code, notament sur la partie CSS (La partie javascript est à améliorer...)
Mon principal soucis c'est que je voudrais pouvoir afficher plusieurs Bôites sans être obligé de dupliquer le code CSS et d'en avoir un propre a chacune d'elles comme je l'ai fait.
Sinon tout passe sur firefox, sur safari j'ai un bug avec mon span et explorer pas testé...
En ligne : http://thewinterdesign.com/depot/test.htm
le code :
<!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>
<style type="text/css">
body,html {
font-family: verdana;
}
p {
margin: 0 0 15px 0;
font-size: 12px;
}
#boite1 {
display: none; /* Retire le block */
/* visibility: hidden; Masque le block */
width: 298px;
padding: 5px;
margin: 0 0 15px 0;
background: #C2D5CE;
border: 1px solid #69736F;
}
#boite1 a {
display: block;
padding: 3px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background: #8C9B95;
border: 1px solid #69736F;
}
#boite1 a span {
display: none;
}
#boite1 span p {
margin: 0;
font-size: 10px;
}
#boite1 a:hover span {
display: inline;
padding: 2px;
position: absolute;
background: #EFEFEF;
font-size: 10px;
text-align: center;
color: #000000;
border: 1px solid #000000;
}
#boite2 {
display: none; /* Retire le block */
/* visibility: hidden; Masque le block */
width: 298px;
padding: 5px;
margin: 0 0 15px 0;
background: #C2D5CE;
border: 1px solid #69736F;
}
#boite2 a {
display: block;
padding: 3px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
background: #8C9B95;
border: 1px solid #69736F;
}
#boite2 a span {
display: none;
}
#boite2 span p {
margin: 0;
font-size: 10px;
}
#boite2 a:hover span {
display: inline;
padding: 2px;
position: absolute;
background: #EFEFEF;
font-size: 10px;
text-align: center;
color: #000000;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
function showboite(cible)
{
if(document.getElementById)
document.getElementById(cible).style.display = 'block';
}
function closeboite(cible)
{
if(document.getElementById)
document.getElementById(cible).style.display = 'none';
}
</script>
</head>
<body>
<p><a href="#" onClick="showboite('boite1');">Boîte 1</a> - <a href="#" onClick="showboite('boite2');">Boîte 2</a></p>
<div id="boite1">
<p><a href="#" onClick="closeboite('boite1');">Fermer la fenêtre<span><p>Cliquez ici pour fermer cette boîte</p></span></a></p>
<p>Picture Taker Panel : donne l'illusion à une application que la webcam ou une caméra DV, par exemple, puisse être vue "comme un fichier". Dans un dialogue d'ouverture de fichier, il y aura donc un accès à tout ce qui permet de capturer des images sans avoir à passer par un soft de capture.</p>
</div>
<div id="boite2">
<p><a href="#" onClick="closeboite('boite2');">Fermer la fenêtre<span><p>Cliquez ici pour fermer cette boîte</p></span></a></p>
<p>Picture Taker Panel : donne l'illusion à une application que la webcam ou une caméra DV, par exemple, puisse être vue "comme un fichier". Dans un dialogue d'ouverture de fichier, il y aura donc un accès à tout ce qui permet de capturer des images sans avoir à passer par un soft de capture.</p>
</div>
</body>
</html>Modifié par supercanard (26 Oct 2006 - 16:10)
