マウスオーバーでメイン画像を切り替える（JavaScript innerHTML）
ちょっとお願いされて、サムネイル画像上にマウスオーバーすると、メイン画像が切り替わるJavaScriptをつくりました。シンプルなソースなのでアップします。JavaScriptよくわからずに作ったので、 あまり上手なつくりでないかもしれません。
＜html＞
＜head＞
＜title＞Photo Change＜/title＞
＜script language="javascript" type="text/javascript"＞＜!--
var image="./images/01.jpg";
var title="Sample";
var space=" ";
onload = function(){
resetImage();
}
function viewImage(){
document.getElementById("image").src=image;
document.getElementById("image_title").innerHTML=title;
}
function resetImage(){
document.getElementById("image").src="./images/space.jpg";
document.getElementById("image_title").innerHTML=space;
}
--＞＜/script＞
＜/head＞
＜body＞
＜div id="wrap"＞
＜div id="main"＞
＜h1＞Photo Gallery＜h1＞
＜img id="image" /＞
＜div id="image_title"＞＜/div＞
＜div＞
＜hr /＞
＜div id="thumbnail"＞
＜img src="images/01.jpg" width="100" onMouseOver="javascript:viewImage(this)"
onMouseOut="resetImage()" /＞
＜/div＞
＜/div＞
＜/body＞
＜/html＞
トラックバック(0)
このブログ記事に対するトラックバックURL（トラックバックは承認後に公開されます）
システム開発に有用な情報を読ませていただきました。
大変参考になりました。
他のプログラム言語などの仕様書的な内容もあれば勉強になります。
これからも、良い情報の発信をしていだければ有難く思います。
ありがとうございました。
仕様書作成係