スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ソースのスリム化にeventが使えます

 画像のサムネイルをマウスでクリックしたとき、その画像のURLが取得して、メインの画像枠の画像をその画像に入れ替えるというのは一番一般的なブログの小技の技術です。そのばあい、サムネイルの画像タグの中に、マウスのクリックエベントのスクリプトを記述します。たとえばmainPhotoというID名のメイン画像を入れ替えるスクリプトは以下ように書きます。

onclick="mainPhoto.src=this.src;"

 しかし、このスクリプトにトランジションをいれると

onclick="mainPhoto.filters[0].apply(); mainPhoto.src=this.src; mainPhoto.filters[0].play(); "

 となり、またさらに写真説明の切り替えまでくわえると

 mainTitle.innerText="写真説明"; というのがまた入ります。

 クリックするサムネールが少ない時はまだいいのですが、サムネールが多くなっていくとソースの量もますます多くなり、ブログの投稿の文字制限を超えてしまうこともあり得ます。

 そこで、画像がたくさんあるDIV領域のなかの任意の画像をクリックして、その画像のURLやTilteが取得できれば、サムネールの一つ一つに同じようなスクリプトを記述するのではなくて、DIVタグの中に一つだけスクリプトを記述すればいいので、ソースがスクリプトに使う文字数をサムネールの数だけ節約できます。


 下の例は、DIV領域に画像を配置していますがスクリプトはDIVタグの中に記述しています。画像をクリックしてみてください。

<


 画像をクリックすると、ID名をつけてない画像のURLと写真説明を取得することが分かるはずです。

ソースは以下です。
<span style="front-size:0px;color:white;">
<<div onclick="alert(event.srcElement.src); alert(event.srcElement.title);">
<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723678784bd6cb0623ff6_import.jpg"
title="佐賀県樫原湿原の自生のサギ草です" /></div></span>

 感の鋭い方はこの機能の使い方がおわかりかもしれません。意味を考えなくて、こうすればこうなることを覚えて、いろいろな応用を考えてください。
 かなりのソースのスリム化がはかれると思います。

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。