calendar

S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

Javascript・イメージマップでリンクボタン=indexページ作りその3

0
      今回は、画像上にあらかじめメール用のリンクボタンを書いておき、イメージマップで位置・大きさを指定したその部分にリンク機能を持たせます。これはJavaScriptの機能では無くHTMLの機能であり、絶対座標とは異なる「画像内の座標」を使います。
     では、イメージマップを整理しておきます。
     最初のステップは、イメージマップにしたい画像にusemap属性border属性を追加します。    
        usemap属性・・・マップにしたい画像に名前を付けます。記述方法は、
           usemap="#名前"
          
    と、マップの名前の前に「#」を付けます。
        border属性・・・画像の枠の指定です。
          画像の周囲にリンクを示す枠線を表示させない様に、「0」を指定します。
     次のステップとして、画像のどの部分をリンクボタンにするのか「マップ」にします。ここで画像内座標を使い、画像内座標は画像の左上がゼロ点です。
     記述方法は、
       <map name="指定した名前" id="指定した名前で可">
       <area shape="リンクボタンの形指定" coords="位置と大きさ指定"
                 href="リンク先を指定" />
       </map>
    と書きます。リンクボタンの形と位置、大きさの指定については、下の様になります。
      形が長方形で、左上座標(画像内)が(x1、y1)、右下座標が(x2、y2)の時:
           形の指定・・・「rect
           位置と大きさの指定・・・「x1x1,y1,x2,y2
      形がで、中心の座標(画像内)が(x、y)、半径がrの時:
           形の指定・・・「circle
           位置と大きさの指定・・・「x,y,r
     説明はこれくらいにして、実際のホームページ作成を続けましょう。
     「Javascript・タイトルの大きさを変えながら移動=indexページ作りその1」でタイトルの背景として用いた画像の一部にメールへのリンクボタンを追加で書き込みます。下の様なものです。
        従来の「背景」
    js68背景枝















       新しい「背景」
    js80背景枝













     この画像は縮小して示していますが、実際には横940px、縦419pxです。メールへのリンクボタンは左上角の座標を(820,146)、右下角の座標を(930,246)にします。
     実際のHTML文書の修正部は、下の様になります。アンダーラインの画像名を修正し、で囲んだ部分を追加しました。
    js82サンプル

     右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
     JavaScriptが無効の状態でも、メールリンクボタンをクリックするとリンク先を表示します。

     ここまでが今回の新しいネタです。

     ホームページ作成は続きます。次は、画面上部中央の「空(そら)」の部分に「お知らせコーナー」を作ります。
     すでにここまで学んできた手法を使い、次の内容をプログラムに織り込みます。
         GIFアニメの中でイラストの「飛行船」を飛ばし、

    js85お知らせタイトル




         
         「飛行船」が動画画像端まで飛ぶタイミングでsetTimeoutjs86飛行船
             使い、「JavaScript・右の端から左の端へ絵の移動」
             の方法で「飛行船」を移動させ、
        
         「飛行船」が画面(containerDIV)端まで来る
            と飛行船を消し、別のsetTimeoutjs87メールボタン
            メールリンクの小鳥の画像(GIFアニメ)
            を出します。






     ここまでが「お知らせコーナー」のタイトルで、この下の位置にお知らせの中味を書きます。
     実際のHTML文書は下の通りです。で囲んだ部分で3つのDIVを追加しています。infotitleのDIVはGIFアニメのタイトル画像を収納し、infomoveのDIVは飛行船を収納し、infoのDIVは「お知らせコーナー」の中味です。
    js83サンプル

     この3つのDIVは絶対座標とレイヤ(重ね順)で位置を設定しており、下のスタイルシートので囲んだ追加部分です。なお、「お知らせコーナー」の中味のスタイルも追加しているのでの中に書いています。
    js84サンプル

     JavaScriptは下ので囲んだ部分が追加です。
     関数「picStart」の中ので囲んだ部分は、画面が出てからGIFアニメが終わる2380m秒後に関数「picMove2」を起動します。
     次ので囲んだ部分には、「picMove2」「picMove3」「picMove4」の3つの関数が新たに作られています。
       関数「picMove2」は、DIV「infomove」の中に飛行船の画像
         「hikousen.gif」を入れ、100ms毎に関数「picMove3」を起動します。
       関数「picMove3」は、DIV「infomove」を右に9px動かしx座標817で
         とどめてから絵を消し700ms後に関数「picMove4」を起動します。
       関数「picMove4」は、DIV「infomove」の中味を小鳥の画像「mailto.gif」
         に変えて「jssamplemail.html」にリンクをかけます。
    js83サンプル

     右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     今回は、イメージマップを使ってホームページのリンクボタンを作りました。
     次回は、本文とメインの画像を配置してホームページを完成させます。

     なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック