Home > ブログ > リンクのポップアップをやってみるw

リンクのポップアップをやってみるw

日曜日にやって、昨日書こうと思って忘れてましたが、、、(ノ∀`)タハー

実は、以前からやってみたかったリンクのポップアップをやってみましたw
すでにお気づきの方は、フィギュア一覧でご覧になっていることかと思います。

リンクのところにマウスカーソルを持ってくると、写真がポンッと出るのです≧∇≦
これって、JavaScriptとかじゃないと出来ないのかと思ってましたが、CSSだけでも出来るのですね!

まんどくさいプログラム組まずに済みましたyp’`,、’`,、’`,、’`,、(●´▽`●) ‘`,、’`,、’`,、’`,、
以前買ったJavaScriptの本は、これをやりたかったから買ったようなものなのでwww


で、「やりました。hahaha」ではつまらないので、なんとなく解説などw

参考にさせてもらったのは、Garage -dabun-さんという方のサイトですw
CSSだけでマウスオーバー時、画像をポップアップさせる」という記事内のソースを参考にさせてもらいました^^


私のやったHTMLソース&CSSソースは、↓こんな感じですw

■HTMLソース
<span class="popup">
<a href="http://リンク先アドレス"><img src="http://画像のアドレス" />コトブキヤ シャイニング・ウィンド マオ</a>
</span>



■CSSソース
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:0px;
left:550px;
}



HTMLソースの方は、div属性を使うと改行してしまったのでspan属性を使用しています。
サイズ指定などは省いちゃってますが、、、(/ω\)

画像のアドレスにポップアップさせたい画像を指定します。
あんまり大きくない画像がイイですねw


CSSソースの方は、最後のtopとleftの数値だけ変更させてもらいました。
またちょと位置を調整するかもしれませんがw

topとleftは、リンク文字の左端からの距離ですね。
マイナスを付ければ、上や左にも持ってこられます。


CSSソースは、popupimg.cssというCSSファイルにしてアップロードしました。
あとは、WordPressのテーマのフォルダ内にある「header.php」というファイルに追記しました。

追記は、↓こんな感じです。
<link rel="stylesheet" type="text/css" href="http://ご自分のアップロード先/popupimg.css" />

WordPressを使っていない方は、HTMLの<head>~</head>内に追記すれば良いかと思います。
※ソース内の日本語は、ご自分の情報に書き換えて下さい><


まだフィギュア一覧内にしか設置してませんが、撮影方法撮影機材にも追加したいと思います^^
CSSソースを複数作ってtopとleftの数値だけ変えて用意しておけば便利ですねw


このような情報をご紹介いただいているGarage -dabun-様には大変感謝致します!

コメント:0

コメントフォーム
入力情報を記憶させますか?

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

トラックバック:0

このエントリーのトラックバックURL
http://kimagureman.net/archives/620/trackback
Listed below are links to weblogs that reference
リンクのポップアップをやってみるw from Kimagureman! Studio ~趣味全開! 気まぐれ更新日記~

Home > ブログ > リンクのポップアップをやってみるw

ショップ Links
伊賀屋人形店
リンク
Blog Parts
にほんブログ村 ゲームブログ 艦隊これくしょんへ
にほんブログ村 コレクションブログへ
霜月はるかのFrostMoonCafe+
霜月はるかのFrostMoonCafe+
わぷー
ja.wordpress.org 公式キャラクター『わぷー』
ブログを見に来てくれた人たち
フィード

Return to page top

back to top