いつも的確な回答をいただいて、非常に感謝しております。
違うカテで同じような質問をさせていただいたのですが少しやりたいことが変わったので
再度、質問いたしました。
今、HPを作成しているのですがテーブルを左右(左を大きく、右を6つくらい)に分けて
右にはいくつか写真を小さく載せてその右の写真にマウスを乗せると左に大きく表示されるようにしたいのです。
そして、その大きな写真の下にはテキストも載せたいのです
(マウスを乗せた写真によって違うテキストを載せる)。
~こんなかんじ~
│ ̄ ̄│□□□
│__│□□□
テキスト
~~~~~~~~
検索ではビルダーを使った説明しかありません。
もし、フリーのHP作成ソフト(私が使っているのはalphaEDIT)でのやり方が乗っているサイト
無ければ、ご存知の方に教えていただきたいです。
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
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="";
}
//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="";
}
-->
</script>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td width="40%" align="center">
<div id="f"></div>
<div id="label"></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"></div>
<div id="label2"></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>
がそれぞれ代入されます。
この回答への補足
再度、ありがとうございます。
このソースをコピペして色々操作してからプレビューすると、やはりマウスを離しても消えません。
ご面倒だと思うのですが2つ目のソースをはったのでみてくださいませんか?
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"></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
- 回答日時:
サムネイル画像の呼び出す関数名が異なっています。
<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
- 回答日時:
同じページに二つ設置する場合は、
<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="";
}
//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="";
}
-->
</script>
<div id="f2"></div>
<div id="label2"></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.の方法に似てますけど・・。
何度もわかりやすい回答非常にありがとうございます(^^
2つ表示したのはいいのですが、1つ目はマウスを乗せると表示され、離すと消えるのですが
2つ目がマウスを離しても消えないのです(マウスを乗せたときに表示された写真のままになってしまう)。
これは改善できるでしょうか?
No.1
- 回答日時:
先ほど回答させていただいた者です。
以下のようにすればできます。<div id="f"></div>
にはオンマウスしたときに拡大画像が、
<div id="label"></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="";
}
-->
</script>
<table border="1" width="804" height="313">
<tbody>
<tr>
<td rowspan="2" width="40%" align="center">
<div id="f"></div>
<div id="label"></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>
再度、回答ありがとうございます。
できました!非常にわかりやすくて感謝です(^^
あと、テキストの色とサイズを変えたいのですがどのような記述をすればよいでしょうか?
何度もスミマセン。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Android(アンドロイド) PayPayでアンドロイドスマホのアカウント画面の表示のポイントの使い方が知りたい 画像添付 5 2022/05/26 10:58
- 数学 テキストに打ち込むのが大変なので手書きの写真で失礼します。見づらかったら言ってください(T_T) < 5 2022/04/18 11:06
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- 統計学 QC検定2級合格に向け、現在勉強しています。教材のテキストの中で不適合品率に関する検定の例題が出題さ 2 2023/08/16 22:58
- 国産車 旧アクア 中期のパンフレットが欲しい 1 2022/11/24 15:56
- その他(悩み相談・人生相談) 著作権法違反になりますか? 6 2023/03/28 19:08
- タブレット iPadの操作方法 2 2022/11/18 10:16
- その他(買い物・ショッピング) フリマサイトで画像引用の件です 4 2023/03/28 18:14
- Illustrator(イラストレーター) ペイントでサイズを小さくする 5 2023/06/17 10:33
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既存画像(gif または png)の背...
-
ホームページの画面文字を濃く...
-
GASについて
-
ホームページビルダー
-
ホームページを作成したいので...
-
入社1年半目です。自習でシェア...
-
Chat GPTについて
-
XREA使用で作成したHTMLファイ...
-
CGIが実行可能なHP領域又はレン...
-
アニメ公式サイト風なWebページ...
-
chromeでhttpdを使うと
-
ホームページビルダー19文字化け
-
ホームページ作成
-
HTMLで、ホームページが作れる...
-
ページの内容コピペ 範囲が広い...
-
ホームページビルダー15で作っ...
-
ビフォアーアフターのページは...
-
今さらですがHPを作成するに当...
-
ホームページ制作で教えてくだ...
-
ホームページビルダーおすすめ?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【HTML、VBScript】HTAでのイベ...
-
-UWSC:IEで自動クリック-
-
seleniumbasic chrome操作について
-
Excel VBAに翻訳して頂けません...
-
オンマウスでの画像+テキスト表示
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
JavaScriptで変更した属性の元...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
jqueryのsortableで一部ソート...
-
window.openで値の渡し方を教え...
-
c++std::string型をTCHARに変換...
-
removeEventListenerについて
-
デフォルト非表示にしたい。【t...
-
textareaに画像を表示したい
-
jQueryで同じクラス名のものを...
-
JavaScript スライドの画像にリ...
おすすめ情報