|
PHPFrance est maintenu par des bénévoles et soutenu par les sociétés Actoo et
Anaska, Conseil et Formation pour PHP
Pour optimiser vos chances commencez par consulter la FAQ et faites une recherche.
Bon esprit, politesse et entraide sont les règles de ce forum.
|
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
lenouveau
Invité
|
 Posté le: 24 Avr 2008, 18:17 Sujet du message: Partie visible de l'image cliquable uniquement |
 |
|
Bonjour
Comment doit je procéder pour que si j'insère une image en forme de patate par exemple, seule la patate soit cliquable et par le reste de l'image qui la constitue
je préfererai pouvoir jouer sur l'opacité (car le background de limage a une opacite de 0) que sur les couleurs car ma patate est multi colore
merci davance |
|
|
 |
Victor BRITO
Magohamoth
Inscrit le: 07 Mar 2006
Messages: 1530
Localisation: 92200 Neuilly-sur-Seine |
| Posté le: 24 Avr 2008, 18:43 Sujet du message: |
|
|
On veut dresser la carte de la patate, à ce que je vois. 
C'est possible, via un code HTML de ce genre :
| Code: | <img src="url-de-ta-patate.jpg" alt="Patate" width="100" height="100" usemap="#carte-patate" />
<map id="carte-patate">
<area href="url-du-lien.html" alt="Description du lien" shape="poly" coords="10,0,15,8,75,23,87,89,10,0" />
</map> |
L'attribut usemap de l'élément IMG a pour valeur l'ancre correspondant à l'attribut id de l'élément MAP à utiliser. L'élément MAP regroupe toutes les zones cliquables qu'on peut trouver dans l'élément qui l'utilise.
L'élément AREA permet de définir une zone cliquable, son attribut href indique l'URL du lien (comme pour A), son attribut alt décrit la zone (très important lorsque les images sont désactivées ou lorsqu'on est un utilisateur aveugle), son attribut shape indique le type de zone (rect pour une zone rectangulaire, circle pour une zone circulaire, poly pour une zone à forme géométrique complexe), son attribut coords indique les coordonnées des différents points de la forme géométrique délimitant la zone.
Les coordonnées sont notées, comme suit :
- pour shape="rect" : l'abscisse du coin supérieur gauche du rectangle, l'ordonnée du coin supérieur gauche, l'abscisse du coin inférieur droit, l'ordonnée du coin inférieur droit (exemple : coords="0,0,468,60") ;
- pour shape="circle" : le centre de la forme circulaire en abscisse, le centre en ordonnée, le rayon (exemple : coords="120,120,60") ;
- pour shape="poly" : l'abscisse du premier point, l'ordonnée du premier point, l'abscisse du deuxième point, l'ordonnée du deuxième point, et ainsi de suite pour finir en répétant l'abscisse et l'ordonnée du premier point, pour que la forme soit fermée (exemple : coords="0,0,468,60, 675,126,877,544,1024,768,0,0") ;
Les coordonnées sont exprimées en pixels, l'origine étant le coin supérieur gauche de l'image.
Pour rappel, abscisse = axe horizontal (x) et ordonnée = axe vertical (y).
Plus de détails sur la spécification HTML du W3C (version française).
Bref, la maintenance des zones cliquables peut vite tourner au casse-tête, étant donné qu'il faut bien maîtriser la surface de l'image et ses dimensions.
_________________
Deux sites personnels, entre autres : www.victor-brito.com, www.britoweb.net | Mes réalisations professionnelles et personnelles (présentation) | Une traduction (non normative) d'un document du W3C : Différences entre HTML 4 et HTML 5 | Mon projet du moment : VBRAtom : script d'affichage de fils Atom
Deux conseils : 1. les CSS sont puissantes, ne restez pas prisonnier d'Internet Explorer 6 ; 2. boycottez OOXML et adoptez des formats interopérables, comme l'ODF.
Fan d'Opera, qui permet d'apprendre à rendre le Web meilleur  |
|
|
|
lenouveau
Invité
|
| Posté le: 24 Avr 2008, 20:25 Sujet du message: Partie visible de l'image cliquable uniquement |
|
|
mais on dirait que c'est exactement ce que je voulais (bien que ma description s'en éloigne un peut mais javais peur d'effrayer en parlant de coordonnées)
merci infiniment
lenouveau |
|
|
|
|
|
Vous pouvez poster de nouveaux sujets dans ce forum
Vous pouvez répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
Powered by phpBB © phpBB Group - PHPFrance est hébergé par Sivit
|
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
S'enregistrer
Profil
Se connecter pour vérifier ses messages privés
Connexion
