1233119568 HTML,Javascriptを使ってホームページを作っています。

添付画像の①までは作れたですが、②のように画像を選択して、下に説明文を載せることが出来ません。
方法を教えてください。よろしくお願いします。
なお作ったところ(①)までのコードは下記のようになっています。

<html lang ="ja">
<head>
<title>testpage</title>

<style type="text/css">
<!--
BODY{text-align:center}
-->
</style>

</head>

<body>
<h1>testpage</h1>
Test View<br>

<table>
<IMG src="media/s_foto1.jpg" onMouseOver="document.BigPhoto.src='media/foto1.jpg'"
style="position:relative; left:-100px;">
</table>
<table>
<IMG src="media/s_foto2.jpg" onMouseOver="document.BigPhoto.src='media/foto2.jpg'"
style="position:relative; left:-100px;">
</table>
<table>
<IMG src="media/s_foto3.jpg" onMouseOver="document.BigPhoto.src='media/foto3.jpg'"
style="position:relative; left:-100px;"><br>
</table>

<IMG src="media/foto1.jpg" name="BigPhoto" style="position:relative; top:-300px; left:110px;"><br>
<br>

</body>
</html>

よろしくおねがいします。

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2009/01/28 14:12:49
  • 終了:2009/01/28 17:36:00

ベストアンサー

id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012009/01/28 16:30:22

ポイント40pt
<html lang ="ja">
<head>
    <title>testpage</title>
    <style type="text/css">
    <!--
        body { width:800px; margin:0 auto; padding:0; text-align:center; }
        div#left { width:400; margin:0; padding:0; float:left; }
        div#right { width:400; margin:0; padding:0; float:right; }
    -->
    </style>
    <script language="JavaScript">
    <!--
        function ChangeBigPhoto(PhotoNo) {
            BigPhoto.src = 'media/foto' + PhotoNo + '.jpg';
            BigPhotoComments.innerHTML = PhotoNo + 'を指してます。';
        }
    -->
    </script>
</head>
<body>
    <h1>testpage</h1>
    Test View
    <div id="left">
        <img src="media/s_foto1.jpg" onMouseOver="ChangeBigPhoto(1)" />
        <br />
        <img src="media/s_foto2.jpg" onMouseOver="ChangeBigPhoto(2)" />
        <br />
        <img src="media/s_foto3.jpg" onMouseOver="ChangeBigPhoto(3)" />
        <br />
    </div>
    <div id="right">
        <img src="media/foto1.jpg" name="BigPhoto" id="BigPhoto" />
        <br />
        <span id="BigPhotoComments"></span>
    </div>
</body>
</html>

(補足1)同じような事を複数箇所に記入するのは面倒ですし

  ミスの元とともなりますのでスクリプトやスタイルは

  一箇所に集めたほうが良いでしょう。

(補足2)スクリプトの学習を進めていく前に

  class / id / name の違いについて学んでおく事をお勧めします

  class組、id生徒番号、name氏名 と理解しておくと良いでしょう。

  使い方の例

    タグ単位 div {}

    class単位 div.クラス {}

   個別指定 div.id {}

(補足3)tableタグでレイアウトする方法は古くから

  使われておりましたがtable本来の使い方とは異なりますし

  最近の流れもレイアウトはスタイルシートにて行うのが主流ですから

  色々覚える事が増えて大変だろうとは思いますが

  早めの段階から改善しておくほうがよろしいかと思います。

(補足4)デザイン上spanタグが良いかと思って例に用いましたが

  innerHTML(あるいはinnerText)は pタグなど他のタグでも

  利用可能なものがありますので余力があれば探してみてください。


まだまだありますけど余談が長くなりすぎますので、このへんで・・・。

id:simon4

kn1967さん

貴重なご意見ありがとうございます。サンプルコードもすっきりしていて好きです。

2009/01/28 17:21:12

その他の回答(2件)

id:Mathusala No.1

