HTML / CSS
Mapping en CSS
Il est possible d'utiliser le CSS pour rendre une image réactive (mapping).
Cela évite les longs calculs de coordoonées des quatres coins de chaquemap et le temps perdu si on ne possède pas un logiciel qui ne calculepas tout ça à votre place.
Pour ce faire on va donner à la balise "a" des dimensions et une position sur une image en arrière-plan.
On donne les dimensions voulues à la zone et on la place comme souhaité en utilisant les marges par exemple.
Vous pouvez évidemment placer plusieurs zones réactives sur la même image.
Exemple
Ils'agit d'un exemple avec une zone réactive. Pour plusieurs zones ilfaudra répéter le code de la zone1 avec d'autres dimensions et un autrenom (zone2 etc...)
Le code
<html >
<head>
<title>image maps en CSS</title>
<style type="text/css">
.image { /* bloc concernant l'image en arrière-plan */
width : 576px;
height: 432px;
background: url(monimage.jpg) top left no-repeat;
}
.zone1 { /* zone cliquable */
float: left; /* permet de donner une dimension à la balise a qui est une balise en ligne */
width : 150px;
height: 100px;
margin-left: 220px;
margin-top: 30px;
border: 1px dotted white; /* ajouté pour visualiser la zone*/
}
</style>
</head>
<body>
<div class="image">
<a class="zone1" href="#" title="zone 1 zoom"></a>
</div>
<p>La zone cliquable a été volontairement entourée d'une bordure pour pouvoir les visualiser.</p>
</body>
</html>
Tansformer un champ de texte en un texte
De quoi ?
Beaucoup de personnes utilisent des input type text/textarea pour utiliser des scripts javascripts, y mettre des textes
défilants, y mettre l'heure... Cependant parfois on voudrait supprimer ce cadre type formulaire sans devoir refaire le
script.
C'est extrêmement simple en utilisant CSS !
Exemple
Nous prenons une page à laquelle nous mettons une couleur de fond spécifique. Nous y mettons un input simple.
Voici le résultat obtenu.
Code :
A l'affichage, on obtient un banal champ de texte au fond blanc et avec une bordure spéciale. Exemple :
Maintenant, on utilise deux coups de CSS.
Code :
On a mis la largeur de la bordure à zéro, on a mis transparent en couleur de fond.
Le résultat est un texte normal. Résultat :
Changer La couleur des barres de scroll
Voici le petit bout de code a inserer, entre les balises <HEAD> et </HEAD> de votre page :
Explications :
scrollbar-face-color:
defini la couleur du dessus des boutons et de la barre de défilement.
scrollbar-shadow-color:
defini la couleur sombre du relief des boutons (noir conseillé).
scrollbar-highlight-color:
defini la couleur claire du relief des boutons (blanc conseillé).
scrollbar-3dlight-color:
defini la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-darkshadow-color:
defini la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-track-color:
defini la couleur du fond de la barre.
scrollbar-arrow-color:
defini la couleur des flèches.Voila, il ne vous reste plus qu'à vous laisser aller à votre imagination !
( Il est très important de noter que ce propriétés en fait n'existent pas.En passant votre fichier dans le validateur CSS vous aurez des erreurs:) Ne pas mettre ces bouts de code si vous tenenz aux normes :D
C'est en fait Microsoft qui a créer ces propriétés(Au lieu de corrigerles 18 failles de sécurités jamais corrigées depuis plus de 3 ans!) etdonc ce n'est que ce navigateur qui le supporte.
Microsoft a du créer ça pour mettre un peux de style a son navigateurnon-skinnable... Sur mozilla, la barre de scroll change selon le skin.Et ce n'est pas que la couleur !,
Incompatible avec: Mozilla et Mozilla Firefox )
Vous devez premièrement inclure un attribut indiquant la langue du lien : hreflang="en" (par exemple)
Ensuite, pour ajouter une image à la suite de votre lien anglais, utilisez ce CSS :
Afficher la langue d'un lien
Exemple
MySQL
Mapping en CSS
Il est possible d'utiliser le CSS pour rendre une image réactive (mapping).
Cela évite les longs calculs de coordoonées des quatres coins de chaquemap et le temps perdu si on ne possède pas un logiciel qui ne calculepas tout ça à votre place.
Pour ce faire on va donner à la balise "a" des dimensions et une position sur une image en arrière-plan.
On donne les dimensions voulues à la zone et on la place comme souhaité en utilisant les marges par exemple.
Vous pouvez évidemment placer plusieurs zones réactives sur la même image.
Exemple
|
Ils'agit d'un exemple avec une zone réactive. Pour plusieurs zones ilfaudra répéter le code de la zone1 avec d'autres dimensions et un autrenom (zone2 etc...)
Le code
|
<html >
<head>
<title>image maps en CSS</title>
<style type="text/css">
.image { /* bloc concernant l'image en arrière-plan */
width : 576px;
height: 432px;
background: url(monimage.jpg) top left no-repeat;
}
.zone1 { /* zone cliquable */
float: left; /* permet de donner une dimension à la balise a qui est une balise en ligne */
width : 150px;
height: 100px;
margin-left: 220px;
margin-top: 30px;
border: 1px dotted white; /* ajouté pour visualiser la zone*/
}
</style>
</head>
<body>
<div class="image">
<a class="zone1" href="#" title="zone 1 zoom"></a>
</div>
<p>La zone cliquable a été volontairement entourée d'une bordure pour pouvoir les visualiser.</p>
</body>
</html>
|
Tansformer un champ de texte en un texte
De quoi ?
|
Beaucoup de personnes utilisent des input type text/textarea pour utiliser des scripts javascripts, y mettre des textes
défilants, y mettre l'heure... Cependant parfois on voudrait supprimer ce cadre type formulaire sans devoir refaire le
script.
C'est extrêmement simple en utilisant CSS !
Exemple
|
Nous prenons une page à laquelle nous mettons une couleur de fond spécifique. Nous y mettons un input simple.
Voici le résultat obtenu.
Code :
<input type="text" size="20" value="Sans style">
A l'affichage, on obtient un banal champ de texte au fond blanc et avec une bordure spéciale. Exemple :
Maintenant, on utilise deux coups de CSS.
Code :
<input type="text" size="80" value="Avec style" style="border-width : 0px; background-color: transparent;">
On a mis la largeur de la bordure à zéro, on a mis transparent en couleur de fond.
Le résultat est un texte normal. Résultat :
Remarque 1 : Cela s'applique aussi aux textarea !
Remarque 2 : Il s'agittoujours d'un champ de formulaire, cependant il n'y a plus que letexte. Le visiteur peut toujours séléctionner ce texte et le supprimer.
(Pour la remarque 2, il suffit d'inserer readonly dans la balise <input et le tour est joué )Changer La couleur des barres de scroll
Voici le petit bout de code a inserer, entre les balises <HEAD> et </HEAD> de votre page :
<STYLE TYPE="text/css">
BODY {
scrollbar-face-color: #7189AB;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #94A9CA;
scrollbar-arrow-color: #FFCC00;
}
</style>
BODY {
scrollbar-face-color: #7189AB;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #94A9CA;
scrollbar-arrow-color: #FFCC00;
}
</style>
Explications :
|
scrollbar-face-color:
defini la couleur du dessus des boutons et de la barre de défilement.
scrollbar-shadow-color:
defini la couleur sombre du relief des boutons (noir conseillé).
scrollbar-highlight-color:
defini la couleur claire du relief des boutons (blanc conseillé).
scrollbar-3dlight-color:
defini la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-darkshadow-color:
defini la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
scrollbar-track-color:
defini la couleur du fond de la barre.
scrollbar-arrow-color:
defini la couleur des flèches.Voila, il ne vous reste plus qu'à vous laisser aller à votre imagination !
( Il est très important de noter que ce propriétés en fait n'existent pas.En passant votre fichier dans le validateur CSS vous aurez des erreurs:) Ne pas mettre ces bouts de code si vous tenenz aux normes :D
C'est en fait Microsoft qui a créer ces propriétés(Au lieu de corrigerles 18 failles de sécurités jamais corrigées depuis plus de 3 ans!) etdonc ce n'est que ce navigateur qui le supporte.
Microsoft a du créer ça pour mettre un peux de style a son navigateurnon-skinnable... Sur mozilla, la barre de scroll change selon le skin.Et ce n'est pas que la couleur !,
Incompatible avec: Mozilla et Mozilla Firefox )
- Afficher un drapeau de la langue d'un lien
Vous devez premièrement inclure un attribut indiquant la langue du lien : hreflang="en" (par exemple)
<a href="http://www.mysql.com" hreflang="en">MySQL</a>
Ensuite, pour ajouter une image à la suite de votre lien anglais, utilisez ce CSS :
a[hreflang="en"]:after {
content: " " url(/img/en.gif);
}
Ceci ajoutera l'image se trouvant dans le dossier /img/en.gif.content: " " url(/img/en.gif);
}
Afficher la langue d'un lien
<a href="http://www-fr.mysql.com" hreflang="fr">MySQL</a>
a[hreflang="fr"]:after {
content: " (fr)";
}
content: " (fr)";
}
Exemple
|
MySQL
Ce code ne fonctionnera quepour les navigateurs les plus respectueux de la norme CSS2. (ce quin'est pas le cas d'Internet Explorer)
Je reçois beaucoup de courrier me demandant comment faire pour qu'unlien ne soit jamais souligné, ou encore pour qu'un lien non-souligné ledevienne au passage de la souris. D'où cette page ;)
Définir le style de tous les liens de votre page :
Il vous suffit d'inserer ces lignes entre les balises <HEAD> et </HEAD> :
Entre les accolades située apres le A, vous trouvez:
color:#000000; : ceci definit la couleur de tous les liens de la page. Ici, ils seront noirs.
text-decoration:none; : ici, on indique que les liens ne seront pas soulignés.
Entre les accolades située apres le A:hover, vous trouvez les attributs du style des liens au passage de la souris :
color:#FF0000; : ceci indique que les liens passeront au rouge au passage de la souris.
text-decoration:underline; : ici, on indique qu'ils se souligneront.
Définir des classes de liens :
Reprennons le code precedent et rajoutons quelques lignes :
Nous venons de definir une nouvelle classe de lien, la classe "menu".Cela signifie que tous les liens de votre pages garderont le style quenous avons definit dans la premiere partie, sauf les liens de la classe"menu".
Pour definir un lien comme faisant partie d'une classe, il vous suffit de rajouter quelques caractères dans votre code HTML :
Et voila, ce lien sera bleu et non souligné et passera au jaune souligné au passage de la souris !
- Le soulignement des liens avec les CSS
Je reçois beaucoup de courrier me demandant comment faire pour qu'unlien ne soit jamais souligné, ou encore pour qu'un lien non-souligné ledevienne au passage de la souris. D'où cette page ;)
Définir le style de tous les liens de votre page :
|
Il vous suffit d'inserer ces lignes entre les balises <HEAD> et </HEAD> :
|
Entre les accolades située apres le A, vous trouvez:
color:#000000; : ceci definit la couleur de tous les liens de la page. Ici, ils seront noirs.
text-decoration:none; : ici, on indique que les liens ne seront pas soulignés.
Entre les accolades située apres le A:hover, vous trouvez les attributs du style des liens au passage de la souris :
color:#FF0000; : ceci indique que les liens passeront au rouge au passage de la souris.
text-decoration:underline; : ici, on indique qu'ils se souligneront.
Définir des classes de liens :
|
Reprennons le code precedent et rajoutons quelques lignes :
|
Nous venons de definir une nouvelle classe de lien, la classe "menu".Cela signifie que tous les liens de votre pages garderont le style quenous avons definit dans la premiere partie, sauf les liens de la classe"menu".
Pour definir un lien comme faisant partie d'une classe, il vous suffit de rajouter quelques caractères dans votre code HTML :
|
Et voila, ce lien sera bleu et non souligné et passera au jaune souligné au passage de la souris !
|
<head> <style type="text/css"> A { color:green; text-decoration:overline; } A:link {background-color:red; } A:visited { color:darkblue; } A:hover { color:red; text-decoration:underline; } A:active { color:yellow;background-color:black; } </style> </head> <body> <a href="#">cliquez ici</a> </body> Avec ceci, l'on peut constater plusieurs choses. - Avec le cascading, il est inutile de répéter ce qui est défini dans le A. - Les pseudo-classes doivent être disposées dans cet ordre, faute de quoi elles ne marchent plus. - Il peut y avoir des problèmes d'interférence entre le A et le A:link. Maintenant si vous définissez vos style comme ceci : <head> <style type="text/css"> A { color:blue; text-decoration:overline; } A.menu:link {background-color:red; } A.menu:visited {color:yellow; } A.menu:hover {color:green;background-color:red;} A:hover {color:red; text-decoration:underline; } A:active { color:white;background-color:black; } </style> </head> <body> <a class="menu" href="#">cliquez ici</a> ...Vous verrez des mélanges, comme j'ai vu la couleur yellow du menu visité au background black du lien actif. |
|
Le top est d'ajouter un background couleur ou image sur le lien pour un effet encore plus top : un exemple : a { display: block; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #AAB; background: #CCD; text-decoration: none; } a:link { color: #448; } a:visited { color: #667; } a:hover { border-color: #FE3; color: #FFF; background: #332; } Pour définir une image en fond il suffit de mettre dans le css background-image:url(monimage.gif); exemple :a:hover { border-color: #FE3; color: #FFF; background: #332; background-image:url(monimage.gif); } } |
par D.ace
publié dans :
HTML/CSS
