Kimagureman! Studio ～趣味全開！気まぐれ更新日記～

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

2008-08-12 (火)
ブログ
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-様には大変感謝致します！

原神タロットカード 56枚セットげんしんグッズ甘雨神里綾華胡桃楓原万葉宵宮八重神子カードゲーム記念品装飾品コレクション子供学生プレゼント

created by Rinker

Zvonema

Amazon

コメント: 0
トラックバック: 0

記事紹介　お礼

2008-08-11 (月)
感想・お礼

●フィギュアクリップ補足ブログさん
コトブキヤ　シャイニング・ウィンドマオのご紹介ありがとうございました＾＾

スクショ付きのご紹介ありがとうございます＞＜

今回のアンケート「地震でフィギュアが倒れたことが」は、、、
「ある。対策済み。」に1票（ノ∀｀）

たぶん、地震じゃないかと思うのですが、棚のT-elosが落ちてました（つд・）
幸い、大破は免れましたが、カカトなど数カ所が削れてしまいました・ﾟ・（つД｀）・ﾟ・

対策は、、、棚の奥へｗｗｗｗ
台座邪魔なので付けてなかったのです（：D)rz

●ace-FMさん
コトブキヤ　シャイニング・ウィンドマオのご紹介ありがとうございました≧∇≦

スクショ付きでｱﾘｶﾞﾀﾏｷﾝ ( ´∀｀)ﾉ⌒ω　(´∀｀)

~ ＼_(-_- Ξ -_-)_／カキーン ☆=== ω ・..。;・’

∑(￣□￣;)ﾅﾆｯ！

┃EXIT┃ヾ(￣□￣;)ﾉ⌒⌒☆ﾆｹﾞﾛｰ!!　　ω ≡≡≡===—

オイｗｗｗ

＞サイト構築も順調な様ですね♪

サイトもチマチマ修正してますｙｐ≧∇≦
もう少しあちこち直したいなぁ～と思いますｗ

あいかわらず改行問題が残ってますが、、、orz

●ガチャ萌え.comさん
【私信】ありがとうございました（＊’－’）

プライズフィギュアは、全然イイですね～＾＾
この値段でこのクオリティなら気軽に買えますねｗ

＞WordPress移行おめでとうございます～。

ありがとうございます＞＜
まだアチコチいじってるところですが、より見やすくなるようがんばります！

アルジャーノンプロダクト勝利の女神 NIKKE アクリルスタンドレッドフード約W60～105×H120mm以内アクリル製

created by Rinker

アルジャーノンプロダクト(ALGERNON PRODUCT)

Amazon

コメント (Close): 0
トラックバック (Close): 0

カッコインテグラ♪

2008-08-10 (日)
ちょと撮ってみました

ども。こんにちはｗ
ちょー久々の「ちょと撮ってみましたｗｗｗ」シリーズです(￣ー￣)

先日、購入して撮ってなかったデロリアンを撮ってみましたｙｐ≧∇≦

「やまと 1/24 BACK TO THE FUTURE I デロリアン」
「やまと 1/24 BACK TO THE FUTURE III デロリアン」