頑張る父さんの記録帳

アクセスカウンタ

zoom RSS 【ブログ編集】 CSSで画像をポップアップ

<<   作成日時 : 2010/01/03 22:00   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 5 / トラックバック 0 / コメント 0

ウェブリブログで画像をポップアップしよう と試み、CSSだけで画像のポップアップというホームページを参考に、CSSを用いたオンマウスによる画像のポップアップを実現することができた。
(JavaScriptを使ったクリックによるポップアップに関する記事は→こちら

>>> sampleこんな感じだ
(スマホには対応していません)


【CSSソース】

ブログ管理ページ→ブログ→設定→オプション→CSS編集(上級者向け)→下記の赤字部分を追加→設定

/* アンカー */
a,
a:link,
a:active,
a:visited,
a:hover{
}
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}
.popup a:hover {
position:relative;
}
.popup a:hover img{
top:10px;
left:30px;
}



【HTMLソース】

下記の赤字部分を記事に追加

<span class="popup">
<a href="(画像ファイルの保存URL)" target="_blank">
<img src="(画像ファイルの保存URL)" alt="sample">
(画像ファイルを説明するテキスト等)</a></span>







にほんブログ村 ブログブログ ブログ活用法へ
ほかの解決策が見つかるかも!

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 5
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた
面白い

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
免責事項: 無断転載はおやめください。当ブログへのリンクはフリーですが、いかなる不利益・損害、期待した効果や実績が得られなかったとしても一切責任を負いませんので、ご自身の責任において行動をお願いします。また、当ブログから他のサイトにリンクをしている場合があります。移動された先のホームページは当方が管理するものでも運営するものでもございません。よって、その内容の真偽につきましても一切責任を負いませんのでご了承下さい。

プロフィール




頑張る父さん こちらからメールをお送りください☆



【ブログ編集】 CSSで画像をポップアップ 頑張る父さんの記録帳/BIGLOBEウェブリブログ
文字サイズ:       閉じる