Recherchez   Aide 
Mise à jour le vendredi 24 septembre 2010

Fiche DOM: Popup  Logo Applications

Objet de la fiche : Correction exercice

Retour au cours Retour au cours

Rappel de l'exercice


La Boutique du Fleuriste est une société de vente de fleurs en ligne mais possède aussi une activité de voyagiste via son site boutiquedufleuriste-voyage.com. Lorsque l'on accède à La Boutique du Fleuriste il serait intéressant de faire connaître aux internautes qu'il existe aussi cette activité voyage. Dans un premier temps l'exercice consiste à faire apparaître un popup en même temps que la page d'accueil.

Pour cela on va créer une page html qui sera le popup et que l'on nommera popupvoyage.htm , que l'on placera dans la racine du site (au même niveau que index.html). Le popup contiendra une image popupVoyage.png située dans le répertoire Images/Site et un bouton Fermer que l'on situera en bas à droite.

Le déclenchement de l'apparition du popup est réalisé à la fin du chargement de la page principale (index.html) sur l'évènement onload (sur body) que l'on verra plus tard et dont voici la syntaxe :

<body onload="window.open( 'popupvoyage.htm', 'Pub', 'width=285,height=320,top=50,left=50')">

Le résultat doit donner un popup du style ci-dessous.


Correction

Construction du popup

On crée la page html qui sera le popup ayant pour nom   popupvoyage.htm (dans la racine du site).

 

<!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>
<title>Boutiquedufleuriste-voyage.com</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {font-size:100%}
body {font-size:0.8em;font-family:Arial,Helvetica,Verdana,Tahoma, 'MS Sans Serif';
color:black; cursor: default;margin:0em;padding:0em;background-color:#333333;}

#Contener {width:22em;height:30em;margin:auto}
#Contener #Fermer {position:absolute;top:93%;left:74%;cursor:pointer;}
#Image {border:none;}
</style>

<script type="text/javascript">
<!--
if(window.focus) {window.focus()};
-->
</script>
</head>

<body>
<div id="Contener">
<input title="Fermer le popup" id="Fermer" type="button" value="Fermer" onclick="window.close()"/>
<div><img id="Image" src="Images/Site/popupVoyage.png" width="279" height="320" alt="" /></div>
</div>
</body>
</html>

Activation du popup

<body onload="window.open( 'popupvoyage.htm', 'Pub', 'width=285,height=320,top=50,left=50')">

.