Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

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


サムネイル画像を拡大する方法、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 | トラックバック(1) |
コメント(6)
通りすがり/ どりーみー/ noa/ どりーみー/ noa/ どりーみー/ 

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

【2008/12/31 08:03】 url[通りすがり #nRKtAiRg] [ 編集]

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

【2008/12/31 11:49】 url[どりーみー #-] [ 編集]

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

【2009/03/12 22:51】 url[noa #vEzm.KPk] [ 編集]

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

【2009/03/13 16:55】 url[どりーみー #JalddpaA] [ 編集]

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

【2009/03/14 10:10】 url[noa #vEzm.KPk] [ 編集]

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

【2009/03/16 20:40】 url[どりーみー #JalddpaA] [ 編集]

投稿













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




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

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



| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview