onclickで画像を入れ替える

Thursday, Feb 23, 2006 - 03:30 +09:00

Sig.はもともとJS嫌い。でも最近は抵抗感薄れてきました。用途が限定的で、＋α的なものであれば全然おっけ～なのです ...と、いうことで、仕事で作った簡単JSそのいち。サムネールをクリックしてメイン画像を入れ替えるスクリプト。

1 2 3

Script

<script language="JavaScript" type="text/javascript">
<!--
 
function changeImg(imgSrc) {
	document.photo.src = imgSrc;
	document.getElementById('photo').src = imgSrc;
}
 
//-->
</script>

HTML

<div style="text-align: center;">
  <p><img src="img/sample_no1.gif" alt="" width="210" nameid="photo" /></p>
  <p>
    <a href="#" onclick="changeImg('img/sample_no1.gif');return false;"><img src="img/sample_no1.gif" alt="1" width="60" /></a>
    <a href="#" onclick="changeImg('img/sample_no2.gif');return false;"><img src="img/sample_no2.gif" alt="2" width="60" /></a>
    <a href="#" onclick="changeImg('img/sample_no3.gif');return false;"><img src="img/sample_no3.gif" alt="3" width="60" /></a>
  </p>
</div>

備考

posted in Javascript | Comment (6) | Trackback (2)

6 Comments

1. Chihiro / February 28, 2006 at 07:42

スクリプト/HTMLの両方にミスがあったので修正しました。
画像のパスも間違っていたようなのでフルパスに修正。
これで多分大丈夫だと思います。

勝手に画像を使ってしまってすみません…

2. Sig. / March 01, 2006 at 01:45

IE 5-6, Opera, Firefoxで動作確認しました。
素晴らしい！ 十分実用できますね～。
いそいそと解読を始めます（´･ω･）ｂ

あ、画像に関しては気にすること無いですよ？ 5分で作ったような間に合わせ画像ですんで～。

3. Chihiro / March 01, 2006 at 17:38

何度もご迷惑をお掛けして申し訳ありません…。
TBを送ってみたのですが、こちらのスクリプトに不備があって日本語が文字化けしてしまいました。
急いで仕上げれば良いってものじゃないですね。

本当にすいませんでした。
TBについては、お手数ですが削除していただければ幸いです。

4. Sig. / March 02, 2006 at 02:09

はい、削除しておきました。
TBに関しては、確か文字コードについて互換性がどうとか記憶してます。頑張ってくらはい＾＾ｂ

5. Chihiro / March 02, 2006 at 07:41

送信しなおしてみました。どうやら成功の模様。
文字コードについてはMovable Type(互換)はUTF-8で送れば問題ない(はず)のですが、TB送信プログラム内部で文字化けを起こしていたので救えないです。

ありがとうございました。

6. Sig. / March 04, 2006 at 02:37

後はこちらからもTB送れるようになれば、完璧ですね！

2 Trackbacks

Javascript01 / March 02, 2006 at 07:35
ちょっと前の話ですが、Sig.さんがJSの話をしていたようなので便乗。 HTMLとCSSを切り離すように、HTMLとJavascriptを切り離すことも... 続きを読む
from Nein!
JS2 / March 02, 2006 at 07:36
とりあえずフルパスでやったら動いたのでソースを。 スクリプト内にセミコロン忘れ一箇所、あとゴミが残っていたので削除。 画像のパスについてはエントリー内... 続きを読む
from Nein!
このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/161

« Previous Entry - Next Entry »