オンマウスでの画像＋テキスト表示

質問

いつも的確な回答をいただいて、非常に感謝しております。
違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので
再度、質問いたしました。

今、HPを作成しているのですがテーブルを左右（左を大きく、右を６つくらい）に分けて
右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。
そして、その大きな写真の下にはテキストも載せたいのです
（マウスを乗せた写真によって違うテキストを載せる）。

～こんなかんじ～

│￣￣│□□□
│＿＿│□□□
テキスト

～～～～～～～～

検索ではビルダーを使った説明しかありません。
もし、フリーのHP作成ソフト（私が使っているのはalphaEDIT）でのやり方が乗っているサイト
無ければ、ご存知の方に教えていただきたいです。
よろしくお願いいたします。

回答No.3

is_may · ベストアンサー

No.2で説明した方法でいけると思いますが・・。

<script language="javascript"><!--
//1セット目
function xShow(str,exp){
document.getElementById("f").innerHTML="<img src='"+str+"'>";
document.getElementById("label").innerHTML=exp;
}
function xHide(){
document.getElementById("f").innerHTML=document.getElementById("label").innerHTML="&nbsp;";
}
//2セット目
function xShow2(str,exp){
document.getElementById("f2").innerHTML="<img src='"+str+"'>";
document.getElementById("label2").innerHTML=exp;
}
function xHide2(){
document.getElementById("f2").innerHTML=document.getElementById("label2").innerHTML="&nbsp;";
}
-->
</script>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td width="40%" align="center">
<div id="f">&nbsp;</div>
<div id="label">&nbsp;</div>
</td>
<td width="20%"><img src="picture1.jpg" onmouseover="xShow('picture1.jpg','A:1枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture2.jpg" onmouseover="xShow('picture2.jpg','A:2枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture3.jpg" onmouseover="xShow('picture3.jpg','A:3枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
</tr>
</tbody>
</table>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td width="40%" align="center">
<div id="f2">&nbsp;</div>
<div id="label2">&nbsp;</div>
</td>
<td width="20%"><img src="picture1.jpg" onmouseover="xShow2('picture1.jpg','B:1枚目の画像です')" onmouseout="xHide2()" width="100" height="100"></td>
<td width="20%"><img src="picture2.jpg" onmouseover="xShow2('picture2.jpg','B:2枚目の画像です')" onmouseout="xHide2()" width="100" height="100"></td>
<td width="20%"><img src="picture3.jpg" onmouseover="xShow2('picture3.jpg','B:3枚目の画像です')" onmouseout="xHide2()" width="100" height="100"></td>
</tr>
</tbody>
</table>

1セット目のサムネイル画像は
<img src="サムネイル画像URL" onmouseover="xShow('拡大画像URL','説明文')" onmouseout="xHide()">

2セット目のサムネイル画像は
<img src="サムネイル画像URL" onmouseover="xShow2('拡大画像URL','説明文')" onmouseout="xHide2()">

このようになっています。また、以下のことも確認してください。

<div id="f">1セット目の拡大画像</div>
<div id="label">1セット目の説明文</div>

<div id="f2">2セット目の拡大画像</div>
<div id="label2">2セット目の説明文</div>

がそれぞれ代入されます。

補足

再度、ありがとうございます。
このソースをコピペして色々操作してからプレビューすると、やはりマウスを離しても消えません。
ご面倒だと思うのですが２つ目のソースをはったのでみてくださいませんか？
scriptの記述は間違いないと思うので。。。
色々操作したので元のソースとは変わっています。
<table style="WIDTH: 177px; HEIGHT: 232px" cellspacing="0"cellpadding="0" align="center" border="0">
<tbody>
<tr>
<td><img height="16" src="sozai/table3/orange/cor17o1.gif" width="16" border="0" ></td>
<td><img height="16" src="sozai/table3/orange/cor17o2.gif" width="450" border="0" ></td>
<td><img height="16" src="sozai/table3/orange/cor17o1.gif" width="16" border="0" ></td>
</tr>
<tr>
<td><img height="200" src="sozai/table3/orange/cor17o3.gif" width="16" border="0" ></td>
<td valign="middle" align="center"><br>
<table style="WIDTH: 446px; HEIGHT: 172px"cellspacing="1" cellpadding="1" width="446" align="center"border="0">
<tr>
<td align="center" width="200" height="160" rowspan="2">
<div id="f2">&nbsp;</div>
<div style="FONT-SIZE: 10pt; COLOR: red"id="label2"></div></td>
<td width="80" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps7.jpg','チーズクリームふるーつ')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps7.jpg" width=69 ></p></td>
<td width="70" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps8.jpg','デラックスモンブラン')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps8.jpg" width=69 ></p></td>
<td width="70" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps9.jpg','さくらんぼのクリームワッフル')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps9.jpg" width=69 ></p></td>
</tr>
<tr>
<td valign="top" align="right" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps10.jpg','フルーツタルト')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps10.jpg" width=69 ></p></td>
<td valign="top" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps11.jpg','バニラシフォンケーキ')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps11.jpg" width=69 ></p></td>
<td valign="top" height="80">
<p align="right"><img onmouseover="xShow2('jpeg/5cmcake/ps12.jpg','さくらんぼクリームビスケット')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps12.jpg" width=69 ></p></td></tr></table></td>
<td><img height="200" src="sozai/table3/orange/cor17o3.gif" width="16" border="0" ></td>
</tr>
<tr>
<td><img height="16" src="sozai/table3/orange/cor17o1.gif" width="16" border="0" ></td>
<td><img height="16" src="sozai/table3/orange/cor17o2.gif" width="450" border="0" ></td>
<td><img height="16" src="sozai/table3/orange/cor17o1.gif" width="16" border="0" ></td></tr></tbody></table>

