TOP / 画像
- 1 2 3 4 5.. >>

2011年11月21日

画像を横に隙間なく並べる。

スポンサード　リンク

 インライン要素のソースの改行,半角スペースくらいの空白に変換
<img>要素　改行スペース

　上のような棒グラフを画像で作る場合ソースの書き方によっては
画像と画像の間に隙間が入る場合があります。
　これを解消する為のソースのサンプルです。
インラインでの改行は半角スペースが表示されます。

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆

サンプルソース

・ソースを読みやすくするため imgタグごとに改行した書き方。
 改行スペースが入り隙間が空きます。
 <img src="image1.gif" width="100" height="100" alt="" />
 <img src="image2.gif" width="100" height="100" alt="" />
 <img src="image3.gif" width="100" height="100" alt="" />
 <img src="image4.gif" width="100" height="100" alt="" />
 <img src="image5.gif" width="100" height="100" alt="" />

・ソースを改行しない。これで解消できます。
 但しとても読み辛いソースになります。width,height,altは省略。
 <img src="image1.gif" /><img src="image2.gif" /><img src="image3.gif" />

・ソースを改行するなら'src'や'width','height','alt','/'などの前で
 改行すると良いでしょう。少しでも読みやすくするなら'/'  かな...
   <img src="image1.gif" width="100" height="100" alt="" 
 /><img src="image2.gif" width="100" height="100" alt=""
 /><img src="image3.gif" width="100" height="100" alt=""
 /><img src="image4.gif" width="100" height="100" alt=""
 /><img src="image5.gif" width="100" height="100" alt="" />
インライン要素の改行は、半角スペースが表示される。
span要素を改行して記述。 半角スペースが入ります。
 <p>
<span>span要素を改行して記述。</span>
<span>半角スペースが入ります。</span>
 </p>

span要素を改行せずに記述。半角スペースなし。
 <p>
<span>span要素を改行せずに記述。</span><span>半角スペースなし。</span>
 </p>

a要素を改行して記述 半角スペースが入ります
<p>
<a href="URL">a要素を改行して記述</a>
<a href="URL">半角スペースが入ります</a>
</p>

a要素を改行せずに記述半角スペースなし
<p>
<a href="URL">a要素を改行せずに記述</a><a href="URL">半角スペースなし</a>
</p>

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
CSSで作る横(水平)棒グラフ
CSSで作る垂直棒グラフ
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
CSSだけでおこなう、画像の入れ替えとポップアップ
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox

タグ：インライン要素 img タグ 半角スペース
posted by javaScript at 16:49 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする

2011年10月03日

複数の画像をあらかじめ読み込む。プリロード(プレロード)

スポンサード　リンク

 画像のプリロード（プレロード）
イメージオブジェクト

 例えばこのサンプルのような画像の切り替えでクリックしてから
画像を読み込んでいたら、回線が混んでいる場合など、
クリックしてから画像を読み込むまでに時間がかかるため、タイムラグが生じ
スムーズに画像が表示されない事があります。これを回避するために
ページ読み込み時に併せて
画像ファイルを読み込ませておきます。これがプリロード（プレロード）です。

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆

サンプルソース

<html>
<head>
<title>複数の画像をあらかじめ読み込む。プリロード(プレロード)</title>
<script language="JavaScript">
<!--
     var imgFile= new Array(); //画像ファイル 配列変数。
  imgFile[0]="../image/hana.gif";
  imgFile[1]="../image/sunset.gif";
  imgFile[2]="../image/raketto.gif";
  imgFile[3]="../image/influ2l.jpg";
  imgFile[4]="../image/influ3l.jpg";

     var prImg= new Array();
  for (i=0; i<imgFile.length; i++){ //imgFile.length はその個数。
   prImg[i] = new Image();//新しいイメージ(画像)オブジェクトを生成
    prImg[i].src = imgFile[i];//srcプロパティで画像ファイルのアドレス（URL)を設定。
       }
    var num = 0; //画像の番号。
  function cngImg(){
   num++;//番号を１進める。
    Len=imgFile.length;
  if (num == Len) // 番号が配列の個数になったら
   { num=0; } 　　// 0にする。
    document.getElementById('gazo').src =imgFile[num];//画像の切り替え
   }
// -->
</script>
</head>
<body>
  <a href="javascript:void(0)" onFocus="this.blur()" onclick="cngImg()">
   <img src="..image/hana.gif" id="gazo" width="300" height="300" border="0">
    </a>
</body>
</html>
prImg = new Image()
　プレロード(画像の先読み） 画像(イメージ)オブジェクト。
基本は簡単です。新しい画像オブジェクトを生成し
それに対して、srcプロパティで画像ファイルのアドレス（URL)を設定。
prImg = new Image(); //画像オブジェクト作成。
prImg.src = "***.gif"; とすれば画像が読み込まれます。

複数の画像をプレロードするには、配列変数に読み込む画像ファイル名を入れます。
prImg= new Array();
for(i=0; i<imgFile.length; i++){//imgFileは配列変数。lengthはその個数。
prImg[i] = new Image();//画像オブジェクト作成。
　prImg[i].src = imgFile[i];//画像ファイルのアドレス（URL)を設定。
　　}
プレロードの確認
　画像がロードされているならキャッシュされているはずなので
「インターネット一時ファイル」を観れば判ります。
IE なら　「ツール」⇒「インターネットオプション」⇒「全般」⇒
「閲覧の履歴 "インターネット一時ファイル"」⇒「設定」⇒「ファイル表示」で
画像ファイル名があれば先読みが完了しています。

ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
画像のズームアップ　初歩編
ドラッグして画像を移動する。複数画像 Mozilla Firefox対応
CSSだけでおこなう、画像の入れ替えとポップアップ
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
ローテーションバナー
ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox

タグ：New Image 画像(イメージ)オブジェクト
posted by javaScript at 19:43 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
- 1 2 3 4 5.. >>
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。