HTML / CSS > Mapping en CSS [ L'éditeur JavaScript ]

Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Article posté par : Arkangel
Date de mise en ligne : 25-07-2006
Niveau : Assez facile
>> Ajouter un article

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 chaque map et le temps perdu si on ne possède pas un logiciel qui ne calcule pas 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

Il s'agit d'un exemple avec une zone réactive. Pour plusieurs zones il faudra répéter le code de la zone1 avec d'autres dimensions et un autre nom (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>

Annotations des visiteurs :

De CodeKiller - le 28-04-2007

Le seul problème est que ça ne va fonctionner qu'avec des zone rectangulaire, hors en général le but des "maps" est justement de rendre par exemple un cercle, un triangle ou autre, "cliquable"...

Imagine si t'es webmaster et que tu utilises ta technique...ça m'étonnerait que ton patron apprécie ta "fainéantise".
D'ailleur pour avoir simplement des coordonnés, tu ouvres l'image avec MSPAINT et tu palces ton curseur de souris où tu veux...après ça reste des copier/coller de code html...pas vraiment long...à mon avis ça doit même être moins long que de taper tout le css avec les valeurs qui vont bien...

Après si t'es courageux tu places les coordonnées dans un tableau Excel histoire de pouvoir avoir un "apperçu".

De kaskoyu - le 16-01-2007

<SCRIPT LANGUAGE=JavaScript>
alert('ok')
</SCRIPT>

De kaskoyu - le 14-01-2007

<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>

De Arkangel - le 09-10-2006

non la variable block permet de disposer un menu ligne en bloc or ici on parle de définir une zone cliquable sur une image.

La balise <A> étant par défaut en ligne, on utilise float pour permettre la délimitation de la zone cliquable (hauteur et largeur)

De OKKO - le 20-09-2006

c'est pas plutôt : display:block qui transforme une balise en ligne en block.
Float fait juste quitté le flux

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Cegetel
Fournisseur d'acces ADSL
http://www.cegetel.fr/

Cat : Haut débit
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

61326 membres
7216 comptes CountUs
1721 comptes myCircle

LES FORUMS :

14 forums
39947 topics
190903 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par alex55
Lorsque vous écrivez un message dans un textarea, il se peut que vous fassiez une erreur. Sachez que le CTRL+Z est activé dans les textarea ! Très pratique au cas où vous effacez tout le texte en faisant une fausse maneuvre. Les autres CTRL+[une lettre] marchent aussi (ex: CTRL+F pour rechercher).
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi