DHTML contre FRAMES, à vous de jouer.
CPAM de la Savoie
Est-il possible, en utilisant le DHTML, de créer le même effet qu'avec
des frames?
Je m'explique :
En cliquant sur un lien, je souhaite mettre à jour une seule partie de
ma page. Peut-etre en
jouant sur les couches?
A vous de jouer, moi j'en ai marre de chercher.
Merci, a+
Christophe
PS: une petite réponse par email me serait bien pratique, merci.
Stéphane Pineau
>
> Bonjour,
> Est-il possible, en utilisant le DHTML, de créer le même effet qu'avec
> des frames?
> Je m'explique :
> En cliquant sur un lien, je souhaite mettre à jour une seule partie de
> ma page. Peut-etre en
> jouant sur les couches?
Ci-après un exemple inspiré de ceux fournis avec la doc du DHTML de
Netscape. Exemple en CSS+Javascript. Il est aussi possible de le faire
avec les balises <LAYER> mais bon celui-ci est + passe-partout :
<HTML>
<HEAD>
<TITLE>Flowering Layers Example</TITLE>
</HEAD>
<STYLE type="text/css">
<!--
#flower0 {position: absolute;
LEFT:50; width:400;
background-color:FFFFDD;
border-color:white; border-width:1;}
#flower1 {position: absolute; visibility:hide;
LEFT:50; width:400;
background-color:DDFFDD;
border-color:white; border-width:1;}
#flower2 {position: absolute; visibility:hide;
LEFT:50; width:400;
background-color:DDDDFF;
border-color:white; border-width:1;}
#flower3 {position: absolute; visibility:hide;
LEFT:50; width:400;
background-color:FFDDDD;
border-color:white; border-width:1;}
#formlayer {position:relative; left:50;}
-->
</STYLE>
<SCRIPT>
// this function hides all the flower layers
function hideAllflowerLayers() {
document.flower0.visibility = "hide";
document.flower1.visibility = "hide";
document.flower2.visibility = "hide";
document.flower3.visibility = "hide";
}
// this function makes a single flower layer visible
// we have cunningly named the flower layers so we
// can tell which one to show based on the selectedIndex of the menu
function changeFlower(n) {
hideAllflowerLayers();
document.layers["flower" + n].visibility = "show";
}
</SCRIPT>
<BODY color=white>
<HR>
<H1 align="center">Welcome to Fancy Flowers Farm </H1>
<HR>
<P>We sell bulbs, seeds, seedlings, and potted plants, in all shapes,
sizes,
colors, and varieties.
This page presents information about our most popular varieties.</P>
<!-- position the form layer -->
<! -- let the top value default to the natural position -->
<DIV ID="formlayer">
<H3>Please select a flower:</H3>
<FORM NAME=form1>
<SELECT name=menu1
onChange="changeFlower(this.selectedIndex); return false;">
<OPTION >Mona Lisa Tulip
<OPTION >Mixed Dutch Tulips
<OPTION >Bijou Violet
<OPTION >Pink Chrysanthemum
</SELECT>
</FORM>
</DIV>
<!-- We have four different layers, each with different info about
flowers -->
<DIV ID="flower0">
<HR>
<H3 align="center">Mona Lisa Tulip</H3>
<P>These tulips have been specially designed to withstand late
winter frost
in areas with harsh winters.
They are a beautiful red color, and we guarantee that they'll
grow for at
least four years in a row.
Don't wait to order them, they sell fast!</P>
<BR CLEAR="ALL">
<P>Priced at only $1 a bulb, they are a bargain.</P>
<HR>
</DIV>
<DIV ID="flower1">
<HR>
<H3 align = center>Mixed Dutch Tulips</H3>
<P>These colorful tulips have been specially bred for us by Dr.
Hans Tulip in
Amsterdam.
He has spent the last ten years perfecting the hybrid. These
tulips start
blooming early, sometimes they beat the crocuses out of the
ground! </P>
<BR CLEAR="ALL">
<P>They come in a variety of intense colors, and they have a
velvety,
sweet-smelling bloom.</P>
<P>Priced at $5 for ten, these tulips are a cheap way to bring
color to your
garden. </P>
<HR>
</DIV>
<DIV ID="flower2">
<HR>
<H3 align ="center">Bijou Violets</H3>
<P>These pale purple African violets are much hardier than most
violets. You
don't need green fingers to keep these flowers thriving!
Just water them four times a day at regular intervals, and they
will thrive
forever!</P>
<P>These flowers are VERY small, the picture has been magnified
so you can
see their shape. The plants usually grow to about an inch high.
Thus they make
excellent indoor plants for tiny apartments. </P>
<BR CLEAR="ALL">
<P>The price for these lovely lilac blooms is $4 for a half inch
pot, or $10
for four pots. </P>
<HR>
</DIV>
<DIV ID="flower3">
<HR>
<H3 align="center">Pink Chrysanthemum</H3>
<P>These modern chrysanthemums look delicate but are very hardy.
They come in
a variety of colors, and they can grow to 5 feet tall.
They start blooming in autumn, and will keep flowering until the
snow falls.
So if you live somewhere that never gets snow, they'll never
stop blooming!</P>
<BR CLEAR="ALL">
<P>These flowers sell for $6 for a 4 inch pot, or $10 for 2
pots.</P>
<HR>
</DIV>
</BODY>
</HTML>
--
AcroDict : Dictionnaire francophone des acronymes informatiques
<URL:http://www.teaser.fr/~spineau/acrodict/index.htm>
Rabbitus
aussi...
CPAM de la Savoie wrote:
>
> Bonjour,
> Est-il possible, en utilisant le DHTML, de créer le même effet qu'avec
> des frames?
> Je m'explique :
> En cliquant sur un lien, je souhaite mettre à jour une seule partie de
> ma page. Peut-etre en
> jouant sur les couches?