Je
vous recommande un petit changement dans la configuration de Windows9.x pour
remédier à ce désagrément :
procédez comme ceci :Veuillez déplacer le curseur de votre souris sur le texte ci-dessous :
Le curseur change suivant sa position sur le texte
<P>
<STRONG style="cursor:hand">Le curseur change</STRONG>
<STRONG style="cursor:move"> suivant sa position </STRONG>
<STRONG style="cursor:ne-resize">sur le texte </STRONG>
</P>
Si vous testez le code ci-dessus, vous constatez en effet que l'on peut (sous Internet Explorer) attribuer une forme particulière au curseur, par l'adjonction d'un attribut de style spécifique.
L'attribut est : "cursor:" qui peut prendre la valeur "hand" pour la "petite main", comme un lien normal; "move" qui donne le signe "croix" habituel pour les déplacements et enfin, "ne-resize" qui force l'aspect normal.
Ainsi, vous pourriez (question qui m'a déjà été posée) faire en sorte que le curseur ne prenne pas la forme d'une main dans le cas de "faux-lien" par exemple (cas d'une image map qui ne doit pas comporter de lien mais du code javascript par ex.).
Donc, vous ajouter dans une feuille de style (intra-ligne, globale ou externe) l'attribut "cursor:hand" pour que la "petite main apparaisse".
De manière générale, cela serait : <img src="----" ----etc---- style="cursor:hand"> qui fera pparaître le curseur, sous forme de "main" mais je précise, sous Internet Explorer 4.x ou 5.x car actuellement, Netscape ne le reconnaît pas. La solution pour les deux navigateurs est de créer un "faux lien", une pseudo-ancre ou href="javascript://" annule l'ancre. Si vous omettez ce code de remplacement et employez ("") par exemple, sous Netscape, cela provoque la vision de l'arborescence de votre HDD ou serveur !!
Vous avez une page avec trois (ou plus) cadres : celui du "haut", de "gauche" et de "droite". Vous désirez par un lien externe dans le cadre de gauche charger deux pages, une dans le cadre du haut et une autre dans le cadre de droite, mais cela, par un seul CLIC !!
Voici le code HTML :
Chargement de deux pages, dans un écran de trois cadres
Chargement de deux pages, dans un écran de quatre cadres
Chargement de deux pages, dans un écran de cinq cadres
Pour charger trois pages...
Suivant le même principe, considérez le code suivant qui est situé dans un frame de gauche, contenant un menu (d'où est appelé les trois pages), un frame en haut contenant des bannières et un frame de droite contenant la page principale. Par un clic sur un lien situé dans le menu (frame de gauche), trois pages sont chargées, à savoir un nouveau menu, une nouvelle bannière et une nouvelle page principale.
Voici le code HTML :
<FORM>
<INPUT TYPE="button" VALUE="Retour" onClick="window.history.back();">
</FORM>
Vous créez donc ce bouton dans la page où vous êtes allé (plein écran par exemple) et vous revenez par ce bouton dans le cadre, exactement avec les pages qui étaient visualisées à ce moment (correspond à la flèche "retour arrière" du navigateur").
Cette technique ne fonctionne que lorsque vous venez de quitter le cadre : dans le cas où vous désirez donner la possibilité de revenir dans un cadre, avec des pages différentes de celle indiquées dans la définition du cadre (de départ), il faut alors créer un autre fichier de définition de cadre (identique au premier) mais dans lequel vous changez les pages chargées pour que celles-ci correspondent à celles qui vous intéressent pour le retour.
Je
vous recommande un petit changement dans la configuration de Windows9.x pour
remédier à ce désagrément :
procédez comme ceci :
Clic droit sur le bureau, dans la fenêtre "Propriétés de l'affichage", choisir l'onglet "Web".
Dans cet onglet, cliquer sur le bouton "Options des dossiers" : une fenêtre vous demandera si vous voulez fermer la fenêtre des propriétés d'affichage, pour ouvrir celle des options de fichiers. Répondez "Oui" et ensuite, la fenêtre des "Options des dossiers apparaît".
Dans cette fenêtre, choisissez l'onglet "Affichage" et vous cochez "Permettre l'utilisation des noms en majuscules".
Le principe est assez simple. Pour que l'image apparaisse en dimensions réduites, il faut placer dans le code de l'image une largeur et hauteur qui correspondent à celles qui vous intéressent, quand à leur présentation réduite. Ensuite, vous créez un lien vers le fichier de l'image elle-même, qui apparaîtra dans la bonne dimension. Voici l'exemple d'une image dont les dimensions exactes sont 122 pixels de large sur 311 pixels de hauteur : on la réduit pour une présentation de 61 de large / 155 de haut. On crée ensuite un simple lien vers le fichier de l'image lui-même, et de cette manière, après le clic, l'image apparaîtra dans ses dimensions réelles...
Voici le code :
<a href="bonhom2.gif" title="Pour visionner l'image dans des dimensions réelles...">
<img border="0" src="bonhom2.gif" width="61" height="155">
</a>
Si par contre vous possédez FrontPage 2002, c'est encore plus simple, car celui-ci vous permet de créer automatiquement ces images réduites. Insérer d'abord l'image dans votre page HTML, ensuite sélectionnez-la avec la souris, ensuite, la barre d'outil "Image" apparaît et vous cliquez sur le bouton "Créer une miniature" : automatiquement, le lien sera créé avec l'image en dimension réduite. Attention, pour certains types d'image, cela fonctionne moins bien comme celle présentée en exemple ci-dessus.
Voici un exemple qui fonctionne bien (copie écran d'une de mes chroniques) :
Vous remarquez que cette miniature apparaît en relief, c'est une des paramètres que vous pouvez décider dans Frontpage2002, en choisissant le menu "Outils/Options de page" : là aussi, vous pouvez décider des dimensions pour les miniatures, un bord etc.
Attention que le chargement de la page ne sera véritablement diminué que dans le cas, comme Frontpage, où des fichiers miniatures sont réellement créés et distincts de l'image réelle. Sinon, l'effet sera uniquement de visualiser "d'un coup" l'image réelle, tout simplement parce qu'elle aura déjà été chargée préalablement...
Voici un petit script que vous pouvez intégrer dans vos pages HTML et qui empêche la vision du code source HTML par l'action d'un clic droit. cette protection est relative mais a le mérite d'exister ;-)
Le principe est de capter l'événement "onmousedown" et d'afficher un message d'alerte [alert()] qui remplace les propriétés habituelles du clic droit de la souris, en l'occurrence la vision du code source. Ce script fonctionne sous IE ou Netscape.
Un
petit changement intervient dans le script que je proposais : en effet, un
visiteur me faisait remarquer que sous IE, en tenant le clic gauche de la souris
appuyé, on pouvait dans ce cas employer le clic droit ! La solution est donc de
désactiver également le clic gauche simultané, ce qui est fait dans le script suivant...
<SCRIPT
language=JavaScript1.1>
<!-- début
function non(clic)
{
var msg="On
est curieux ?";
if (navigator.appName
== 'Netscape' &&
clic.which==3)
{
alert(msg);
return false;}
else
if ((navigator.appName
== 'Microsoft Internet Explorer' &&
event.button==2)
| (navigator.appName
== 'Microsoft Internet Explorer' &&
event.button==3))
{
alert(msg);
return false;
}
return true;
}
document.onmousedown
= non;
// fin -->
</SCRIPT>
Le message proposé est "On est curieux ?" et vous pouvez bien sûr changer celui-ci par celui qui vous intéresse... Si vous désirez tester ce script.
Pour déterminer l'aspect de vos liens, autrement que l'apparence par défaut, il faut créer une feuille de style, dans laquelle vous spécifiez le format qui vous intéresse. Par exemple, voici une feuille de style déterminant les liens (ancres) :
|
Pour une explication détaillée sur les feuilles de style, consultez mon tutoriel "TutorDHTML".
Dans la feuille de style, présentée en exemple ci-dessus, on détermine pour toutes les ancres (liens) un police déterminée (Arial), une couleur bleue (navy). Quand ceux-ci sont "visités" (donc après "clic" sur ceux-ci), ils prennent la couleur bordeaux (maroon).
Dans cette même feuille de style, j'ai déterminé un style différent pour les liens de classe "nn" et "car". Ainsi, je peux appliquer ces styles à certains liens, soit du style "par défaut", soit du style de classe "nn" ou "car".
Attributs de style employés :
Exemple de code HTML pour le lien de classe "nn" :
<A class = "nn" HREF="page.html" title="Bulle explicative...">lien externe</A>
Pourquoi une couleur blanche pour certains liens ? Si vous désirez créer une partie de texte avec un fond de couleur sombre, il peut être intéressant de changer la couleur du lien, comme dans le code ci-dessous :
<SPAN style="background-color:#800080">
<A class = "car" HREF="javascript://" title="Bulle explicative">Liens de classe "car"</A><BR>
</SPAN>
Dans cet exemple, le fond (style="background-color:#800080") est violet...
En résumé, il vous est donc loisible de créer des styles différents pour le nombre de liens qui vous plaît, pour certains et/ou pour tous, et vous déterminez vous-mêmes quel style pour chacun d'eux...
Si vous désirez visionner une page exemple qui emploie la feuille de style de l'exemple ci-dessus...
Avant tout, ouvrez le fichier concerné dans Paint Shop Pro.
Version
6 US
Pour la transparence, réglez d’abord dans le menu (Colors) la case à cocher (View Palette transparency), de cette manière vous verrez le résultat directement à l’écran.
Choisissez l’outil « Pipette » (situé en-dessous de la baguette magique) et repérez le numéro de la couleur que vous désirez rendre transparente (Dans le menu de la palette de couleur, à droite) dernière ligne commençant par I et un numéro, par exemple I 142.
Ensuite, dans le menu Colors, cliquez sur « Set Palette Transparency » et dans la fenêtre, indiquez le numéro de couleur dans le troisième choix (set de transparency palette value entry… » : ici, tapez au clavier 142.
Après
fermeture de la fenêtre, vous constatez la transparence par une couleur spéciale
(en général, carreaux blancs et gris)…
Sauvegardez votre fichier et c’est fait…
Version 5 FR
Identique pour la version 5 mais c’est le menu « Couleurs », ensuite « Visualiser la transparence (touche Maj+V). Puis, repérez la couleur par l’outil « Pipette » et retenez le numéro de couleur (exemple I 142).
Ensuite, menu « Couleurs » de nouveau et cliquez sur « Réglage de la transparence de la Palette » : choisissez le troisième choix « Donnez à la transparence la valeur de » et tapez 142.
Vous voyez le résultat et sauvegardez votre fichier : c’est fait…
Pour visionner les différentes étapes en copie-écran (version 5 FR) (cliquez sur la miniature pour visionner l'image en grandeur réelle, pour revenir à l'explication, faites "retour arrière") :
Paramètre
de visualisation de la transparence de couleur.
Choix
de l'outil "Pipette"
Avec
l'outil pipette, choisissez la couleur transparente
Assistant
de transparence...
Choix
"3" pour la valeur de la couleur transparente
Le
résultat apparaît à l'écran
Enregistrer
sous le fichier (F12) ou "ctrl-s".
Il vous est possible de choisir dans l'assistant la couleur de fond, au lieu de taper la valeur de la couleur, mais ce ne sera pas toujours possible, c'est pourquoi j'ai choisi la troisième solution dans cet exemple.
Ajouter un lien avec ce code (exemple pour Page-Web) :
<A HREF="javascript:window.external.AddFavorite('http://rouyer.win.be', 'Page-Web (WIN) vous aide à créer votre site')">Ajouter Page-Web à vos favoris</A>
Voilà, ce n'est pas plus difficile, mais cela ne fonctionnera que pour
Internet Explorer...
Si vous voulez faire le test : Ajouter Page-Web à vos favoris
Voici le script à insérer dans l'en-tête de votre document :
<SCRIPT LANGUAGE="JavaScript">
<!--
// Charge le document en plein écran, même
s'il est chargé initialement dans un frame !
if (top.frames.length!=0)
top.location=self.document.location;
//-->
</SCRIPT>
De cette manière, même sir votre page est chargée dans un frame, celle-ci sera affichée en plein écran.
Si vous consulter la F.A.Q. IE5/IE4, vous pouvez (sous IE) faire apparaître/disparaître les questions par un clic sur la question. Cette technique, uniquement compatible IE5/4 actuellement, fait appel à la propriété "display", et surtout, à la possibilité de programmer cette propriété. En effet, Netscape connaît cette propriété, mais ne permet pas, par un script, de changer celle-ci. Pour rappel, la propriété "display", lorsqu'elle est configurée sur "none", enlève la partie du document qui en dépend du flux de celui-ci, par différence à la propriété "visibility" qui elle, n'enlève pas la partie de document du flux de celui-ci mais par contre, rend cette partie visible ou invisible [hidden (IE) ou hide (Netscape)].
var ms
= navigator.appVersion.indexOf("MSIE")
ie5 =
(ms>0)
&& (parseInt(navigator.appVersion.substring(ms+5,
ms+6))
>= 4)
Ce script détecte la version IE du navigateur du visiteur...
function doOnLoad()
//Condition : si le navigateur est bien IE5/4 >= 4
if (ie5)
{
document.all.q1.style.display="none";
document.all.q2.style.display="none";
document.all.q3.style.display="none";
}
}
Pour que l'effet soit réalisable sous IE, on rend la propriété "display" qui est par défaut (''), "none" pour IE.
<STYLE>
<!--
.Questions
{ background-Color:#F0F9FF;color:#0000FF;FONT-SIZE:11pt;
cursor:hand
}
.Qo {
FONT-SIZE:11pt;
color:#800000;cursor:hand;text-decoration:underline}
.Qo2 {
FONT-SIZE:11pt;
color:blue;cursor:hand}
.Reponses
{ FONT-SIZE:10pt
}
-->
</STYLE>
Dans cette feuille de style, on différencie les questions et les réponses, ainsi que les classes employées après les événements OnmouseOver - OnMouseOut - OnClick des questions.
Incorporer dans la balise <BODY> l'événement "onload", qui appelle la fonction "doOnload"
<body onLoad="doOnLoad()">
<P class=Questions
onmouseover="this.className='Qo'"
onmouseout="this.className='Qo2'"
onclick="document.all.q1.style.display=
document.all.q1.style.display=='none'
? ''
: 'none'"
title="Question
1">Question
1</P>
<P CLASS="Reponses"
id=q1>
Réponse
1
</P>
Quand la souris passe au-dessus de la question, la classe initiale "Questions" devient "Qo", ensuite, elle devient "Qo2". Cela permet, mais c'est facultatif, de donner une effet visuel supplémentaire...
Lorsque l'on clique sur la question, la propriété "display" du paragraphe identifié (par exemple, pour la question 1 : q1) change. Si celle-ci est none (paragraphe non visible) deviendra '' (par défaut, c'est-à-dire visible) : attention, ce sont deux apostrophes, parce que des guillemets sont déjà employés dans le script, pour l'événement.
Il faut absolument "identifier" chaque réponse, car le script employé dans chaque question y fait référence. En effet, c'est par un clic sur chaque question précisément, que la bonne réponse doit apparaître...
Il faudra donc créer autant d'identifiants que de questions-réponses et lier, dans le script intra-ligne de la question, l'identifiant de la réponse correspondante (q1,q2,q3...)
Voilà, cela devrait vous aider à réaliser ces pages questions-réponses, et vous pouvez également visionner une page exemple.