JavaScript: 2007年12月アーカイブ
ちょっとお願いされて、サムネイル画像上にマウスオーバーすると、メイン画像が切り替わる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＞
