イメージアルバムを作りたいんですが
-
0 名前： zamo ： 2007/07/18（水） 03:49 ID:U0gcwWq9 sub-Q5
- 【何をしたいのか】
サムネイル画像をオンマウスで、指定した位置に画像とテキストが表示されるようなイメージアルバムを作りたいのですが…。
下記のページがまさにピッタリです！！
【参考ページ】 http://www.lea-lea.com/tenpo/wasin/event.html
【現在の状況】
JavaScriptの初心者でいろいろな掲示板やサンプルを試して見ましたが、どれもあてはまるものがありませんでした。
上記のページでは、どうやら指定した<div></div>内のHTMLを置き換えているようですが、試しに同じような記述をしてみましたがきちんと読み込めませんでした。
【サンプルの提示】
<body onload="document.getElementByID("up").innerHTML="<table class="imgbox"><tr><th><img src="images/menu02.jpg" alt="" width="250" height="180" /></th><td><p class="name">モンブラン</p><p class="txt">ココに説明文が入ります。</p><p class="plice">価格</p></tr></table>"">
上記の記述で初期の画像とテキストを指定。
サムネイルのリンクには、
<a href="#" onmouseover="document.getElementByID("up").innerHTML="<table class="imgbox"><tr><th><img src="images/menu01.jpg" alt="" width="250" height="180" /></th><td><p class="name">モンブラン</p><p class="txt">ココに説明文が入ります。ココに説明文が入ります。ココに説明文が入ります。ココに説明文が入ります。ココに説明文が入ります。ココに説明文が入ります。</p><p class="plice">価格</p></tr></table>""><img src="images/thum01.jpg" alt="モンブラン" width="50" height="36" /></a>
と指定。サムネイルはいくつかあるので、それぞれ上記のようなソースを記述しました。
置き換えたい先の部分には、<div id="up"></div>と記述しています。
非常にあつかましいお願いで申し訳ないのですが、サンプルソースと解説をご教授いただければと思います…。
よろしくお願いします。
【何をしてみたのか】
→ これまでどんなことを試したのか、どんなことを調べてみたのか、などを記入してください。
【検索用語】
→ どのような検索用語で調べてみたのかを記入してください。
【備考】
→ その他、回答者の参考になるような情報があれば記入してください。
→ 特定のツールに関連がある場合は、その名称やバージョンを記入してください。
→ ★矢印の付いた行は削除して使用してください★
-
1 名前： レオン ： 2007/07/18（水） 03:49 ID:v7aJX4/m sub-bK
- これは
http://www.tagindex.com/javascript/link/change3.html
で出来ませんか？ 文字の部分は
http://www.tagindex.com/javascript/link/exp2.html
で。
-
2 名前： zamo ： 2007/07/18（水） 03:49 ID:.Xvfn3Hl sub-Q5
- レオンさん、ご返信ありがとうございます。
私も上記の二つを合体させてみようと思いましたが、方法がわからずに悩んでました…。
サムネイルをオンマウスで画像は表示できたんですが、その横に来るテキストが表示されませんでした。
知識不足で申し訳ありませんがよい方法などありましたら教えていただけますでしょうか？
-
3 名前： 匿名 ： 2007/07/18（水） 03:49 ID:dBNgdka7 sub-t1
- こんばんは
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
HTML部分
<body>
<div id="up">
<div><img src="img/pic1.jpg" name="dish" width="400" height="400" /></div>
<div id="explanation">説明文１</div>
</div>
<div>
<a href="#" onclick="changer('説明文１','img/pic1.jpg')">1</a>
<a href="#" onclick="changer('説明文２','img/pic2.jpg')">2</a>
<a href="#" onclick="changer('説明文３','img/pic3.jpg')">3</a>
</div>
</body>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
js部分
function changer(TXT,SRC){
document.images["dish"].src = SRC;//イメージのソースを入れ替える
document.getElementById("explanation").innerHTML = TXT;//キャプションの文字を入れ替える
}
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
ちょっと古いやりだな・・・
一応テストしましたが即興なので不具合があったらすみません。。。
ちなみに
ALTは入れ替えてません。
必要ならば関数にsetAttributeとか追加して対応してみては？
あと元のページもですが（これは使いづらいな・・・）
クリックするとページのトップに移動してしまうので
aタグもしくはhref="#"を変更してみては？
さらに綺麗なソースが
この下に記入されるかもしれないので
そちらも参考にしてみてください。。。
では
-
4 名前： 匿名 ： 2007/07/18（水） 03:49 ID:dBNgdka7 sub-t1
- onclick
じゃなくて
onmouseoverでした
-
5 名前： zamo ： 2007/07/18（水） 03:49 ID:qDyAFp3F sub-Q5
- 匿名さん、ご返信ありがとうございます。
早速実行してみます！参考ソースまで丁寧に書いていただき、非常に感謝しております（＾＾）
また仕上がりましたら報告させていただきますね。
-
6 名前： zamo ： 2007/07/18（水） 03:49 ID:qDyAFp3F sub-Q5
- 結果報告です。
参考ソースコードは下記の通りです。
----------------------------------------------------------------------------------------------------------------------------
≪JavaScriptの記述（<head>〜</head>に記述する場合）≫
<script type="text/JavaScript">
function changer(SRC,TITLE,TXT,PRICE) {
document.images["picSrc"].src = SRC;
document.getElementById("picTitle").innerHTML = TITLE;
document.getElementById("picTxt").innerHTML = TXT;
document.getElementById("picPrice").innerHTML = PRICE;
}
//-->
</script>
</head>
≪表示させる部分のHTMLソース例≫
<div id="album"><!-- CSSで左へ回り込み指定 -->
<div id="imgBox"><img src="images/pic01.jpg" name="picSrc" width="***" height="***" /></div>
<div id="txtBox"><!-- CSSで右へ回り込み指定 -->
<p id="picTitle">タイトル1</p>
<p id="picTxt">説明文1</p>
<p id="picPrice">価格1</p>
</div>
<br clear="all"><!-- 回り込み解除 -->
</div>
<p>↓ マウスポインタを上に乗せると、上の拡大イメージと紹介文が切り替わります ↓</p>
<div id="thumlist">
<a href="#" onmouseover="changer('images/pic01.jpg','タイトル1','説明文1','価格1')"><img src="images/thum01.jpg" width="***" height="***" /></a>
<a href="#" onmouseover="changer('images/pic02.jpg','タイトル2','説明文2','価格2')"><img src="images/thum02.jpg" width="***" height="***" /></a>
<a href="#" onmouseover="changer('images/pic03.jpg','タイトル3','説明文3','価格3')"><img src="images/thum03.jpg" width="***" height="***" /></a>
</div>
----------------------------------------------------------------------------------------------------------------------------
今後同じような事をされる方の参考になればと思います。
今回ご教授いただいた、レオンさん、匿名さん、心より感謝いたします。
