IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Liens
        Comment changer la couleur d'un lien lors d'un évènement ?
        Comment changer la police de caractères d'un lien ?
        Comment faire un lien pour le téléchargement d'un fichier ?
        Comment ouvrir un fichier excel à partir d'un lien hypertexte ?
        Comment réaliser des liens internes sur une même page ?
        Comment supprimer le cadre d'une image quand celle-ci est definie dans un lien ?
        Comment supprimer le soulignement d'un lien ?
        Quelles sont les propriétés qui permettent d'ouvrir un lien dans la même fenêtre ou dans une fenêtre différente ?



Comment changer la couleur d'un lien lors d'un évènement ?
auteurs : Giminik, Linaa
Il faut utiliser les pseudo-classes de la balise <a> :
  • active : actif lors du clic sur le lien
  • focus : actif lorsque que le lien reçoit la focalisation (obtenue à l'aide de la touche TAB).
  • hover : actif lors du survol
  • link : état par défaut du lien
  • visited : actif quand le lien a déjà été cliqué

Définitions des styles dans la feuille CSS :
/* propriétés pour la balise a */
a {
  color : #0000FF;
  text-decoration : none;
}

/* :active permet de définir les propriétés d'un lien actif - qui vient d'être cliqué */
a:active {
  color : #0000FF;
  text-decoration : none;
}

/* :focus permet de définir les propriétés des liens lorque l'on passe d'un lien à un autre
avec la touche [TAB] */
a:focus {
  color : #0000FF;
  text-decoration : none;
  background-color : #CCCCCC;
}

/* :hover permet de définir les propriétés du lien au survol de celui-ci */
a:hover {
  color : #FF0000;
  text-decoration : underline;
}

/* :link permet de définir les propriétés des liens */
a:link {
  color : #0000FF;
  text-decoration : none;
}

/* :visited permet de définir les propriétés des liens déjà visités */
a:visited {
  color : #0000FF;
  text-decoration : none;
}
Et dans la page HTML :
<a href="lien.html">Mon lien</a>
Notes :
  • Il faut également définir les styles pour la balise <a> (pas seulement les pseudo-classes).
  • Ne fonctionne qu'avec Internet Explorer 4, Netscape 6, Opera 4 et versions supérieures.
  • La pseudo-classe focus n'est pas reconnue par Internet Explorer.


Comment changer la police de caractères d'un lien ?
auteur : Géronimo
Deux solutions :
<head>
  <style>
    a.maclasse 
    {
      color: #00FF00;
      font-size: 20pt; 
    } 
  </style> 
</head> 
<body>
  Lien en vert et très gros : <a class="maclasse" href="mapage.htm">Mon lien</a>
</body>
ou
<a href="mapage.htm"><font size=5 color="#00FF00">Hello</font></a>
Toutefois, la première solution est la meilleure. La balise <font> va devenir obsolète à terme. Quasiment tous les navigateurs prennent en charge les feuilles de style, qui sont beaucoup plus puissantes que les simples balises html.


Comment faire un lien pour le téléchargement d'un fichier ?
auteur : Giminik
Pour provoquer le téléchargement d'un fichier, on utilise les liens hypertextes.

Exemple :
<a href="ton_fichier.zip">le texte du lien</a>
Note : pour être sûr que le navigateur fera une demande de téléchargement du fichier, il est préférable que le fichier soit un fichier .zip


Comment ouvrir un fichier excel à partir d'un lien hypertexte ?
auteur : Eric Berger
C'est très simple :
<a href="monfichier.xls">ouvrir mon fichier</a>
Lorsque le visiteur cliquera sur ce lien, le document s'ouvrira automatiquement.
Si Excel n'est pas installé sur le poste client, le navigateur va lui proposer de télécharger le fichier, car il ne connaîtra pas l'application adéquate pour ouvrir un fichier xls.

Note : ce système est valable également pour des fichiers .doc, .pdf et bien d'autres.


Comment réaliser des liens internes sur une même page ?
auteur : Jérôme
Il faut pour cela utiliser les ancres.

Dans la page (X)HTML, on a un lien qui pointe vers un endroit particulier de la page, là où se situe l'ancre. Le lien est composé de deux parties, une partie comprenant le nom de la page, et l'autre partie, précédé d'un #, spécifiant le nom de l'ancre.
Code (X)HTML du lien
<a href="ma_page.html#haut">Haut de page</a>
On spécifie l'ancre avec l'attribut id dans l'élément lien <a>, à l'endroit voulu (Ici, en haut de page).
Code (X)HTML de l'ancre
<a id="haut">Vous êtes en haut !</a>
Notes :
  • Il est également possible d'ajouter un lien vers un lien interne d'une autre page.
  • L'attribut name n'existe plus pour les balises <a> en XHTML.


Comment supprimer le cadre d'une image quand celle-ci est definie dans un lien ?
auteurs : Florian, MasterOfChakhaL
L'attribut border spécifie l'épaisseur de la bordure d'un objet. Pour enlever le cadre, il suffit de définir l'épaisseur à la valeur 0.
<a href="ma_page.html"><img src="mon_image.gif" border="0" /></a>
Il est également possible d'utiliser la propriété CSS border-width pour supprimer le cadre entourant l'image.
a img { 
  border-width : 0; 
}
On peut aussi trouver les formes raccourcies suivantes :
a img { 
  border : 0; 
}
a img { 
  border : none; 
}
Note : Le sélecteur a img permet de spécifier les styles pour les balises img à l'intérieur d'une balise a.


Comment supprimer le soulignement d'un lien ?
auteur : Linaa
Il faut utiliser la propriété text-decoration en CSS, qui peut prendre pour valeur :
  • underline : souligné en dessous
  • overline : souligné au dessus
  • line-through : barré
  • blink : clignotement (pour navigateur récent, IE exclu donc)
  • none : pas de soulignement (ce que l'on veut)
Code CSS
a, a:link, a:visited, a:active, a:focus, a:hover { 
  text-decoration : none; 
}

Quelles sont les propriétés qui permettent d'ouvrir un lien dans la même fenêtre ou dans une fenêtre différente ?
auteur : Jérôme
Pour ouvrir un lien dans une nouvelle fenêtre il faut utiliser l'attribut target (qui signifie cible).

Exemple :
<a href="page.html" target="_blank">
Ce code ouvrira la page page.html dans une nouvelle fenêtre de l'explorateur.

Le champ target a plusieurs valeurs possibles :
  • _self : pour afficher dans la page courante.
  • parent : pour afficher dans la page mère.
  • _blank : pour afficher dans une nouvelle page.
  • _top : pour afficher dans la fenêtre qui contient tous les éventuels jeux de cadres, celle qui est au-dessus de toutes les autres.
  • nom_de ma frame : pour afficher dans la frame ainsi nommée.

En XHTML, l'attribut target de la balise <a> est invalide, cependant il existe une petite manipulation bien pratique, qui requiert du code JavaScript, mais qui permet de le contourner.

Voici les codes pour chaque valeur de target :
  • _self :
<a href="la_page.html" onclick="window.self.location.href=this.href; return false;">cliquez-ici</a>
  • _parent / parent :
<a href="la_page.html" onclick="window.parent.location.href=this.href; return false;">cliquez-ici</a>
  • _blank :
<a href="la_page.html" onclick="window.open(this.href); return false;">cliquez-ici</a>
  • _top :
<a href="la_page.html" onclick="window.top.location.href=this.href; return false;">cliquez-ici</a>
  • nom de frame :
<a href="la_page.html" onclick="window.frames['nom de frame'].location.href=this.href; return false;">cliquez-ici</a>
Note : Dans le cas d'une désactivation du JavaScript la page est chargée comme s'il n'y avait pas de définition de l'attribut target.



Consultez les autres F.A.Q's


Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.