communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 深入理解HTML图像_html/css_WEB-ITnose

深入理解HTML图像_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:32:34
original
1616 Les gens l'ont consulté

目录

[1]深入理解HTML图像_html/css_WEB-ITnose [2] [3]

深入理解HTML图像_html/css_WEB-ITnose -> image 图像

    【必须属性】

        【1】src:地址

        【2】alt:图像替代文本，供探索引擎抓取使用

    【可选属性】

        【1】height:图像高度

        【2】width:图像宽度

        【3】ismap:为图像定义为服务器端图像映射

        【4】longdesc:与alt属性类似，提供多于1024字符的长文本描述

        【5】usemap:为图像定义客户端图像映射 usemap = "#元素的name或id属性"

<img src="test.jpg" alt="测试图片"    style="max-width:90%"  style="max-width:90%">
Copier après la connexion

映射地图

[注意]深入理解HTML图像_html/css_WEB-ITnose中的usemap属性可引用中的id或name属性(取决于浏览器),所以应同时向添加id和name属性。

图像热区

　　总是嵌套在标签中

【必须属性】

【1】alt:替代文本

【可选属性】

【1】coords:定义可点击区域的坐标

【2】href:定义此区域的目标URL

【3】nohref:排除某个区域

【4】shape:定义区域的形状

　　　　【a】圆形(circ/circle) coords= "x,y,r" x,y是圆心坐标；r是半径

　　　　【b】多边形(poly/polygon) coords = "x1,y1,x2,y2,x3,y3……" x,y是多边形每个顶点的坐标

　　　　【c】矩形(rect/rectangle) coords = "x1,y1,x2,y2" x1,y1是左上角坐标；x2,y2是右下角坐标

【d】全部区域default(默认)

[注意]标签采用"先来先得"的顺序，如果区域有重叠，以先出现的为准

<img src="jihe.jpg" alt="几何图形"    style="max-width:90%"  style="max-width:90%" usemap="#map"><map name="map" id="map">  <area shape="rect" coords="35,38,150,158" href="line4.html" alt="四边形">  <area shape="poly" coords="175,109,193,44,268,41,296,109,233,151" href="line6.html" alt="六边形">  <area shape="poly" coords="315,81,330,58,356,40,387,37,411,52,430,79,433,108,418,132,389,153,357,154,333,137,315,108" href="line12.html" alt="12边形">  <area shape="circle" coords="512,95,60" href="line0.html" alt="圆形"></map>
Copier après la connexion

 
Étiquettes associées：
深入理解HTML图像
source：php.cn
Article précédent：[css]我要用css画幅画(六)_html/css_WEB-ITnose Article suivant：CSS应用二_html/css_WEB-ITnose
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
Derniers articles par auteur
Derniers numéros
Comparez Imagick, Adobe Photoshop et Windows - Détecter la résolution (pixels par centimètre ou pixels par pouce) Ce n'est pas une question mais une tentative d'améliorer ma compréhension de la façon dont...
Depuis 2024-04-06 16:01:27
0
1
397
Le débordement de contenu dans la fenêtre empêche le défilement et masque le nouveau contenu Je suis actuellement en train de construire un programme de système de roulette (c'est plu...
Depuis 2024-04-03 21:24:55
0
1
285
Le serveur enverra-t-il plus d'une image à la balise <picture> et reviendra-t-il ? Je suis curieux de connaître les balises d'image implémentées comme celle-ci. <picture&...
Depuis 2024-04-03 09:05:59
0
1
290
Sortie inattendue des fonctions à l'intérieur des composants React J'ai importé deux images (IMG et IMG2). L'IMG suppose qu'il s'affiche lorsque la largeur d...
Depuis 2024-04-03 00:17:44
0
1
285
Récupérer la valeur de WordPress Photo à placer dans une page php personnalisée J'ai besoin de créer un site Web WordPress à partir de HTML existant (plus précisément à p...
Depuis 2024-04-02 19:13:12
0
1
296
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal