Bonjour,
j'ai trouvé ce code dans un de mes livres qui propose des scripts php. L'idée c'est de mettre en place des liens sur lesquels le visiteur peut cliquer et le contenu du lien se deroule et lorsqu'il reclique dessus il s'enroule; comme pour les menu deroulant.
voici le code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
function start_section( $id, $title )
{
?>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="30" valign="top">
<a href="javascript: void twist('<?php echo($id); ?>');">
<IMG src="up.gif" border="0" id="img_<?php echo($id); ?>"/>
</a>
</td>
<td width="90%">
<h1><?php echo( $title ); ?></h1>
</td>
</tr>
</table>
<div STYLE="height:0px;"
id="<?php echo($id); ?>" class="spin-content">
<?php
}
function end_section()
{
?>
</div>
<?php
}
function spinner_header()
{
?>
<!-- <STYLE type="text/css">
body { font-family: arial, verdana; }
h1 { font-size: medium; border-bottom: 1px solid black; }
.spin-content { font-size: small; overflow:hidden; }
--> </STYLE>
<script language="Javascript">
function twist( sid )
{
imgobj = document.getElementById( "img_"+sid );
divobj = document.getElementById( sid );
if ( imgobj.src.match( "up.gif" ) )
{
imgobj.src = "down.gif";
divobj.style.height = "auto";
}
else
{
imgobj.src = "up.gif";
divobj.style.height = "0px";
}
}
</script>
<?php
}
?>
<html>
<head>
<?php spinner_header() ?>
</head>
<body>
<?php start_section( "one", "Report part one" ) ?>
This report will tell you a lot of stuff you didn't know before.
And that's good. Because that's what a report should do.<br/><br/>
But it will tell you so much that it needs to be rolled up into sections
so that you don't have to gasp as you see it all at one.
<?php end_section() ?>
<?php start_section( "two", "Report part two" ) ?>
This is a table of numbers and such:<br/>
<table>
<tr><th>State</th><th>Total</th></tr>
<tr><td>CA</td><td>$35M</td></tr>
<tr><td>PA</td><td>$22M</td></tr>
<tr><td>NC</td><td>$5M</td></tr>
<tr><td>FL</td><td>$15M</td></tr>
</table>
<?php end_section() ?>
</body>
</html>
mais il ne marche pas comme attendu: voici un apperçu du rendu http://www.emi.u-bordeaux1.fr/~mamasow/phphacks/spinner/
Il vous manque la dynamique d'apparence des deux élément de texte dans la fonction js. pour cela il faut d'abord encadré les sections par des div puis modifier la fonction js en utilisant les display = "none" et display= "block"
EDIT : d'ailleurs je trouve bizarre d'utiliser du PHP ici, tout pourrait être fait facilement en JS...
alphon5o
j'ai essayer la solution que tu ma proposé mais rien à changé; sinon si tu sais comme le faire en se servant uniquement de javascript je suis preneur. et merci pour l'aide
Tu mets un id sur ton image et un onclick :
<IMG src="up.gif" id="img_1" onclick="deroulement(this.id);">
ensuite pour plus de simplicité dans le code tu entoures les textes chacun avec un div qui reprend une partie de l'id comme tu l'avais fait:
<div id="div_1" class="hidden"> ton bloc de texte </div>
il faut créer une CSS afin de mettre tes classes de masque et affichage :
.hidden {
display:none;
}
merci pour ton aide il ne fonctionne pas mais j'ai vu l'erreur dans mon script; le css etait commenté donc voila; il suffisait juste de le decommenter. merci quand meme
<IMG src="up.gif" id="img_1" onclick="deroulement(this.id);">
ensuite pour plus de simplicité dans le code tu entoures les textes chacun avec un div qui reprend une partie de l'id comme tu l'avais fait:
<div id="div_1" class="hidden"> ton bloc de texte </div>
il faut créer une CSS afin de mettre tes classes de masque et affichage :
.hidden {
display:none;
}
.visible{
display:block;
}
puis dans le js :
function deroulement(this.id) {
imgobj = document.getElementById( "img_"+sid );
divobj = document.getElementById( "div" +sid );
if ( imgobj.src.match( "up.gif" ) )
{
imgobj.src = "down.gif";
divobj.className= "visible";
}
else
{
imgobj.src = "up.gif";
divobj.className= "hidden";
}
}
voilà j'ai pas pu testé mais ça devrait fonctionner