Créer des liens personnalisés
Page 1 sur 1
- laurent34Membre élite
Quand on créé un site internet, il peut être intéressant d'avoir des liens de plusieurs sortes.
On peut personnaliser ces liens de la manière suivante (pour faire court) :
Quand on créé un lien dans une page internet, il ressemble à cela :

L'avantage est que ce type de liens se voit très facilement sur une page et se repère très facilement.
Le problème (mais ce n'en est peut être pas un pour certains internautes) est que ces liens peuvent plus attirer l'attention que le contenu même du texte, surtout s'il y en a beaucoup.
pour insérer un commentaire dans une feuille de style CSS (ou dans la partie "style" d'une page HTML), il faut insérer ce commentaire entre les balises suivantes :
/*votre commentaire*/
Un exemple est juste ci-dessous dans la partie "code".
Vous pouvez les insérer à l'endroit que vous voulez (à la fin d'une condition par exemple).
en créant une page internet, vous ne verrez jamais ce code...
Mézalor ?????? Pourquoi nous parle-t-il de ça????????
Heu... seulement pour dire que c'est par défaut pour toutes les versions du HTML et qu'il n'apparaît donc pas sur la page ou dans la feuille de style...
mais c'est pour que vous puissiez suivre les différentes modifications que nous allons voir juste après! Et
toi-même!
On peut personnaliser ces liens de la manière suivante (pour faire court) :
- liens internes au site --> par exemple le menu de navigation ou un lien pour rappeler à l'internaute où se trouve une page importante,
- liens externes qui pointent donc vers une page extérieure --> vers d'autres sites internet,
- liens permettant de télécharger des fichiers directement --> pour télécharger un fichier pdf ou une image (indépendamment du clic-droit --> enregistrer sous).
Quand on créé un lien dans une page internet, il ressemble à cela :

L'avantage est que ce type de liens se voit très facilement sur une page et se repère très facilement.
Le problème (mais ce n'en est peut être pas un pour certains internautes) est que ces liens peuvent plus attirer l'attention que le contenu même du texte, surtout s'il y en a beaucoup.
------------------------------------------------------------------
Remarque préliminaire :pour insérer un commentaire dans une feuille de style CSS (ou dans la partie "style" d'une page HTML), il faut insérer ce commentaire entre les balises suivantes :
/*votre commentaire*/
Un exemple est juste ci-dessous dans la partie "code".
Vous pouvez les insérer à l'endroit que vous voulez (à la fin d'une condition par exemple).
------------------------------------------------------------------
Ce type de lien correspond à peu près à ceci en CSS : (les couleurs ne sont pas tout à fait exactes mais c'est pour montrer le principe)- Code:
/*on définit le lien : la couleur et le soulignement*/
a:link {
color: #099;
text-decoration: underline;
}
/*quand le lien est visité, la couleur devient plus claire et reste souligné*/
a:visited {
text-decoration: underline;
color: #0FF;
}
/*quand on passe le pointeur de la souris, il ne se passe rien, le soulignement est toujours là*/
a:hover {
text-decoration: underline;
}
/*le lien est actif et reste souligné quand je clique dessus sans relâcher le bouton de la souris... faut suivre*/
a:active {
text-decoration: underline;
}
en créant une page internet, vous ne verrez jamais ce code...


Heu... seulement pour dire que c'est par défaut pour toutes les versions du HTML et qu'il n'apparaît donc pas sur la page ou dans la feuille de style...


Dernière édition par laurent34 le Mer 30 Mar 2011 - 17:17, édité 6 fois
- laurent34Membre élite
Premier cas de lien personnalisé
------------------------------------------------------------------
Nous allons créer un lien qui va avoir les présentations suivantes :------------------------------------------------------------------
- lien visible :

- lien survolé :

- lien visité :

Bon, la couleur du lien visité est à déconseiller... car trop claire et plus tellement visible...
Mézalor????????? Pourquoi a-t-il mis cette couleur?




------------------------------------------------------------------
Redevenons sérieux quelques instants mais pas trop... - Spoiler:
Le choix des différentes couleurs est important. Il faut éviter certains "pièges" comme par exemple des liens de couleur rouge et des liens visités de couleur verte sur une même page.
Ce qu'on voit souvent, c'est un lien avec une couleur en rapport avec le thème de la page et un lien visité avec une nuance plus claire de cette même couleur.
On voit également des liens en gras qui apparaissent surlignés au survol mais nous y viendront plus tard.
De cette manière, il y a une certaine continuité.
------------------------------------------------------------------
Au fait, il y aura plusieurs types de liens sur la même page non?Des liens internes, des liens vers des sites extérieur au votre, des liens vers des documents pdf et des liens vers des images.
Pour pouvoir paramétrer les différents liens dans une même page, nous allons utiliser des classes.
Il faudra donc définir chaque réglage (link, visited, hover et active) sous la forme suivante :
- Code:
.lien-interne:link{
}
.lien-interne:visited{
}
.lien-interne:hover{
}
.lien-interne:active{
}
De même, pensez à utiliser des noms suffisamment "parlant" pour ne pas avoir à réfléchir pour attribuer les différentes classes de liens.
Si vous oubliez le "." au début, le lien fonctionnera mais sans les effets d'affichage voulus.

------------------------------------------------------------------
On attaque maintenant!1) définissons l'aspect du lien tel qu'il va apparaître :
- Code:
.lien-interne{
text-decoration: none;/*je supprime le sur-lignage*/
color: #00F;/*j'attribue une couleur que j'ai choisis*/
}
2) définissons l'aspect du lien visité :
- Code:
.lien-interne:visited {
text-decoration: none;/*je supprime de nouveau le sur-lignage sinon le lien visité est de nouveau sur-ligné*/
color: #999;/*je change la couleur*/
}
3) définissons l'aspect du lien quand on passe la souris dessus :
- Code:
.lien-interne:hover {
text-decoration: none;/*je supprime de nouveau le sur-lignage sinon le passage de la souris le refait apparaître*/
color: #0CC;/*je change la couleur*/
font-style: italic;/*pourquoi ne pas le mettre en italique pour faire remarquer qu'il s'agit d'un lien?
Au fait, pour changer le style, c'est "font-style"*/
font-weight: bold;/*je mets le texte en gras*/
font-size:18px;/*j'agrandis un peu la taille pour que le lien ressorte mieux*/
}
4) le lien est actif, en cliquant dessus, je ne veux pas de sur-lignage :
- Code:
.lien-interne:active {
text-decoration: none;/*je supprime de nouveau le sur-lignage*/
}
Si on met "underline", le lien sera souligné au moment du clic.
------------------------------------------------------------------
Il y a néanmoins un inconvénient qui peut se révéler gênant :au passage de la souris, la taille augmente légèrement, ce qui a pour effet de décaler légèrement le texte vers le bas.
S'il y a des liens à l'intérieur d'un texte de plusieurs lignes, cela peut gêner la lecture si on déplace la souris.
A vous de voir donc...
- laurent34Membre élite
Deuxième cas de lien personnalisé
Lien vers une page internet externe à votre site
------------------------------------------------------------------
Nous allons créer un lien contenant une image (une flèche pour indiquer qu'on sort de votre site) et qui va avoir les réactions suivantes :
- lien visible :

- Lien survolé:

- Lien visité :

------------------------------------------------------------------
Avant de montrer le code, vous avez à votre disposition un grand nombre de sites proposant des images de taille réduite.L'un d'entre eux est le suivant :
http://icones.pro/page/4?s=fleche
dans lequel je vais choisir cette icône de dimension 32px*32px :
http://icones.pro/fleche-droite-haut-image-png.html
Enregistrez la dans le dossier "images" de votre site.
Sur le même site, vous pouvez rechercher différentes icônes en tapant un mot-clef dans la barre de recherche.
Vous pouvez bien sûr créer vos propres icônes avec des logiciels de dessin.

------------------------------------------------------------------
Voici le code maintenant :1) on définit l'aspect du lien :
- Code:
/*deuxième type de lien : non souligné et qui passe en gras italique au survol avec ajout d'une image à la fin*/
/*définition du lien*/
.lien2:link {
color: #00F;
text-decoration: none;
background-image: url(../images/fleche-droite-haut-icone-3760-32.png);/*l'image est définie en arrière plan*/
background-repeat: no-repeat;/*l'image est affichée une seule fois et je ne veux pas de répétition*/
background-position: right; /*la position en arrière-plan est la droite car je veux l'image à droite*/
text-align: left;/*le texte est donc aligné à gauche*/
/*un marge pour le texte de 20px sinon l'image est sous le texte*/
padding-right: 25px;
}
background : permet de définir un arrière-plan à l'aide d'un couleur ou d'une image (ce qui est notre cas);
background-repeat : permet de dire si une image doit être répété pour couvrir la totalité de l'arrière-plan --> none car on ne veut l'image qu'une seule fois;
background-position : permet d'indiquer où notre image doit se positionner;
text-align : comme on veut l'image à droite, il vaut mieux définir l'alignement du texte à gauche... Ça paraît logique non?




- Spoiler:
c'est pour cela qu'on indique un décalage entre le texte et l'image :
padding-right : sert à définir une "marge", pour indiquer la valeur, j'ai fait des essais pour voir ce qui me convenait le mieux.
2) on définit l'aspect du lien visité :
- Code:
/*lien visité : juste un changement de couleur*/
.lien2:visited {
text-decoration: none;
color: #333;
}

3) on définit l'aspect au survol de la souris :
- Code:
/*passage au dessus du lien : changement de couleur, passe en gras et en italique*/
.lien2:hover {
text-decoration: none;
color: #0CC;
font-style: italic;
font-weight: bold;
}
- Code:
.lien2:active {
text-decoration: none;
}
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum