スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト/--/--/-- --:--/スポンサー広告/ トラックバック(-)/コメント(-)

超簡単画像のポップアップ

サムネイル画像を拡大する方法、Highslide JS、lightbox、lightbox2などいろいろありますね。
FC2では、類似プラグインにPhotoscope pictlayer 画像ポップアップ等があるようです。

Photoscopeでは画像をクリックすることでその画像を背景としたページが手前に出て来るようです。とても面白いです。
pictlayerでは拡大表示される画像以外のところが半透明でlightboxなどに似ていますね。しかし動作しないサーバーがあるようです。
画像ポップアップはマウスを乗せると画像がポップアップされるようですが、中にはマウスをはずしても消えないものがあってその時はクリックすれば消えるようです。でもその位置がたまたま他の画像の上だった時、また新しく思わぬ画像がポップアップされていて、ストレスが多いです。

いろいろと調べて回り、たどり着いたのがcssによるマウスオーバーです。
以前にも記事(http://dreamy.blog2.fc2.com/blog-entry-106.html)にしましたが、
とても簡単です。

マウスを乗せた画像が消えてそれが大きくなるので、大きくなった分他の画像や文章が動くのがストレスでは有りますが、簡単さは抜群、
スタイルシートの
body
の中に

a:hover {
text-decoration: underline;
color: #CD8B32;
background-color: #fff;
}

a:hover img
{
width:auto;
height:auto;
}

と書き加えるだけです。
ただ、
記事を作成する時、
<a href="画像のアドレス"><img src="画像のアドレス" alt="説明" width="50" boeder="0" /></a>
のように width=""を入れる必要があるようです。
画像をアップする時にサムネイルを作成するとしてサムネイル画像で投稿した場合や
リンク先の画像が表示画像と同じ大きさだった場合はポップアップされません。

ストレスの無さではHighslide JS、lightbox、lightbox2が勝っていると思いますが、それらが使えない時などは良いですね。
超簡単画像のポップアップ/2008/10/01 11:54/[html] html/ トラックバック(1)/ comment(6)

comment

ありがとうございます

まさにやりたいことがこの記事のおかげでできました。ものすごく感謝しています。
ありがとうございました。

通りすがり #nRKtAiRg/2008/12/31(水) 08:03:10/URL[ 編集]

通りすがりさん

お役に立てて嬉しいです。
コメントいただいて励みになりました。ありがとうございます。

どりーみー #-/2008/12/31(水) 11:49:17/URL[ 編集]

質問をこの欄へすみません

どりーみーさん、おはようございます。
自分で絵を描いて(コンピューターで?)ブログに載せる手法を時間のある時に教えてください。

noa #vEzm.KPk/2009/03/12(木) 22:51:37/URL[ 編集]

noaさん

http://www.oekakibbs.com/
など、お絵かき掲示板などを借りれば、マウスで描けますね。
私も以前は借りていて練習しましたが、一ヶ月くらい使用しないと削除されてしまうんです。笑
書いたものをパソコンに保存で大丈夫だと思います。
楽しみです。

どりーみー #JalddpaA/2009/03/13(金) 16:55:26/URL[ 編集]

どりーみーさんへ

どりーみーさん、ありがとうございます。
描くのはマウスを使うんですか...。
難しい~。ペンで描くことは出来ないんでしょうかね?
どりーみーさんが作成したコメントの絵文字達も同じ様にマウスで作成したのですか?
絵の才能は無いですよー、ただ興味で...。


noa #vEzm.KPk/2009/03/14(土) 10:10:09/URL[ 編集]

簡単ですよ~

マウスを使うのは難しそうに思えるんですが、ちょっと慣れると普通の絵が上手い人は上手い下手の人は下手って感じでしょうか?
大丈夫ですよ。[

どりーみー #JalddpaA/2009/03/16(月) 20:40:15/URL[ 編集]

投稿















管理者にだけ表示を許可する

trackback

trackback url ↓

http://dreamy.blog2.fc2.com/tb.php/131-7209da56


blog_name=【さくらいの籠球雑記+備忘録】 ♥   画像のポップアップ #2
 
画像のポップアップを 変更しました
【2011/03/28 23:10】



| ホーム |

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