マウスオーバーについて

質問

画像をランダムに表示させ、画像をマウスオーバーさせた時に吹き出しを表示させようと思い下のようにしました。

<a href="#" div class="img">

<script language="JavaScript">

<!--
ranimg = new Array();
ranimg[0]="画像１";
ranimg[1]="画像２";
xx = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(xx)];
document.write('<img src="'+ ranimg +'">');
// -->
</script>

</a></div>

ここまではランダムで画像表示。

<div class="bubble">
<p class="body">吹き出し

</p>
<div class="tail-bottom-right"></div>
</div>

吹き出しのｈｔｍｌコード。

.bubble {
margin: 36px 12px 72px 12px;
position: absolute; z-index: 1;
right: 12%;
bottom: 15%;
width:200px;
visibility:hidden;
}

.bubble .body {
margin: 0;
padding: 12px;
color: #ffffff;
background-color: #ff6347;
font-size: 12px;
text-align: justify;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.bubble .tail-bottom-right {
border-top: 18px solid #ff6347;
border-left: 24px solid transparent;
position: absolute;
bottom: -18px;
right: 25px;
width: 0;
height: 0;

}

吹き出しのCSSコード

画像をできるだけ使用しないようにしたかったので、CSSで吹き出しを作りました。問題はこのCSSで作った吹き出しをマウスオーバーで表示させるようにしたいのですが、どのように打ち込んだら出来るのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

CSSの書き方だけです。どうもセレクや継承--カスケーディング--の勉強がまだまだのような。
　いちいち適用する対象にclass名をつけていたら、メンテナンスも出来ない酷いHTMLになってしまいますし、先でデザインを変えるとき、HTMLまで書き直す羽目になり「スタイルシートを変えるだけでデザインを一気に変更できる」というCSSの最大の長所を捨てることになります。

　たとえば、header(ヘッダ)内にある、サイトイメージの画像でしたら
<div class="header">
　<h1>見出し</h1>
　<p class="siteImage" style="background-image:url(/images/abc.jpg)">
　　<img src="./images/thumbnail/abc.jpg" width="40" height="30" alt="">
　</p>
・・・・
div.header p.siteIamg{position:relative;width:40px;height:30px;}
div.header p.siteImage img{display:none;}/* 詳細度 0,0,2,3 */
div.header p.siteImage:hover img{
/* 擬似クラス:hoverを追加。詳細度 0,0,3,3 なので上の指定は上書きされる　*/
display:block;width:400px;height:300px;
position:absoute;top:300px;left:0px;
}

とか・・・javascriptで書き直すのは、
<div class="header">
　<h1>見出し</h1>
　<p class="siteImage" style="background-image:url(/images/abc.jpg)">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　^^^^^^^^^^^^
　　<img src="./images/thumbnail/abc.jpg" width="40" height="30" alt="">
　　　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^
　</p>
・・・・
だけですね。

お礼

勉強をし始めたばかりなので、理解がまだまだのようですね＾＾；
参考にしながらまず継承等の使い方をマスターしようと思います。

回答有難う御座いました。