回答No.4

is_may

サムネイル画像の呼び出す関数名が異なっています。

<img onmouseover="xShow2('jpeg/5cmcake/ps7.jpg','チーズクリームふるーつ')" onmouseout=xHide() height=51 src="jpeg/5cmcake/s/s_ps7.jpg" width=69>

例えばこの場合、

onmouseover="xShow2('jpeg/5cmcake/ps7.jpg','チーズクリームふるーつ')"

で画像にマウスを乗せたとき、「xShow2()」を呼び出して「<div id="f2"></div>」「<div id="label2"></div>」にそれぞれ画像、説明文を表示していますが、マウスを外したときは

onmouseout=xHide()

で「xHide()」を呼び出しているので「<div id="f"></div>」「<div id="label"></div>」の内容を削除する、というプログラムが実行されるようになっています。ソース内にはこのような記述はありませんのでエラーが発生するわけです。

提示してくださったソース内には代入するフィールドに「<div id="f2"></div>」「<div id="label2"></div>」が使われているようですので、サムネイルの

onmouseout=xHide()

を
onmouseout=xHide2()
（<img onmouseover="xShow2('jpeg/5cmcake/ps7.jpg','チーズクリームふるーつ')" onmouseout=xHide2() height=51 src="jpeg/5cmcake/s/s_ps7.jpg" width=69> ）

に全て変更すればいけると思います。

回答No.2

is_may

同じページに二つ設置する場合は、

<script language="javascript"><!--
//1セット目
function xShow(str,exp){
document.getElementById("f").innerHTML="<img src='"+str+"'>";
document.getElementById("label").innerHTML=exp;
}
function xHide(){
document.getElementById("f").innerHTML=document.getElementById("label").innerHTML="&nbsp;";
}
//2セット目
function xShow2(str,exp){
document.getElementById("f2").innerHTML="<img src='"+str+"'>";
document.getElementById("label2").innerHTML=exp;
}
function xHide2(){
document.getElementById("f2").innerHTML=document.getElementById("label2").innerHTML="&nbsp;";
}
-->
</script>
<div id="f2">&nbsp;</div>
<div id="label2">&nbsp;</div>
<img src="picture1.jpg" onmouseover="xShow2('picture1.jpg','一枚目の画像です')" onmouseout="xHide2()" width="100" height="100">

このように共通部分名に「2」をつければ複数配置することも可能ですが、1つにまとめたほうが分かりやすくていいと思います。

テキストの装飾を変更するには、スタイルシートでテキストを代入する<div>を装飾するか、普通に<font>などで囲う方法があります。

1.スタイルシートを使う（直接記述）
id="label"の<div>を以下のように変更します。

<div style="font-size:10pt;color:#000000;" id="label"></div>

"10pt"、"#000000"の値を好きなように調節してください。

2.スタイルシートを使う（ヘッダー記述）
1.の方法とあまり変わりありませんが、<head></head>間に

<style type="text/css"><!--
#label {
font-size:10pt;
color:#000000;
}
-->
</style>

を記述します。

3.装飾タグで囲う
1,2の方法でできなかった場合。
かなり普通な方法ですが、<div>を<font>で囲います。こんなカンジ

<font size="1" color="#000000"><div id="label"></div></font>

補足で、
<div id="label"><font size="1" color="#000000"></font></div>
このように<div>の中に<font>を配置すると装飾が適応されません。
プログラムを実行すると<div id="label"></div>間の内容が削除されてテキストが代入されるためです。
装飾をするのであれば最初から
<font size="1" color="#000000" id="label"></font>
このように<font>タグにidを振ってもいいんですけどね。1.の方法に似てますけど・・。

お礼

何度もわかりやすい回答非常にありがとうございます（＾＾
２つ表示したのはいいのですが、１つ目はマウスを乗せると表示され、離すと消えるのですが
２つ目がマウスを離しても消えないのです（マウスを乗せたときに表示された写真のままになってしまう）。
これは改善できるでしょうか？

回答No.1

is_may

先ほど回答させていただいた者です。以下のようにすればできます。

<div id="f">&nbsp;</div>
にはオンマウスしたときに拡大画像が、

<div id="label">&nbsp;</div>
にはオンマウスしたときに説明文がそれぞれ代入されます。

又、サムネイルの書式は
<img src="サムネイル画像URL" onmouseover="xShow('拡大画像URL','説明文')" onmouseout="xHide()">

このような感じです。
onmouseout="xHide()"の()には何も入れなくて結構です。

<script language="javascript"><!--
function xShow(str,exp){
document.getElementById("f").innerHTML="<img src='"+str+"'>";
document.getElementById("label").innerHTML=exp;
}
function xHide(){
document.getElementById("f").innerHTML=document.getElementById("label").innerHTML="&nbsp;";
}
-->
</script>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td rowspan="2" width="40%" align="center">
<div id="f">&nbsp;</div>
<div id="label">&nbsp;</div>
</td>
<td width="20%"><img src="picture1.jpg" onmouseover="xShow('picture1.jpg','一枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture2.jpg" onmouseover="xShow('picture2.jpg','二枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
<td width="20%"><img src="picture3.jpg" onmouseover="xShow('picture3.jpg','三枚目の画像です')" onmouseout="xHide()" width="100" height="100"></td>
</tr>
<tr>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</tbody>
</table>

お礼

再度、回答ありがとうございます。
できました！非常にわかりやすくて感謝です（＾＾
あと、テキストの色とサイズを変えたいのですがどのような記述をすればよいでしょうか？
何度もスミマセン。。

補足

すみません。もう１つ質問なのですが、これを同じページに２個以上作る場合、どのようにすればいいのでしょうか？