 |
 |
 |
 |
|
 |
 |
 |
  Home Page Tous les scripts Proposer un script Recherche de script AJAX new! Cours de JavaScript Liste de discussion Forums CountUs myCircle Referencement Créat. de bannière HTML / CSS PHP / MySQL Réferencement Graph / Présentation Toutes les astuces Ajouter un article
 
Hebergement web Referencement Sites webmasters XHTML - CSS2 PHP Affiliation - Pub FAI Annuaire webmaster Kits graphiques Comparateur de prix Foire aux questions Les membres Devenir annonceur Faire un lien Contact Hebergement gratuit Le PHP facile Horoscope Comscripts WebmasterClub Activeartanima... Le village de ... L'écriteau Faro-dessing Images gifs an... Netsources Easy-script.com K i s s design Création de site Créer son site... Les autres Votre site ici
? |
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 :
>> Poster une annotation sur cette astuce
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
De 
 |
 |
 |
La mini-astuce "PHP / mySQL" du jour par unreal Afin d'éviter de toujours devoir mettre des antislash '\' dans son code HTML à l'interieur de sa page PHP, vous pouvez utiliser la fonction addslashes qui les ajoutent automatiquement! http://ca2.php.net/manual/fr/function.addslashes.php Proposer votre mini-astuce | Archives des mini-astuces |
 |
 |
 |
 |
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 24/07/2008 12:08:57 | Design by Studcrea | Gen. en 0.45 sec.
|
 |