ここに吹き出し文字を記述します。 1. 画像左・折り返し(例)  ↓:HTML

 <p><a href="index2.html" target="_blank"><img border="0" src="yosi2.jpg" alt="ここに吹き出し文字を記述します。" align="left" width="100" height="75"></a> <font size="2"> 1. 画像左・折り返し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

ここに吹き出し文字を書いたるんや!。 2. 画像右・折り返し(例)  ↓:HTML

<p><a href="http://www.google.com/intl/ja/" target="_top"><img border="0" src="yosi3.jpg" align="right" alt="ここに吹き出し文字を書いたるんや!。" width="100" height="75"></a> <font size="2"> 2. 画像左・折り返し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

マウスオーバーで表示する文字や、”バルーン”。 3. 画像上・折り返し無し(例)  ↓:HTML

<p><a href="http://www.alltheweb.com/" target="_self"><img border="0" src="hamamugi.jpg" alt="マウスオーバーで表示する文字や、”バルーン”。" align="top" width="106" height="80"></a> <font size="2"> 3. 画像上・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

代替え表示文字をここに書くのサ〜*。 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML

<p><font size="2"><a href="http://windowsmedia.microsoft.com/" target="_blank"><img border="0" src="katabami.jpg" align="middle" alt="代替え表示文字をここに書くのサ〜*。" width="109" height="80"></a> 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

alt="  " タグでテキストを記述したんだよ…*。 5. 画像標準・折り返し無し(例)  ↓:HTML

<p><a href="http://entertainment.msn.com/" target="_parent"><img border="0" src="sora1.jpg" alt="alt=&quot;  &quot; タグでテキストを記述したんだよ…*。" width="100" height="75"></a> <font size="2"> 5. 画像標準・折り返し無し(例)  ↓:HTML</font></p> ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------  ----------------------------------------------------------------

ホーム へ       サンプルページ  画像配置  gazouhaiti.htm

画像の、左・右・上・中・下に、テキストを配置(折り返し有・無)。      HTML。      画像、配置などのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。  

デモは、 Winサイズの変化 、マウスオーバー時の吹き出し、画像からのリンク先オープンなどで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、gazouhaiti.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、gazouhaiti.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body> の任意の行間に (*2) をペーストします。   画像の配置は、”align="left"”部分で。 5種類の(例)があります。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、 (*2) を参考に太字部分の編集を任意に行います。    Internet Explorerの表示画面(≠ソース表示)からの、HTML直接コピーは、一旦Wordpadなどのテキストエディターにペースト(貼り付け)から行います。       アイコン画像などの変更は準備した画像ファイル名を 、hogehoge.html などの該当部分に記述。      ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 4.x〜 などで開いて。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

(*1) gazouhaiti.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)
<style type 〜 </style>は(削除可)
マウスオーバー時のテキスト  背景色 下線非表示
非マウスオーバー時の下線表示(逆も可)
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconu.ico">
<style type="text/css"><!-- A:hover {
COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none
}
A {
TEXT-DECORATION: underline
-
->
</style>

<base target="_blank">
<title>サンプルページ  画像配置</title>

(*2) gazouhaiti.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body>

 

1.

画像からのリンク 新しいWinで開く

画像外枠太さ 画像ファイル名・URL 吹き出し 画像左折り返し 画像幅 〃高さ 連番 テキスト

以下、同様。

 

2.  ページ全体で開く
画像右折り返し

 

 

 

 

3. 同じフレームで開く
画像上折り返し無し

 


 

 

4. 新しいWinで開く
画像中央(縦)折り返し無し

 


 

 

5. 親フレームで開く
画像標準折り返し無し(タグ記述無し)、 画像下折り返し無し  align="bottom" と同じ。

 

<body>

 

 

<p><a href="index2.html" target="_blank">

<img border="0" src="yosi2.jpg" alt="ここに吹き出し文字を記述します。" align="left" width="100" height="75"></a> <font size="2"> 1. 画像左・折り返し(例)  ↓:HTML</font></p>
<p><font size="2"> &lt;p&gt;&lt;a href=&quot;index2.html&quot;
target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;yosi2.jpg&quot; alt=&quot;ここに吹き出し文字を記述します。&quot;
align=&quot;left&quot; width=&quot;100&quot; height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font
size=&quot;2&quot;&gt;画像左・折り返し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><a href="http://www.google.com/intl/ja/" target="_top"><font size="2">
<img border="0" src="yosi3.jpg" align="right" alt="ここに吹き出し文字を書いたるんや!。" width="100" height="75"></font></a><font size="2"> 2. 画像右・折り返し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://www.google.com/intl/ja/&quot; target=&quot;_top&quot;&gt;&lt;img border=&quot;0&quot;
src=&quot;yosi3.jpg&quot; align=&quot;right&quot; alt=&quot;ここに吹き出し文字を書いたるんや!。&quot; width=&quot;100&quot;
height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像左・折り返し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p>
</font>

<p> </p>
<p> </p>

<p><a href="http://www.alltheweb.com/" target="_self"><font size="2">
<img border="0" src="hamamugi.jpg" alt="マウスオーバーで表示する文字や、”バルーン”。" align="top" width="106" height="80"></font></a><font size="2"> 3. 画像上・折り返し無し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://www.alltheweb.com/&quot; target=&quot;_self&quot;&gt;&lt;img border=&quot;0&quot;
src=&quot;hamamugi.jpg&quot; alt=&quot;マウスオーバーで表示する文字や、”バルーン”。&quot; align=&quot;top&quot; width=&quot;106&quot;
height=&quot;80&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像上・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><font size="2"><a href="http://windowsmedia.microsoft.com/" target="_blank">
<img border="0" src="katabami.jpg" align="middle" alt="代替え表示文字をここに書くのサ〜*。" width="109" height="80"></a> 4. 画像中央(縦)・折り返し無し(例)  ↓:HTML</font></p><font SIZE="2">
<p>&lt;p&gt;&lt;font size=&quot;2&quot;&gt;&lt;a href=&quot;http://windowsmedia.microsoft.com/&quot;
target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;katabami.jpg&quot; align=&quot;middle&quot;
alt=&quot;代替え表示文字をここに書くのサ〜*。&quot; width=&quot;109&quot;
height=&quot;80&quot;&gt;&lt;/a&gt; 画像中央(縦)・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>
<p> </p>

<p><a href="http://entertainment.msn.com/" target="_parent">
<img border="0" src="sora1.jpg" alt="alt=&quot;  &quot; タグでテキストを記述したんだよ…*。" width="100" height="75"></a> <font size="2"> 5. 画像標準・折り返し無し(例)  ↓:HTML</font></p>
<font SIZE="2">
<p>&lt;p&gt;&lt;a href=&quot;http://entertainment.msn.com/&quot; target=&quot;_parent&quot;&gt;</p>
<p>&lt;img border=&quot;0&quot; src=&quot;sora1.jpg&quot; alt=&quot;alt=&amp;quot;  &amp;quot; タグでテキストを記述したんだよ…*。&quot;
width=&quot;100&quot; height=&quot;75&quot;&gt;&lt;/a&gt; &lt;font size=&quot;2&quot;&gt;画像標準・折り返し無し(例)  ↓:HTML&lt;/font&gt;&lt;/p&gt;
</p></font>

<p> </p>

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。