Maison > interface Web > tutoriel CSS > Lesson01_08 Image Map_Tutoriel de base

Lesson01_08 Image Map_Tutoriel de base

WBOY
Libérer: 2016-05-16 12:08:54
original
1305 Les gens l'ont consulté

1. Lien hypertexte de l'image :
Le format est :

2. Qu'est-ce qu'une carte-image ?
Divisez une image en plusieurs zones, chaque zone pointant vers une adresse URL différente

3. Comment générer une carte d'image
(1) Tout d'abord, définissez la forme, les coordonnées de position et les informations d'adresse URL de chaque zone de point chaud de l'image.
Ce processus est expliqué à l'aide de la balise , où l'attribut name spécifie un nom pour ce mappage de point d'accès.
(2) Chaque zone du mappage dans le hotspot de l'image est décrite avec la balise . Le format de la balise est :
HREF peut également être représentée par nohref, indiquant que cliquer dans cette zone n'est pas valide. (3) Après l'avoir défini, vous devez ajouter un paramètre d'attribut appelé usemap à la balise d'image , comme suit :

Exemple : Le code est le suivant :
<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="/upload/200729134227624.gif" usemap="#mymap">
Copier après la connexion
L'effet est le suivant :

Instructions pour définir l'attribut de forme :

  • rect définit une zone rectangulaire et l'attribut coords est défini sur les coordonnées du coin supérieur gauche et du coin inférieur droit du rectangle. Chaque valeur de coordonnée est séparée par un signe ;
  • poly définit une zone de polygone et la valeur de réglage de l'attribut coords est la valeur de coordonnée de chaque sommet du polygone ;
  • cicle définit une zone circulaire, et les valeurs de réglage de l'attribut de coordonnées sont les coordonnées circulaires et le rayon. Les deux premières sont les coordonnées et la dernière est le rayon.

    Exemple : Le code est le suivant : L'effet est le suivant : Exemple : Le code est le suivant : L'effet est le suivant : Exemple : Le code est le suivant : L'effet est le suivant : Exemple : Le code est le suivant : L'effet est le suivant : Exemple : Le code est le suivant : L'effet est le suivant : Exemple : Le code est le suivant : : L'effet est le suivant : Exemple : Le code est le suivant : Le l'effet est le suivant :
  • Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal