HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの画像にクリック可能な領域を作成するにはどうすればよいですか?


画像にクリック可能な領域を作成するには、クリック可能な領域を含む画像マップを作成します。たとえば、ボックスをクリックすると別のWebサイトが開き、同じ画像の三角形をクリックすると別のWebサイトが開きます。

タグは、画像内の領域を定義し、 タグ内にネストされます。属性は次のとおりです。

Sr.No
属性と説明
1
alt
エリアの代替テキスト
2
座標
エリアの座標
3
ダウンロード
ハイパーリンクがクリックされると、ターゲットがダウンロードされます
4
形状
エリアの形
5
ターゲット
URLが開く場所

HTMLの画像にクリック可能な領域を作成するにはどうすればよいですか?

次のコードを実行して、HTMLの画像にクリック可能な領域を作成してみてください

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>

   <body>
      <img src = /images/usemap.gif alt = "usemap" usemap = "#lessons"/>
      <map name = "lessons">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />
         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>

出力

HTMLの画像にクリック可能な領域を作成するにはどうすればよいですか?


  1. HTMLで参考文献を作成するにはどうすればよいですか?

    参考文献は、参照されている本のリストが記載されているセクションです。 HTMLを使用すると、参考文献を簡単に作成できます。そのために、タグを使用して本を一覧表示し、を使用して作品のタイトルを追加します。 タグは、曲、絵画、映画などの作品のタイトルを追加するためにも使用されます。引用を示し、タグ内にあるものはすべて作品のタイトルを表します。 例 HTMLで参考文献を追加する方法を見てみましょう <!DOCTYPE html> <html>    <head>       <title>B

  2. HTMLで複数行のテキスト入力(テキスト領域)を作成するにはどうすればよいですか?

    複数行のテキスト入力を作成するには、HTMLのタグを使用します。 cols属性とrows属性を使用して、テキスト領域のサイズを設定できます。フォーム内で使用され、ユーザーが複数の行にテキストを入力できるようにします。 タグの属性は次のとおりです- 属性 値 説明 オートフォーカス オートフォーカス ページの読み込み時にテキスト領域が自動的にフォーカスを取得するように指定します。 列 数値 表示される文字幅の数に基づいて、テキストエリアの幅を指定します。 無効 無効 表示される文字幅の数に基づいて、テキストエリアの幅を指定します。