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>
よろしくおねがいします。
No.3
2915
301
40pt
2
2
<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>
（補足１）同じような事を複数箇所に記入するのは面倒ですし
ミスの元とともなりますのでスクリプトやスタイルは
一箇所に集めたほうが良いでしょう。
（補足２）スクリプトの学習を進めていく前に
class / id / name の違いについて学んでおく事をお勧めします
class組、id生徒番号、name氏名 と理解しておくと良いでしょう。
使い方の例
タグ単位 div {}
class単位 div.クラス {}
個別指定 div.id {}
（補足３）tableタグでレイアウトする方法は古くから
使われておりましたがtable本来の使い方とは異なりますし
最近の流れもレイアウトはスタイルシートにて行うのが主流ですから
色々覚える事が増えて大変だろうとは思いますが
早めの段階から改善しておくほうがよろしいかと思います。
（補足４）デザイン上spanタグが良いかと思って例に用いましたが
innerHTML（あるいはinnerText）は pタグなど他のタグでも
利用可能なものがありますので余力があれば探してみてください。
まだまだありますけど余談が長くなりすぎますので、このへんで・・・。
No.1
2594
5pt
ぼく自身はJavaScriptを知りません。
出来ればコメント覧に書けるようにして欲しかったです。
http://javascript.eweb-design.com/
このサイトで答えが判らなかったら、ポイントはいりません。
Mathusalaさん
すみませんお手数をお掛けしました。設定を間違っていました。
コメント欄に書けるように設定しました。
貴重なリンクありがとうございます、リンク拝見します。
No.2
826
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','１の画像');"><br> <img src="media/s_foto2.jpg" alt="2" onMouseOver="img_swap('media/foto2.jpg','２の画像');"><br> <img src="media/s_foto3.jpg" alt="3" onMouseOver="img_swap('media/foto3.jpg','３の画像');"></td> <td align="center"><img src="media/foto1.jpg" alt="*" id="big_photo"><br><span id="comment"></span></td> </tr> </tbody> </table> </body> </html>
m6uさん
なんと！サンプルコードを作っていただけたとは、大変感謝します。
一度このままコピペして実行してみてみます。
No.3
2915301
ここでベストアンサー
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>
（補足１）同じような事を複数箇所に記入するのは面倒ですし
ミスの元とともなりますのでスクリプトやスタイルは
一箇所に集めたほうが良いでしょう。
（補足２）スクリプトの学習を進めていく前に
class / id / name の違いについて学んでおく事をお勧めします
class組、id生徒番号、name氏名 と理解しておくと良いでしょう。
使い方の例
タグ単位 div {}
class単位 div.クラス {}
個別指定 div.id {}
（補足３）tableタグでレイアウトする方法は古くから
使われておりましたがtable本来の使い方とは異なりますし
最近の流れもレイアウトはスタイルシートにて行うのが主流ですから
色々覚える事が増えて大変だろうとは思いますが
早めの段階から改善しておくほうがよろしいかと思います。
（補足４）デザイン上spanタグが良いかと思って例に用いましたが
innerHTML（あるいはinnerText）は pタグなど他のタグでも
利用可能なものがありますので余力があれば探してみてください。
まだまだありますけど余談が長くなりすぎますので、このへんで・・・。
kn1967さん
貴重なご意見ありがとうございます。サンプルコードもすっきりしていて好きです。
《み》
2009/01/28 17:29:33
2
kn1967
simon4
kn1967さん
貴重なご意見ありがとうございます。サンプルコードもすっきりしていて好きです。