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

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

2008-08-12 (火) 19:18
ブログ
WordPress

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

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

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

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

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

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

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

■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属性を使用しています。
サイズ指定などは省いちゃってますが、、、(/ω＼)

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

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

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の数値だけ変えて用意しておけば便利ですねｗ

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