スポンサーサイト

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

解説 写真の上のカメラのアイコンクリックで画像を表示する技

 昨日の九重紅葉狩りのソースについて、簡単に説明します。
 まず、山の3D画像は、フリーのグーグルアースの最新バージョンを使いました。以前は、有料バージョンでしかGPSの記録データを読み込めませんでしたが、最新バージョンではフリーのものでもツールからGPSのログ(記録)を読み込んで衛星画像上に表示できます。
 GPS画像がなくても、画像編集ソフトなどで、グーグルアースの画像上に軌跡をマウスで書くこともできますね。

 カメラのアイコンは、Gooブログの携帯絵文字からお借りしました。携帯絵文字の画像の上で、マウスで右クリックしてプロパティーをみると、そのURLが所得できます。URLは http://blogimg.goo.ne.jp/img_emoji/m_0068.gif ですね。

 画像の上にこのカメラのアイコンを配置するには絶対配置を利用する必要があります。このGooブログで絶対配置を実現するには、CSS(スタイルシート)で一工夫する必要があります。

 HTMLではDIVという領域命令があります。横幅と高さを指定することで矩形の領域を確保します。

たとえば、600ピクセル×400ピクセルの領域を確保するには以下のように記述します。
<div style="width:600px; height:400px;">この間に画像を配置する</div>


 次に、この領域に絶対配置をすることに挑戦します。

 絶対配置を指定するにはCSSのなかで、position:absolute; とまず指定して、左上の座標を
   上からは top:0px;
   左からは left:0px;
のように指定します。

 しかし、上記の領域に画像を絶対配置して、top:0px; left:0px; と指定しても、何も工夫をしなければ、ブログ全体の一番左上に配置されて、領域の中には入ってくれません。

 そこでひと工夫です。

 領域の配置属性を、以下のように相対的配置に指定します。

<div style="position:relative; width:600px; height:400px;">このなかに画像を配置する</div>

 次に、グーグルアースで作成した画像をその領域に背景にして表示します。背景画像のCSSは background-image:url(画像のURL);という風に指定します。

 先ほどの画像を利用すれば、カメラのアイコンを配置する領域のソースは以下のとおりとなります。
 
 昨日の背景画像のURLは
 http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg
で画像のサイズが600ピクセル×379ピクセルですので、

<div style="position:relative; width:600px; height:379px; background-image:url(http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg);">このなかに画像を配置する</div>

 という風になります。

 これで前準備は終わりですね。
 
 つぎは、カメラのアイコンを適当な位置に配置します。
 たとえば、背景画像を画像編集ソフトで編集して、表示する位置情報を取得するか、適当な数値でやってみながら微調整しながら位置情報を取得します。それが、左から100ピクセル、上から200ピクセルのところにカメラアイコンを表示するには、以下のようにします。画像のタグを、先ほどの領域タグで囲みます。
 
<div style="position:relative; width:600px; height:379px; background-image:url(http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg);"><img src="http://blogimg.goo.ne.jp/img_emoji/m_0068.gif" style="position:absolute; top:200px; left:100px;" /></div>

さらに、マウスを乗せるとマウスの形が指先(pointer)に変わるようにcssに付け加えます。

<div style="position:relative; width:600px; height:379px; background-image:url(http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg);"><img src="http://blogimg.goo.ne.jp/img_emoji/m_0068.gif" style="position:absolute; top:200px; left:100px; cursor:pointer;" /></div>

 あとは、カメラのアイコンをクリックしたときに、別ウインドウで画像が表示されるイベントを記述します。マウスでクリックしたりして起動するプログラムをイベントと言います。

クリックするときに起こすイベントのプログラムは
    onclick="ここにプログラムを記述する"
となります。

 これは覚える必要はありませんが、600ピクセル×400ピクセルの画像を、別ウインドウで640ピクセルと430ピクセルの大きさのウインドウで表示するプログラムは以下のように書きます。ウインドウズの大きさは画像の大きさの5パーセントくらい大きく設定するとよいようです。実情に合わせてウインドウの大きさは決めてください。

onclick="window.open('http://blogimg.goo.ne.jp/user_image/10/f1/8f4dc01d385b44830c06bd20422f3179.jpg', '_blank','width=630, height=430,menubar=no, toolbar=no, scrollbars=no')"

ということで、このスクリプトを上記に加えて完成です

<div style="position:relative; width:600px; height:379px; background-image:url(http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg);"><<img src="http://blogimg.goo.ne.jp/img_emoji/m_0068.gif" style="position:absolute; top:200px; left:100px; cursor:pointer;" onclick="window.open('http://blogimg.goo.ne.jp/user_image/10/f1/8f4dc01d385b44830c06bd20422f3179.jpg', '_blank','width=630, height=420,menubar=no, toolbar=no, scrollbars=no')" /></div>


最後に、Gooブログでイベントプログラムや、IDが設定されているタグはブログの編集プログラムで中身が消えてしまいますから、まじないをかけます。タグのしるしの<を二重に<<とします。またこれが投稿画面でごみになりますので、文字の大きさを0ピクセルにすることで事実見えなくします。

というところでいかが本当に完成ソースです。

<span style="font-size:0px;"><div style="position:relative; width:600px; height:379px; background-image:url(http://blogimg.goo.ne.jp/user_image/6b/f1/0ee64d70841ccd02b1d712ab059b178e.jpg);"><<img src="http://blogimg.goo.ne.jp/img_emoji/m_0068.gif" style="position:absolute; top:200px; left:100px; cursor:pointer;" onclick="window.open('http://blogimg.goo.ne.jp/user_image/10/f1/8f4dc01d385b44830c06bd20422f3179.jpg', '_blank','width=630, height=420,menubar=no, toolbar=no, scrollbars=no')" /></div></span>


<

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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