Astuces Liens Maîtrisez vos liens et leur apparence. Au sommaire de cet article : Un lien qui envoie un mail à plusieurs destinataires La couleur des liens dans une page Un lien sur un point précis d'une page Un fond de couleur derrière les liens au passage de la souris Forcer l'objet d'un e-mail Un lien qui change de couleur Remplir le corps d'un mail à partir d'un lien Un bouton pour afficher le code source d'une page Des liens sans soulignement Un lien vers un newsgroup Des sons au survol d'un lien Un lien en appel direct en WML Paramétrer l'apparence de vos liens Copyright 2002 Lycos France SA. Tous droits réservés.
Un lien qui envoie un mail à plusieurs destinataires Vous désirez qu'en vous envoyant un e-mail, les visiteurs de votre site l'envoient également vers une deuxième adresse (ou vers trois, quatre... autres adresses)? Utilisez le code HTML suivant : <A HREF="mailto:Mon_Adresse?cc=Autre_Adresse">Texte de Lien</A> où Mon_Adresse est l'adresse e-mail qui apparaîtra dans la zone Destinataire de la fenêtre de message, et Deuxième_Adresse l'adresse qui sera précisée dans la zone des destinataires en copie. Pour préciser plus d'un destinataire en copie, placez simplement les adresses les unes à la suite des autres, en les séparant par un point-virgule : <A HREF="mailto:Mon_Adresse?cc=Autre_Adresse1;Autre_Adresse2;Autre_Adresse3">Texte de Lien</A> e-formation Webmaster 2/15
La couleur des liens dans une page Dans la balise <BODY>, paramétrez une fois pour toute l'apparence de vos liens grâce aux attributs LINK, VLINK et ALINK : <BODY LINK="#2379EF" VLINK="#E51148" ALINK="#73C6F1"> LINK concerne la couleur du lien par défaut ALINK sa couleur au moment où vous le cliquez VLINK sa couleur une fois visité. Toutes ces couleurs sont exprimées en valeurs hexadécimales. e-formation Webmaster 3/15
Un lien sur un point précis d'une page Pour créer un lien vers un point précis d'une page (et non tout en haut de la page comme c'est habituellement le cas), placez une ancre à l'endroit de la page sur lequel vous voulez pointer : <A NAME="ancre">Le texte sur lequel on pointe</a> Où ancre est le nom de l'ancre que l'on utilisera pour pointer sur cette partie de la page. Créez ensuite les liens hypertexte qui pointeront à cet endroit : <A HREF="page.html#ancre">Lien</A> Où page.html est la page sur laquelle pointe le lien, et où ancre est le nom de l'ancre que vous avez défini sur cette même page. e-formation Webmaster 4/15
Un fond de couleur derrière les liens au passage de la souris Placez dans l'en-tête du document HTML (entre les balises <HEAD> et </HEAD>) : <style> <!-- #effet a:hover{background-color:"couleur"} --> </style> consulter le site de WDG où couleur est le code hexadécimal de la couleur de votre choix. Pour une liste des codes hexadécimaux. Utilisez ensuite le code suivant pour les liens auxquels vous souhaitez appliquer cet effet : <span id="effet"><a HREF="#"style="text-decoration:none"><A HREF="votre_page.html">Votre lien</a> e-formation Webmaster 5/15
Forcer l'objet d'un e-mail Si vous placez plusieurs liens vers votre e-mail sur vos pages Web, vous vous y retrouverezplus facilement en forçant l'objet des messages. Vous pourrez ainsi créer des filtres correspondants aux différents objets dans votre logiciel de mail, de façon à classer les messages que vous recevez selon leur objet. Pour forcer l'objet du message dans la fenêtre de nouveau message qui s'affiche lorsque le visiteur clique sur le lien, utilisez le code suivant : <HREF="mailto:Mon_Adresse?subject=Le_sujet">Lien</A> où Mon_Adresse est votre adresse mail et Lien le texte cliquable qui entraînera l'ouverture de la fenêtre de nouveau message. Par défaut, l'objet de la fenêtre de message affichée sera Le_Sujet que vous aurez spécifié. AttentionIl est recommandé de ne pas utiliser d'espace dans le texte de l'objet du message. Ceux-ci ne sont en effet pas toujours bien gérés. e-formation Webmaster 6/15
Un lien qui change de couleur Pour qu'un lien change de couleur au passage de la souris, rajoutez la balise suivante après la commande <A HREF> du lien en question : <A HREF="lien.html"><font onmouseover="this.style.color='#ffffff'" onmouseout="this.style.color='#000000'">lien</font></a> Où lien.html est le nom de la page vers laquelle pointe votre lien et #FFFFFF ou #000000, le nom des couleurs qui vous désirez, en hexadécimal. Attention Compatibilité Ce script ne fonctionne qu'avec Internet Explorer, versions 4.0 et ultérieures. Illustration : e-formation Webmaster 7/15
Remplir le corps d'un mail à partir d'un lien Nous avons déjà vu lors d'une astuce précédente qu'il est possible de forcer l'objet du message dans la fenêtre de nouveau message affichée par un lien hypertexte. Vous pouvez également afficher un texte par défaut dans le corps du message. Utilisez pour cela le code suivant : <A HREF="mailto:Mon_Adresse?BODY=texte">Lien</A> Où Mon_Adresse est votre adresse e-mail et texte, le texte qui sera affiché dans le corps du message. Lien correspond à l'intitulé du lien.vous pouvez combiner un corps de message par défaut avec un objet par défaut, en faisant suivre directement les attributs subject et body, séparés par une esperluette (le signe & : <A HREF="mailto:Mon_Adresse?subject=Le_sujet&ODY=texte">Lien</A> e-formation Webmaster 8/15
Un bouton pour afficher le code source d'une page Si vous voulez facilement donner l'accès à votre code source, ajoutez ces quelques lignes à l'endroit voulu dans votre code HTML : <FORM> <INPUT TYPE=button NAME="view" VALUE=" Visualiser le code source " OnClick='window.location="view-source:" +window.location.href'> </FORM> Exemple : e-formation Webmaster 9/15
Des liens sans soulignement Pour des raisons d'élégance, ou dans le cadre d'une charte graphique particulièrement élaborée, vous souhaitez inhiber le soulignement automatique des liens? Une commande très simple vous permet d'obtenir ce résultat : placez, dans l'en-tête du document (entre les balises <HEAD> et </HEAD>), les lignes suivantes : <style> <!-- a{text-decoration:none}//--></style> Si vous voulez que le soulignement réaparaisse au passage de la souris sur le lien, ajouter ces quelques lignes à la suite des précédentes : <style><!--a:hover{text-decoration:underline;}--></style> Une fois ces styles intégrés, l'ensemble des liens de vos pages ne sont plus soulignés! Note Compatibilité. La deuxième partie de l'astuce n'aura aucun effet sous Netscape 4. e-formation Webmaster 10/15
Un lien vers un newsgroup Créer un lien vers un site Web, vous savez. Un lien vers une adresse mail, vous savez aussi. Mais savez-vous créer un lien qui pointe directement un newsgroup? C'est pourtant facile... Les liens vers les newsgroups utilisent simplement le préfixe news: devant l'adresse du newsgroup en question. Ainsi pour accéder au newsgroup officiel de Macromedia concernant Dreamweaver : <a href="news:macromedia.dreamweaver">rejoindre le newsgroup</a> Vous pouvez également forcer le serveurs que devra utiliser ce lien. Pour cela, précisez simplement que vous utilisez le protocole news:// suivi du nom du serveur et du nom du newsgroup. Ainsi, pour spécifier que ce lien n'utilise que le serveur de news de Macromedia : <a href="news://forums.macromedia.com/macromedia.dreamweaver">rejoindre le newsgroup</a> Ces deux types de liens ouvriront automatiquement votre lecteur de news sur le serveur et le newsgroup correspondant. e-formation Webmaster 11/15
Des sons au survol d'un lien Et si le survol des liens de votre site était signalé par un petit son? Insérez ce petit programme JavaScript dans l'entête de votre page : <script LANGUAGE="JavaScript"> <!-- var aysound = new Array(); aysound[0] = "mon_son.wav"; document.write('<bgsound id="auiecontainer">') IE = (navigator.appversion.indexof("msie")!=-1 && document.all)? 1:0; NS = (navigator.appname=="netscape" && navigator.plugins["liveaudio"])? 1:0; ver4 = IE NS? 1:0; onload=aupreload; function aupreload() { if (!ver4) return; if (NS) auemb = new Layer(0,window); else { Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>"; document.body.insertadjacenthtml("beforeend",str); } var Str = ''; for (i=0;i<aysound.length;i++) Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>" if (IE) auemb.innerhtml = Str; else { auemb.document.open(); auemb.document.write(str); auemb.document.close(); } aucon = IE? document.all.auiecontainer:auemb; aucon.control = auctrl; } function auctrl(whsound,play) { if (IE) this.src = play? aysound[whsound]:''; else eval("this.document.embeds[whsound]." + (play? "play()":"stop()")) } function playsound(whsound) { if (window.aucon) aucon.control(whsound,true); } function stopsound(whsound) { if (window.aucon) aucon.control(whsound,false); } //--> </script> L'ensemble des sons utilisés sur la page sont définis dans le tableau aysound. Si vous souhaitez utiliser plus de sons, ajoutez une ligne de ce type : aysound[0]="mon_son.wav"; Remplacez 0 par le numéro de son dans le tableau et mon_son.wav par le fichier son que vous souhaitez intégrer (et son chemin complet si nécessaire). Définissez ensuite chacun de vos liens de la manière suivante : <A HREF="YourPage.html" onmouseover="playsound(0)" onmouseout="stopsound(0)">votre lien ici!</a> Remplacez 0 par le numéro du son que vous voulez associer au lien. Admirez l'efficacité Attention e-formation Webmaster 12/15
Compatibilité. Pour que ce script fonctionne avec Netscape, il faut que le plug-in LiveAudio soit activé! e-formation Webmaster 13/15
Un lien en appel direct en WML Les pages WML sont faites pour être vues sur un téléphone portable, et les téléphones portables sont faits avant tout pour téléphoner. Mixer ces deux usages et proposer un lien vers votre propre numéro de téléphone sur votre site Wap. Placez simplement un lien de ce type sur la carte que vous désirez sur votre paquet Wap : <a href="wtai://wp/mc;+33000000000">appelez-moi!</a> Remplacez simplement la suite de 0 par votre numéro de téléphone (en supprimant le premier 0 de celui-ci). Vous pouvez également modifier le texte du lien en question (ici Appelez-moi!). Quand vos visiteurs cliqueront sur ce lien, leur téléphone composera automatiquement votre numéro pour vous contacter. Pratique non? e-formation Webmaster 14/15
Paramétrer l'apparence de vos liens Vous pensez que les liens uniformisent l'esthétique des pages web? Vous ne connaissez sans doute pas toutes les richesses des feuilles de style. Grâce à elles, vous pouvez paramétrer une bonne fois pour toutes l'apparence de vos liens, et leur apporter certaines décorations. Placez les lignes suivantes dans votre code HTML, entre les balises <HEAD> et </HEAD> : <style TYPE="text/css"> <!--A:link {text-decoration: none; color: #000000} A:visited {text-decoration: none; color:#000000} A:active {text-decoration: normal} A:hover {color:#000000; font-weight: normal} --> </style> Chaque ligne correspond à un état du lien (normal, visité, actif, au passage de la souris), et vous pouvez, à chaque fois, modifier les couleurs, inhiber la présence d'un soulignement ou choisir la taille du texte. Les codes couleurs précédés d'un dièse sont en hexadécimal. Vous pourrez consulter les valeurs hexdécimales de toutes les couleurs sur le site de WDG. Les valeurs de text-decoration peuvent être none, comme c'est le cas ici, ou underline, pour conserver le soulignement du lien. La valeur de font-weight permet par exemple de créer un effet de grossissement en précisant bold après les deux points. e-formation Webmaster 15/15