Comment créer un
popup “instoppable” par les navigateurs
web et qui se déclenche par un clic de souris
avec le logiciel Macromedia Dreamweaver
Vous savez tous actuellement que les navigateurs
comme Mozilla Firefox, Opera ou autres stoppent
les fenêtres popups par défaut. Pourtant
les popups sont très efficaces sur les pages
web pour attirer l’attention de l’internaute.
Heureusement, il est toujours possible de faire
un popup via le DHTML (Dynamic HTML) avec l’utilisation
des calques. Les popups créés de cette
manière ne peuvent pas être bloqués
par les navigateurs (seuls les popups créés
avec la fonction « open » de Javascript
sont bloqués).
Note : lors de cet exercice, nous allons utiliser
la version MX de Dreamweaver (version 6.0) et l’évènement
« onclick » de Javascript.
Ouvrez votre page avec Dreamweaver et cliquez sur
le menu Insérer, puis choisissez Calque (Layer
en anglais). Le calque (qui va être votre
popup) va apparaître sur la page, vous pouvez
le déplacer, le redimensionner, écrire
dedans, etc.
Puisque le popup ne sera visible que si un bouton
est cliqué, rendez-le tout d’abord
invisible par le panneau de Propriétés
(CTRL-F3) et changez l’attribut « Vis
» en « hidden »
Créer un bouton sur la page afin que le
clic sur ce bouton déclenche l’apparition
du popup (notez que vous pouvez utiliser n’importe
quel évènement javascript aussi).
Maintenant, allez dans le code source et repérez
la balise <DIV> contenant le calque, notez
son nom, qui est indiqué par l’attribut
« id » (généralement,
Dreamweaver nomme les calques Layer1, Layer2, etc).
Ecrivez cette fonction qui va rendre le calque
visible entre les balises <HEAD> et </HEAD>
:
<script language="JavaScript"
type="text/JavaScript">
function Affiche() {
var divns6 = document.getElementsByTagName("div")
divns6['Layer1'].style.visibility = 'visible';
}
</script>
Modifiez le « Layer1 » suivant le nom
de votre calque.
Ensuite, repérez le code du bouton dans
la source de la page, il doit être comme ceci
:
<input type="button" name="Button"
value=”Bouton”>
Il suffit enfin d’ajouter “onclick”
dans le code du bouton et le tour est joué
:
<input type="button" name="Button"
value=”Bouton” onclick=”Affiche()">
