Afficher ou Masquer un calque
C'est drolement bien un blog Google...;)
quand je pense que certains continuent a se galerer chez Msn... Tout ca pour ne pas perdre leurs habitudes (=D
calque
Les explications comprennent trois points (cliquer sur le titre pour y acceder) - Définition du calque
Il faut tout d'abord prendre en considération le code du calque
<div id="Layer1" style="position:absolute; width:200px;
height:115px; z-index:1; visibility: hidden">contenu du calque</div>
- l'attribut id="valeur" est utilisé pour donner un nom au calque, dans le cas ou il y en ait plusieurs
- l'attribut style="valeur" est utilisé pour definir les options de mise en forme
- le contenu du calque peut etre n'importe quel objet (image texte...)
Je ne vais pas entrer dans l'explication de tous les attributs possibles que peut prendre l'attribut style d'un calque, un prochain billet lui sera entierement consacré...
Voyons cependant ceux qui nous interessent
- position="valeur" est utilisé pour definir la position du calque, il peut prendre deux valeurs:
- absolute pour lui donner des coordonnées par rapport a la page
- relative pour lui donner des coordonnées par rapport a son emplacement d'origine (par exemple s'il est codé au milieu de la 3é ligne, ses coordonnées partiront de ce point...plus de details dans l'explication des calques)
- les attributs width="valeur" et height="valeur" sont les attributs classiques de dimensionnement , je rappel que height definit la hauteur d'un objet (ici le calque) et width definit sa largeur
- l'attribut z-index="valeur" determine les niveaux en cas de superposition de calques, plus la valeur est élevée plus le calque se trouve au dessus des autres,
par exemple un calque avec un z-index=2 se trouverait au dessus d'un calque avec une valeur de z-index=1 et en dessous d'un calque de z-index=3
(note la valeur de z-index peut etre négative) - l'attribut visibility="valeur" nous permet de definir la visibilité de départ du calque, il peut prendre plusieurs valeurs:
- visible pour que le calque soit visible lors de l'affichage de la page
- hidden pour que le calque soit masqué, lors de l'affichage de la page
- il existe deux autres valeurs qui sont inherit et defaut, elles seront abordées dans le billet d'explication complet des calques (a venir)
- Définition des liens
Voici le code pour definir les liens
<a href="javascript:" onClick="MM_showHideLayers('Layer1','','show')">Objet
pour Afficher</a>
<a href="javascript:" onClick="MM_showHideLayers('Layer1','','hide')">Objet
pour Masquer</a>
<a href="javascript:" onMouseOver="MM_showHideLayers('Layer1','','show')"
onMouseOut="MM_showHideLayers('Layer1','','hide')">Objet à
Survoler</a>
Les trois codes ayant de fortes ressemblances, je ne ferai qu'une explication d'ensemble
- on reconnait la balise de lien <a href="valeur"> sauf qu'on annonce ici que le lien sera un code javascript (cela ne fonctionnera donc pas chez les personnes ayant supprimé le javascript ou les navigateurs qui ne le supportent pas...comme par exemple mozilla qui râle)
- je passe directement a l'objet sur lequel porte le lien, ce peut etre un texte, une image, un bouton ...
- enfin le reste du code que j'isole soit onclic="MM_showHideLayers('Layer1','','show')" est ce qu'on appel un comportement, on peut l'assimiler (en language) a un attribut="valeur"
il existe une grande quantité de comportements comme par exemple ceux utilisés- onClic pour definir que l'action sera porté sur le clic
- onMouseOver l'action se fera au survole de l'objet
- onMouseOut l'action se fera lorsque la souris ne pointera plus l'objet
mais il en existe plein d'autre comme onLoad, onMouseDown, onMouseUp,onBeforeUnload... Je ferai peut etre une liste plus tard
Il ne nous reste plus qu'a definir la "valeur" du comportement soit MM_showHideLayers('Layer1','','show')- MM_showHideLayers c'est le nom du script qu'il faut appeller avec les valeurs sur lesquelles il faut agir soit
- Layer1 c'est le nom du calque sur qui faire les changements
- show c'est la nouvelle valeur que doit prnedre l'objet, dans cet exemple c'est afficher
toutes ces valeurs sont en fontion du script exprimé dans la troisieme partie
Tout ca a l'air Bieeeeeen compliqué, en fait non :
dans la pratique il nous suffit de copier/coller ce code dans le lien, on aura plus qu'a en changer les comportements pour prendre la valeur que l'on souhaite,
Il nous faut ensuite dire sur quel calque l'action devra s'effectuer, dans la pratique il n'y en aura pas 50...
Et enfin lui donner la valeur finale que l'action doit faire c'est a dire que l'on doit jouer sur 3 parametres
<a href="javascript:" onMouseOver="MM_showHideLayers('Layer1','','show')"
le comportement il peut y en avoir plusieurs, mais a prioris on saist ce que l'on désire...
le nom du calque, pourquoi se compliquer la vie...Layer1 Layer2 Layer10 Layer100...
le troisieme parametre peut etre show (montrer) ou hide (masquer)
pour approfondir ("naaaan 
"), et remarquer sur l'exemple du lien survolé que l'on peut effectuer plusieurs actions pour un meme lien ou alors plusieurs liens sur la meme action, mais on verra ca plus tard...
- Définition du code javascript
Voici le code javascript a mettre en en-tete, entre les balises <head> et </head> de la page, donc dans le theme (attention cependant a ne pas mettre le code dans les balises de style <style> et </style>, sinon, cela ne fonctionnerait pas...)
<html>
<head>
<style>
</style>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
</body>
</html>
T'inquietes 
lis la suite
Recopier simplement le code javascript qui se trouve entre les balises de scripts <script language="JavaScript"> et </script>, le reste du code, je l'ai mis simplement pour identifier l'emplacement ou il faut ajouter le code javascript dans la page...(pour eviter que des gens ne cherchent a le mettre dans un billet lol) cette astuce est donc exclusive pour les personnes ayant acces a l'ensemble de leur page comme les utilisateurs des blogs Google (qu'attendez vous pour changer?)
Il me parait evident que je ne vais pas entrer dans le detail du script...principalement parce que je n'en suis pas capable, mais aussi parce que ce n'est pas forcement utile, les scipts sont la pour nous faciliter la vie, un peu comme une telecommande, pas besoin de savoir comment ca fonctionne pour pouvoir l'utiliser...(=D
J'ai obtenu ce code en quelques clic avec Dreamweaver
N'oubliez pas d'utiliser des outils dédiés par exemple on peut retoucher des images avec le html (redimentionner, mettre des options de transparence de symetrie), mais il est souvent bien plus simple et bien plus complet d'utiliser un logiciel dédié type photoshop
Je rappel l'existence d'un systeme d'edition de page web gratuit et en ligne, bien connu (de nom) des utilisateurs des espace msn qu'est le Edit it, tres pratique par exemple pour créer rapidement des tableaux et en obtenir le code Html...
Ehoo c'est fini
bon bah voila j'espere que cette astuce plaira...
Billet publié par Krom à 12:40
Meme Catégorie
Lien Permanent
Ajouter un commentaire
Ajouter un commentaire
<< Masquer les Commentaires