- 2008-08-12 (火) 19:18
- ブログ
日曜日にやって、昨日書こうと思って忘れてましたが、、、(ノ∀`)タハー
実は、以前からやってみたかったリンクのポップアップをやってみました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-様には大変感謝致します!
Comments:0
Trackbacks:0
- Trackback URL for this entry
- https://kimagureman.net/archives/620/trackback
- Listed below are links to weblogs that reference
- リンクのポップアップをやってみるw from Kimagureman! Studio ~趣味全開! 気まぐれ更新日記~