CSSテクニックコミュのjava scriptを使用せず、CSSのみで画像をポップアップする方法

HTMLはじめてからまだ二ヶ月程の初心者なので、トンチンカンな事を質問していたらすいません。
ご指導お願い致します。

タイトルに書いてある件ですが、
java scriptを使用せず、CSSのみで画像をポップアップする方法として

http://www.lucky-bag.com/archives/2005/06/css_popup.html

こんな素敵な方法があったのでやってみました。

これは画像一枚に対して行っているけれど、うちは画像の一部に対して行いたいんです。
ところがhoverはaタグにしか適応されないらしく、mapタグでやってみたけれどできませんでした。
しかたがないのでやっつけでmapタグ自体をaタグで囲んでそのaタグに対してhoverをつけてみたらFireFoxでは成功。
けれど、aタグにhref属性がないとIEではhoverが正しく動作しないみたい。

こういう事をしたい場合ってどうしたらいいんでしょうか？

↓ソース（汚かったらごめんなさい＞＜）

/* CSS部分 */
img {
border: none;
}
div.photo {
position: relative;
width: 250px;

}

.large {
display: block;
position: absolute;
width: 0px;
height: 0px;
}

.photo a.popup,
.photo a.popup:visited {
display: block;
}

.photo a.popup:hover {
background-color: #FFF;
}

a.popup:hover .large {
width: 350px;
height: 305px;
}

/* マップ使用の場合 */
<div class="photo">
<img src="●●.jpg" width="250" height="130" alt="サムネイル" usemap="#link">
<a class="popup">
<map name="link" >
<area shape="rect" coords="170,115,250,130" href="#" >
</map>
<img src="▲▲.jpg" width="350" height="305" alt="拡大画像" class="large">
</a>
</div>

/* ノーマルの場合 */
<div class="photo">
<a href="#" title="" class="popup">
<img src="●●.jpg" width="250" height="130" alt="サムネイル">
<img src="▲▲.jpg" width="350" height="305" alt="拡大画像" class="large">
</a>
</div>

コメント(12)

最初
全て
最新の40件

[1] mixiユーザー 02月08日 12:49

この方法にはこだわっていません。
JAVAを使わない方法で同じ効果のある方法がなにかありましたらぜひ教えてください

[2] mixiユーザー 02月08日 13:29

おー。おもしろい方法ですね。
jsのほうがスマートなんでしょうけど、それでもあえてcssで挑戦しちゃう精神が結構好きです。

画像の一部だけということで、ものすごい原始的な方法ですけど
一枚の画像を何分割かして、リンクはりたいとこだけaで囲むとかじゃだめなんでしょうか？
テーブルを使うことになってしまうのでスマートな方法ではないんでしょうが、一番単純な方法の気はします。

新しい技術の提供じゃなくってごめんなさい。

[3] mixiユーザー 02月08日 14:03

<a class="popup">
に仮にhrefをつけてみましたが失敗しました。。
原因はそれではないみたいです…。

たへさんありがとうございます。
どうしてもうまくいかない場合はそちらの方法でやらせてもらいます！

[4] mixiユーザー 02月08日 14:11

<div class="photo">
<img src="●●.jpg" width="250" height="130" alt="サムネイル">
<a href="#" title="" class="popup">
<img src="▲▲.jpg" width="350" height="305" alt="拡大画像" class="large">
</a>
</div>

こーしといて、a 要素を display: block; にして、position: absolute; で好きな位置にしといて、中身の img （やサイズ）を :hover で制御（visibility とか、display とか）するっていうのはどうでしょう。

自分だったら拡大画像（a 要素）を background-image にします。a カラ要素じゃイカンですかね？自分は気にしませんけど（笑）

[6] mixiユーザー 02月08日 14:48

何故JavaScriptを使わないかによりますが。

JavaScript非対応のブラウザを考慮するのであれば、
GET(HTTP)したHTML中にBOX要素をposition: absolute;で配置すれば
popup風になるのではないでしょうか。

最近、webapp開発でpopup濫用の仕様に苦労している時に思ったこと。
GETを無くしたいためにpopupというなら本末転倒。

[8] mixiユーザー 02月08日 14:52

興味がわいたので勉強を兼ねてやってみました。
spanタグなどでごまかそうとしたところ、IEの挙動がおかしかったので透明gifのdammy.gifを使ってimgタグで。
CSSにはもともと詳しくないのでちょっと心配ですが、WinのIEとFFでいちおう動いていて、・・・よくよく見ると、4番のイチローさんの記述ともかなりかぶっている感じがするので、わりと大丈夫かな、というところです。

<html>
<head>
<style type="text/css">
img {
border: none;
}
div.photo {
position: relative;
width: 250px;
height: 130px;
}
img.large, a.popup:visited img.large {
display: none;
}
a.popup img.dammy {
display: block;
position: absolute;
left: 170px;
top: 115px;
width: 80px;
height: 15px;
}
div.photo a.popup:hover {
background-color: #FFF;
}
a.popup:hover img.large {
display: block;
width: 350px;
height: 305px;
}
</style>
</head>
<body>
<div class="photo">
<img src="s.jpg" width="250" height="130" alt="サムネイル">
<a class="popup" href="#"><img class="dammy" src="dammy.gif" width="80" height="15" alt="透明gif">
<img src="l.jpg" width="350" height="305" alt="拡大画像" class="large">
</a>
</div>
</body>
</html>

[10] mixiユーザー 02月08日 15:50

ｵｵｵｵ！すごい！
ありがとうございました！

Cappuccinoさん、JAVAを使わないのは特に考えもなく、
ただまだコーディングとかが未熟でJAVAを勉強するところまでいってないだけなんです。
とりあえずはCSSの勉強と思い調べていくうちにトピに記載されているサイトを見つけまして。

うちはmapを使った方法しか頭になかったのですが、
みなさんみたいにいろんな方法を機転をきかせて試せるようにならないとなーって思いました。
本当に今回は勉強になりました！ありがとうございました。

[11] mixiユーザー 02月08日 16:08

JavaとJavaScriptは別物です。

[12] mixiユーザー 02月08日 16:12

げーそなんですか！
あたしったら赤っ恥。
もっと勉強して出直してきます。

ともかくもみなさまありがとうございました＾＾

ログインすると、みんなのコメントがもっと見れるよ