Mon premier blogue
Comment fonctionne mon blogue sur blogger.com?
Pour ce cinquième et dernier blogue, nous devons nous poser la question suivante : << comment fonctionne mon blogue sur blogger.com? >>.
Pour ce faire, nous devons effectuer une recherche sur les composantes techniques de nore blogue en faisant des expérimentations et en relevant sur celles-ci.
Dans cet exercice, j'apporterai deux changements à mon blogue soient la possibilité d'avoir des fenêtres pop-up lorsqu'on clique sur une image de mon blogue et d'ajouter un menu déroulant au lieu des listes non-ordonnées pour mes listes de liens.
Pour pouvoir intégrer des fenêtres pop-up dans notre blogue, nous devons faire appel au fonction JavaScript. La fonction JavaScript qui permet d'ouvrir une fenêtre pop-up comporte plusieurs paramètres qui permettent de contrôler le comportement de l'objet window d'une commande JavaScript.
Voici donc cette fonction :
Avant d'expliquer le fonctionnement de cette fonction, permettez-moi de vous indiquer la procédure à suivre pour intégrer des fonctions javascript dans notre blogue.
1- La section
doit être incorporé dans le modèle de notre blogue seulement et sous la balise title
< title >< $BlogPageTitle$ >< /title >
C'est dans le modèle que chaque message fera appel à la fonction JavaScript
2- Ensuite, nous devons faire un appel à cet fonction dans chaque message désirant utiliser la fonctionnalité de fenêtre pop-up. Pour ce faire, nous devons modifier le code suivant :
< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL de l'image">< /a>
PAR
< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:openAndCenterWindow('URL de l'image');">< /a>
Comme vous pouvez le constater, la valeur de href de l'attribut onblur a été modifié par un appel d'une fonction javascript.
Explication de la fonction JavaScript :
Les différents paramètres d la fonction JavaScript openAndCenterWindow sont les suivants:
width indique la hauteur de la fenêtre pop-up,
height indique la hauteur de la fenêtre pop-up,
status indique si oui ou non l'état de la fenêtre sera affiché,
resizable indique si oui ou non on pourra redimentionner la fenêtre,
scrollbars indique si oui ou non une barre de défilement sera présente.
Vu du résultat d'une fenêtre pop-up :
La portion onclick de ce code permet d'envoyer l'adresse URL du site (spécifié par l'attribut value de option) à l'aide de la variable location qui indique la portion adresse URL du fureteur. L'utilisation de la balise form est nécessaire pour définir un menu déroulant.
Au plaisir!
Martin
Pour ce faire, nous devons effectuer une recherche sur les composantes techniques de nore blogue en faisant des expérimentations et en relevant sur celles-ci.
Dans cet exercice, j'apporterai deux changements à mon blogue soient la possibilité d'avoir des fenêtres pop-up lorsqu'on clique sur une image de mon blogue et d'ajouter un menu déroulant au lieu des listes non-ordonnées pour mes listes de liens.
Pour pouvoir intégrer des fenêtres pop-up dans notre blogue, nous devons faire appel au fonction JavaScript. La fonction JavaScript qui permet d'ouvrir une fenêtre pop-up comporte plusieurs paramètres qui permettent de contrôler le comportement de l'objet window d'une commande JavaScript.
Voici donc cette fonction :
function openAndCenterWindow(the_url)
{
var the_window =
window.open(the_url,"the_window","width=540,height=580,
status=yes,resizable=yes,scrollbars=yes");
var screen_height = window.screen.availHeight;
var screen_width = window.screen.availWidth;
var left_point = parseInt(screen_width / 2) -100;
var top_point = parseInt(screen_height / 2) -100;
the_window.moveTo(left_point, top_point);
}
Avant d'expliquer le fonctionnement de cette fonction, permettez-moi de vous indiquer la procédure à suivre pour intégrer des fonctions javascript dans notre blogue.
1- La section
< script language="JavaScript" type="text/JavaScript">
...
< /script >
doit être incorporé dans le modèle de notre blogue seulement et sous la balise title
< title >< $BlogPageTitle$ >< /title >
C'est dans le modèle que chaque message fera appel à la fonction JavaScript
2- Ensuite, nous devons faire un appel à cet fonction dans chaque message désirant utiliser la fonctionnalité de fenêtre pop-up. Pour ce faire, nous devons modifier le code suivant :
< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL de l'image">< /a>
PAR
< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="javascript:openAndCenterWindow('URL de l'image');">< /a>
Comme vous pouvez le constater, la valeur de href de l'attribut onblur a été modifié par un appel d'une fonction javascript.
Explication de la fonction JavaScript :
Les différents paramètres d la fonction JavaScript openAndCenterWindow sont les suivants:
width indique la hauteur de la fenêtre pop-up,
height indique la hauteur de la fenêtre pop-up,
status indique si oui ou non l'état de la fenêtre sera affiché,
resizable indique si oui ou non on pourra redimentionner la fenêtre,
scrollbars indique si oui ou non une barre de défilement sera présente.
Vu du résultat d'une fenêtre pop-up :
;)
Pour ce qui est du deuxième changement à savoir ajouter un menu déroulant pour une liste de liens, le code est assez simple. Il suffit d'utiliser la balise select avec comme option chacune des adresses URL. Par contre, la petite difficulté est de savoir comment faire appel au site Web une fois le choix effectué.
Voici le code HTML du menu déroulant en question :
< div class='widget-content'>
< form name="Test" method="POST">
< p>< strong>Sélectionner le site Web désiré< /strong>< /p>
< p>< select name="D1" size="1" >
< option value="http://ccdmd.qc.ca/"/> Centre Collégial de développement de matériel didacticiel
< option value="http://profs.cmaisonneuve.qc.ca/hbenameurlaine/861/"/> Cours 861 - Système d'exploitation
< option value="http://www.louvre.fr/llv/commun/home_flash.jsp"/> Le musée du Louvre
< option value="http://www.microsoft.com/"/> Microsoft
< /select>
< input value=" Go "
name="B1" onclick="location=Test.D1.options[Test.D1.selectedIndex].value" type="button"/> < /p>
< /form>
< /div >
La portion onclick de ce code permet d'envoyer l'adresse URL du site (spécifié par l'attribut value de option) à l'aide de la variable location qui indique la portion adresse URL du fureteur. L'utilisation de la balise form est nécessaire pour définir un menu déroulant.
Au plaisir!
Martin
publié par Martin Pelletier à
10 h 21
;)
;)
;)
;)
;)
;)
;)
;)
;)
