ロールオーバーで吹き出しをつけたい

解決済

質問者：nanaringo
質問日時：2009/02/17 13:30
回答数：1件

お世話になっております。カテ違いでしたらすみません。

顔写真が横3つ縦3つと複数配置してあるホームページを作ろうとしています。マウスオーバーしたときに写真1つ1つから吹き出しが出るようにしたいのですが、これはjavascriptで作るのでしょうか？それともFlashでしょうか？
普通のjavascriptのロールオーバーは作ったことがあるのですが、今回はマウスポイント前(写真のみ)と後(写真＋吹き出し)で画像の大きさが変わってしまうので、できるのか悩んでいます。(同じ写真のまま吹き出しだけが出るようにしたいのです)
計6枚の写真それぞれから吹き出しが出るようにしたいと思っています。所有ソフトはXP環境でDreamweaver8とFlash8です。どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2009/02/17 22:29

実際にどの程度のイメージなのか不明なので、なんとも言えませんが、Flashのほうがよさそう。

回答がないみたいなので、scriptでのとりあえずの例として…
マウスオーバーで吹出しを表示、アウトで元に戻しています。
やっていることは、単純に、吹出しのクラスを変えているだけ。
各吹出しが同じものならもっと簡単にできるし、テキストを引数化するのもありかも…
（画像を用いないようにするため、写真・吹出しともdivで代用。）
（吹出しはボーダーの加工で作っているので、形は良くないです。自由な
　形のものは、検索すればscriptでもいろいろ見つかることでしょう。）

<html>
<head>
<style>
.photo{
width:200px; height:200px;
padding:10px; margin:3px;
float: left;
border:2px solid Silver;
background-color:AliceBlue;
}
.fukidasi{
display: none;
position: absolute;
top: 30px; left: 30px;
}
.fukidasi_disp{
display:block;
position: relative;
top: 50px; left: 50px;
padding: 5px; width: 110px;
border-bottom:15px solid AliceBlue;
border-left:8px solid Ivory;
background-color: Ivory;
}
</style>
<script>
window.onload = function() {
var elm=document.getElementsByTagName('div');
for (var i=0; i<elm.length; i++){
if (elm[i].className=='photo'){
elm[i].onmouseover = function(){disp(this,1);};
elm[i].onmouseout = function(){disp(this,0);};
}
}
}
function disp(el,d) {
var f0=d?'fukidasi':'fukidasi_disp';
var f1=d?'fukidasi_disp':'fukidasi';
var e = el.firstChild;
while (e){
if (e.className==f0) {e.className=f1; break;}
e = e.nextSibling;
}
}
</script>
</head>
<body>
<div class="photo">写真のつもり1
<div class="fukidasi">文字テスト1</div>
</div>
<div class="photo">写真のつもり2
<div class="fukidasi">吹出し2</div>
</div>
<br style="clear:left;">
<div class="photo">写真のつもり3
<div class="fukidasi">吹出し3</div>
</div>
<div class="photo">写真のつもり4
<div class="fukidasi">吹出し4</div>
</div>
</body>
</html>

この回答への補足

締め切りが遅くなり、申し訳ありませんでした。ありがとうございました。

補足日時：2009/02/18 21:16

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
早速試してみました。吹き出しは中の文字も含め、完全に画像にするつもりだったので、こんなやり方もあるんだ！とびっくりです！感動しました。
デザインに凝らないといけないので、結局は画像になってしまうかもしれませんが、大変参考になりました。お忙しいところとても丁寧にご回答下さり、ありがとうございました！助かりました。

通報する

お礼日時：2009/02/18 11:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！