サディア・ラボン回答回数259ベストアンサー獲得回数42009/01/28 15:20:52

ポイント5pt

ぼく自身はJavaScriptを知りません。

出来ればコメント覧に書けるようにして欲しかったです。

http://javascript.eweb-design.com/

このサイトで答えが判らなかったら、ポイントはいりません。

id:simon4

Mathusalaさん

すみませんお手数をお掛けしました。設定を間違っていました。

コメント欄に書けるように設定しました。

貴重なリンクありがとうございます、リンク拝見します。

2009/01/28 17:01:56
id:m6u No.2

《み》回答回数82ベストアンサー獲得回数62009/01/28 16:07:18

ポイント35pt

 サンプルコードできました。 スタイルシートによるレイアウトがおかしかったので、table/tr/td要素でレイアウトしてあります。 ie6とFirefox3で動作確認とってます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang ="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<title>testpage</title>
	<style type="text/css">
	<!--
		BODY{text-align:center}
	-->
	</style>
	<script type="text/javascript">
	<!--
		function img_swap(i_src, i_comment) {
			var elem_img = document.getElementById("big_photo");
			elem_img.src = i_src;
			var elem_span = document.getElementById("comment");
			for (var i = 0; i < elem_span.childNodes.length; i++) {
				elem_span.removeChild(elem_span.childNodes[0]);
			}
			elem_span.appendChild(document.createTextNode(i_comment));
		}
	//-->
	</script>
</head>
<body>
<h1>testpage</h1>
<p>Test View</p>
<table border="0" align="center">
<tbody>
<tr>
	<td><img src="media/s_foto1.jpg" alt="1" onMouseOver="img_swap('media/foto1.jpg','1の画像');"><br>
	<img src="media/s_foto2.jpg" alt="2" onMouseOver="img_swap('media/foto2.jpg','2の画像');"><br>
	<img src="media/s_foto3.jpg" alt="3" onMouseOver="img_swap('media/foto3.jpg','3の画像');"></td>
	<td align="center"><img src="media/foto1.jpg" alt="*" id="big_photo"><br><span id="comment"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
id:simon4

m6uさん

なんと!サンプルコードを作っていただけたとは、大変感謝します。

一度このままコピペして実行してみてみます。

2009/01/28 17:09:58
id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012009/01/28 16:30:22ここでベストアンサー

ポイント40pt
<html lang ="ja">
<head>
    <title>testpage</title>
    <style type="text/css">
    <!--
        body { width:800px; margin:0 auto; padding:0; text-align:center; }
        div#left { width:400; margin:0; padding:0; float:left; }
        div#right { width:400; margin:0; padding:0; float:right; }
    -->
    </style>
    <script language="JavaScript">
    <!--
        function ChangeBigPhoto(PhotoNo) {
            BigPhoto.src = 'media/foto' + PhotoNo + '.jpg';
            BigPhotoComments.innerHTML = PhotoNo + 'を指してます。';
        }
    -->
    </script>
</head>
<body>
    <h1>testpage</h1>
    Test View
    <div id="left">
        <img src="media/s_foto1.jpg" onMouseOver="ChangeBigPhoto(1)" />
        <br />
        <img src="media/s_foto2.jpg" onMouseOver="ChangeBigPhoto(2)" />
        <br />
        <img src="media/s_foto3.jpg" onMouseOver="ChangeBigPhoto(3)" />
        <br />
    </div>
    <div id="right">
        <img src="media/foto1.jpg" name="BigPhoto" id="BigPhoto" />
        <br />
        <span id="BigPhotoComments"></span>
    </div>
</body>
</html>

(補足1)同じような事を複数箇所に記入するのは面倒ですし

  ミスの元とともなりますのでスクリプトやスタイルは

  一箇所に集めたほうが良いでしょう。

(補足2)スクリプトの学習を進めていく前に

  class / id / name の違いについて学んでおく事をお勧めします

  class組、id生徒番号、name氏名 と理解しておくと良いでしょう。

  使い方の例

    タグ単位 div {}

    class単位 div.クラス {}

   個別指定 div.id {}

