お世話になっております。カテ違いでしたらすみません。
顔写真が横3つ縦3つと複数配置してあるホームページを作ろうとしています。マウスオーバーしたときに写真1つ1つから吹き出しが出るようにしたいのですが、これはjavascriptで作るのでしょうか?それともFlashでしょうか?
普通のjavascriptのロールオーバーは作ったことがあるのですが、今回はマウスポイント前(写真のみ)と後(写真+吹き出し)で画像の大きさが変わってしまうので、できるのか悩んでいます。(同じ写真のまま吹き出しだけが出るようにしたいのです)
計6枚の写真それぞれから吹き出しが出るようにしたいと思っています。所有ソフトはXP環境でDreamweaver8とFlash8です。どうぞよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
実際にどの程度のイメージなのか不明なので、なんとも言えませんが、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>
ご回答ありがとうございます。
早速試してみました。吹き出しは中の文字も含め、完全に画像にするつもりだったので、こんなやり方もあるんだ!とびっくりです!感動しました。
デザインに凝らないといけないので、結局は画像になってしまうかもしれませんが、大変参考になりました。お忙しいところとても丁寧にご回答下さり、ありがとうございました!助かりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
エクセルの表を作ってるんですが
-
ホームページビルダーを複数の...
-
ホームページの画面文字を濃く...
-
メールフォームで送信すると「...
-
クロムOSでhtmlを作成したい
-
ホームページビルダー22でリン...
-
ホームページビルダー21で作成...
-
ホームページビルダー19文字化け
-
メールフォーム設置の文字化け...
-
ビルドとリビルドの違いを教え...
-
ホームページビルダー11で作...
-
友達にドッキリをしたくて、ホ...
-
ホームページを作りたいのです...
-
無料で使えるホームページを教...
-
ホームページを作ろうかと
-
ホームページビルダー
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
flexboxでフッターが、本文に重...
-
CSS 画像中央そろえ
-
同じピクセル、解像度のPC表示...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
widthやheightの数値に単位(px...
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
smallにtext-allignが効かない
-
リストマーカーをボックス内に...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
<h1>、<h2>と<p><div>の行間を...
-
複数のボタンを等間隔に、かつ...
-
含む含まないという概念自体の...
-
HTML ul li で横並びにナビゲー...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
おすすめ情報