忍者ブログ

おやっさんのWEBサイト制作への道

WEBサイト制作ど素人のおやっさんが、HTML、CSS、PHPなど学んでいく技術ブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML/XHTML&CCS014(objectタグ,paramタグ,mapタグ,areaタグ,usemap属性,shape属性,coords属性)

★タグ
objectタグ・・・objectは、画像・動画・音声・各種プラグインデータ・JAVAアプレット・他のHTML文書等の、 様々な形式のデータを文書に埋め込むための汎用的なタグです。
書き方は
<object data="元データのパス" type="MIMEタイプ" width="幅" height="高さ"></object>
難しので”オブジェクトはいいデータタイプだ”で覚えます。
data="~.swf(flashの拡張子)の場合MIMEタイプは、
application/x-shockwave-flashです。

parame

・・・paramは、<applet>や<object>でデータが実行される際に、必要となるパラメータを指定するタグです。name属性でパラメータの名前を指定して、value属性でその値を指定します。

nameの値がsrcの場合valueの値はオブジェクトのファイルパスを指定します。

nameをautostart(自動再生する)やnameをloop(繰り返し再生する)にした場合はvalueは
true(再生する)やfalse(再生しない)になります。

難しいので”パラメーターは名前がバルエ”で覚えます。






↑のflashソースが↓です。trueにしてみました。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="ture" />
<param name="loop" value="ture" />
</object></p>






↑のflashソースが↓です。falseにしてみましたが止まりません・・・本当は止まるハズです。
<p><object date="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" type="application/x-shockwave-flash" width="300" height="200">
<param name="src" value="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1359297053" />
<param name="autostart" value="false" />
<param name="loop" value="false" />
</object></p>

★クリッカブルマップ
マップ全体を<map>タグで定義し、<area>タグでリンク領域とそのリンク先を指定します。 また、<src>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

●usemap属性・・・#記号を頭につけたusemap属性の値と、map要素のname属性の値を関連付けます。imgタグに付ける。

●shape属性・・・リンク領域の形状を指定します。
種類は
rect・・・四角形(初期値)
circle・・・円型
poly・・・多角形です。

coords・・・リンク領域の座標をピクセル数で指定します。
rectは左上、右下です(XY,XY)です。
circleは中心点の座標と半径を指定します。(X,Y,半径)です。
polyは全ての角の座標を指定します。(X,Y,X,Y,X,Y・・・)です。
座標位置の計算は正直ムズイです。

★タグ

mapタグ

・・・HTMLタグでひとつの画像に複数のリンクを設定することを、 クライアントサイドイメージマップといいます。

クライアントサイドイメージマップでは、 マップ全体を<map>タグで定義し、<map>~</map>間に <area>タグでリンク領域とそのリンク先を指定します。 また、<img>タグでマップを適用する画像とその画像が使用するマップ名を指定します。

3種類のフルーツジュースオレンジメロンストロベリー


↓これが上のクライアントサイドイメージマップのソースです。
<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722379" alt="3種類のフルーツジュース" usemap="#map" /><map name="map"><area shape="poly" coords="10,20,100,20,55,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722395" alt="オレンジ" /><area shape="poly" coords="105,20,195,20,150,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722385" alt="メロン" /><area shape="poly" coords="200,20,290,20,245,190" href="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347722399" alt="ストロベリー"></map><p>

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

カレンダー

06 2025/07 08
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

フリーエリア

にほんブログ村 IT技術ブログ HTML/CSSへ にほんブログ村 IT技術ブログ PHPへ

最新コメント

[11/23 テスト]

プロフィール

HN:
おやっさん
性別:
非公開

バーコード

ブログ内検索

P R

忍者ツールズプロフィール

忍者ツールズプロフィールは終了しました

カウンター