(補足3)tableタグでレイアウトする方法は古くから

  使われておりましたがtable本来の使い方とは異なりますし

  最近の流れもレイアウトはスタイルシートにて行うのが主流ですから

  色々覚える事が増えて大変だろうとは思いますが

  早めの段階から改善しておくほうがよろしいかと思います。

(補足4)デザイン上spanタグが良いかと思って例に用いましたが

  innerHTML(あるいはinnerText)は pタグなど他のタグでも

  利用可能なものがありますので余力があれば探してみてください。


まだまだありますけど余談が長くなりすぎますので、このへんで・・・。

id:simon4

kn1967さん

貴重なご意見ありがとうございます。サンプルコードもすっきりしていて好きです。

2009/01/28 17:21:12
  • id:m6u
     innerHTMLを使うとieでしか動かず、Firefoxなどでは無視されるので、kn1967さんのコードはie専用です。
  • id:kn1967
    Firefox2系は動きます(確認済み)が
    レンダリングエンジンが変わったFirefox3系では
    動かない(未確認)でしょうね。

    ブラウザのバージョン毎の違いとか、
    それにあわせた書き方とか・・・
    おいおい、吸収していっていただければと思います。
  • id:kn1967
    動く動かないの話が出たので・・・
    BigPhoto.src = 'media/foto' + PhotoNo + '.jpg';
    BigPhotoComments.innerHTML = PhotoNo + 'を指してます。';
    の2行は
    document.getElementById('BigPhoto').src = 'media/foto' + PhotoNo + '.jpg';
    document.getElementById('BigPhotoComments').innerHTML = PhotoNo + 'を指してます。';
    に変更しておいてくださいませ。
    (これで Firefox3.0系 でも動くはずですが・・・コメント欄無責任モード中。)
  • id:m6u
     Firefox3ではinnerHTMLおよびinnerTextを使ってしまうと無視されてテキストの差し替えができなかったのです。
     そのため、DOM2に則った方法(removeChildやappendChild)で実現しています。
     まぁ、innerTextくらいなら下記の方法で実現できてしまうらしいのですが。
    <br>
    IE以外でinnerTextを使う方法 - Archiva
    http://archiva.jp/web/javascript/innerText_for_mozilla.html
    <br>
    Firefoxではタグに値を入れるときはinnerTextではなくtextContentを使う at HouseTect, JavaScripter Blog
    http://hisasann.com/housetect/2007/11/firefoxinnertexttextcontent.html
  • id:simon4
    ブラウザの表示にかんして色々問題が出てくるのですね、まったく知りませんでした。参考にさせていただきます。
  • id:kn1967
    >無視されてテキストの差し替えができなかった

    仕様上は出来るはずですが現在環境が無いため試せません。
    私の回答のまま(略式の2行はコメント欄のものと差し替え)で
    テストしていただけました?
  • id:m6u
     先のコメントに書いたように、innerHTMLやinnerTextではFirefox3では動かなかったから、DOM2に則った書き方でサンプルコードを書いた次第です。
     試して、動かなかったから、そういう書き方にしたのですが、そこまではっきり書かないとご理解いただけないのでしょうか。
     ちなみに、innerTextを使いつつも冒頭のDOCTYPE宣言を消しても、Firefox3ではテキストの差し替えが機能しません。
     のちのFirefox3のマイナーバージョンアップで改善されるかどうかもわかりませんが、現時点でベストな書き方は(innerHTMLやinnerTextに頼らない)DOM2に則った書き方であると確信します。
  • id:kn1967
    軽く検索してみても動くというコメントやサンプルコードがあるものですから
    どこかに違いがあるものと理解しておりますもので・・・疑ってスミマセン。

    おっしゃるように
    確実に動くほうを採用するべきところであるところは理解しております。
    お手間おかけして申し訳ありませんでした。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません