人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

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

1233119568
●拡大する

●質問者: simon4
●カテゴリ:インターネット ウェブ制作
✍キーワード:.jpg BODY HTML JavaScript SRC
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● サディア・ラボン
●5ポイント

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

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

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

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

◎質問者からの返答

Mathusalaさん

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

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

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


2 ● 《み》
●35ポイント

サンプルコードできました。 スタイルシートによるレイアウトがおかしかったので、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>
◎質問者からの返答

m6uさん

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

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


3 ● kn1967
●40ポイント ベストアンサー
<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タグなど他のタグでも

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


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

◎質問者からの返答

kn1967さん

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