コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > htmlチュートリアル > img usemap属性中国地図リンク_HTML/Xhtml_Webページ制作

img usemap属性中国地図リンク_HTML/Xhtml_Webページ制作

WBOY

リリース： 2016-05-16 16:42:54

オリジナル

2547 人が閲覧しました

html:のimgタグはWebページ内に導入する画像を定義します。また、非常に興味深い usemap 属性もあります。
51dituのホームページにある地図を見ると、真ん中に中国の地図があります。右クリックしてダウンロードし、普通の写真を見てください。
しかし、地図上の州をクリックすると、さまざまなイベントがトリガーされる (または別のリンクが開く) 可能性があり、これは非常に興味深いものです。 usemap 属性が使用されていることがわかります。
もちろん、マップタグも定義する必要があります。コード全体は次のとおりです:

<html>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap 属性</title>
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>

<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
       
    <マップ名="マップ" クラス="マップエリア">
        <areashape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
        <areashape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
        <areashape="rect" coords="84,158,115,175" href="javascript:alert('チベット')">
        <areashape="rect" coords="220,90,257,105" href="javascript:alert('内モンゴル')">
        <areashape="rect" coords="348,45,389,61" href="javascript:alert('黒龍江')">
        <areashape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
        <areashape="rect" coords="323,84,351,100" href="javascript:alert('遼寧')">
        <areashape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
        <areashape="rect" coords="288,120,314,136" href="javascript:alert('山東')">
        <areashape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
        <areashape="rect" coords="207,116,235,130" href="javascript:alert('寧夏')">
        <areashape="rect" coords="186,162,214,179" href="javascript:alert('四川省')">
        <areashape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
        <areashape="rect" coords="305,144,332,159" href="javascript:alert('江蘇')">
        <areashape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
        <areashape="rect" coords="216,168,243,185" href="javascript:alert('重慶')">
        <areashape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
        <areashape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
        <areashape="rect" coords="213,196,239,209" href="javascript:alert('貴州')">
        <areashape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
        <areashape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
        <areashape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
        <areashape="rect" coords="179,210,204,225" href="javascript:alert('雲南')">
        <areashape="rect" coords="227,214,252,228" href="javascript:alert('Guangxi')">
        <areashape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
        <areashape="rect" coords="292,200,319,214" href="javascript:alert('福建省')">
        <areashape="rect" coords="259,219,287,231" href="javascript:alert('広東')">
        <areashape="rect" coords="244,231,270,246" href="javascript:alert('マカオ')">
        <areashape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
        <areashape="rect" coords="311,228,338,243" href="javascript:alert('台湾')">
        <areashape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
        <areashape="rect" coords="196,130,222,145" href="javascript:alert('Gansu')">
        <areashape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
        <areashape="rect" coords="224,136,252,151" href="javascript:alert('陝西')">
    </マップ>
</ボディ>
</html>

ヒント: を実行する前にコードの一部を変更できます。
map標籤裡的area標籤的幾個屬性意義見：http://www.w3school.com.cn/tags/tag_area.asp

這裡還是記下area的shape屬性，可選項有矩形，圓形和多邊形。尤其要注意的是coords屬性，得結合shape使用，影像左上角的座標是 "0,0"。

関連ラベル：

img

ソース：php.cn

前の記事：Web標準学習構造とパフォーマンスの分離を理解する_HTML/Xhtml_Webページ制作次の記事：HTMLのセマンティック構造を理解する_HTML/Xhtml_Webページ制作

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

NullPointerException とは何ですか?どのように修正すればよいですか?

2024-10-22 09:46:29
初心者からプログラマーへ: 旅は C の基礎から始まります

2024-10-13 13:53:41
PHP による Web 開発のロックを解除する: 初心者ガイド

2024-10-12 12:15:51
C の謎を解く: 新人プログラマーのための明確でシンプルな道

2024-10-11 22:47:31
コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング

2024-10-11 19:36:51
内なるプログラマーを解き放つ: まったくの初心者のための C

2024-10-11 15:50:41
C で生活を自動化する: 初心者向けのスクリプトとツール

2024-10-11 15:07:41
PHP を簡単に: Web 開発の最初のステップ

2024-10-11 14:21:21
Python で何でも構築: 創造性を解き放つための初心者ガイド

2024-10-11 12:59:11
コーディングの鍵: 初心者のための Python の力を解き放つ

2024-10-11 12:17:31

最新の問題

アンカーポイント内の画像に対して境界線の半径が機能しない次の HTML コードを使用しています: <aclass="-video-detail-qualifiers-branding"><imgsr...

から 2024-04-06 17:20:25

0

1

347

for ループはランダムに 1 から 0 まで変化します基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...

から 2024-04-06 16:48:14

0

1

393

モバイルサイズの画面で段落を左側に移動するための CSS および HTML メソッド通常の 16:9 のコンピュータ画面では、左側にテキスト、右側に画像が表示され、完璧に見えます。ただし、小さい画面 (携帯電話サイズの画面など) では、希望どおりに段落の上に画像が...

から 2024-04-04 20:25:22

0

1

330

React コンポーネント内の関数からの予期しない出力 2 つの画像 (IMG と IMG2) をインポートしました。 IMG は、ビューポートの幅が 600 ピクセル未満の場合に表示し、ビューポートの幅が 600 ピクセル以上の場合に...

から 2024-04-03 00:17:44

0

1

285

HTMLでconnect-srcコンテンツセキュリティポリシーのワイルドカードを設定するにはどうすればよいですか? HTML には、次のようになります <metahttp-equiv="Content-Security-Policy"content="defa...

から 2024-04-02 16:12:49

0

1

414

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート