訂正：ボタンをクリックすると画像が切り替わる
→×クリック ○オンマウス でしたorz
最初はクリックにしていたのですが、FireFoxだとクリックしても切り替わらず、オンマウスにさし替えたの忘れてました…大変失礼しました。
タイトル修正したいorz
とりあえずソースだけでもよろしいでしょうか？
見やすいようにざっくり削ってあります。
※javascriptは
http://www.dynamicDrive.com
より拝借して、多少改変しています。
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Type" content="javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>test</title>
<script type="text/javascript">
<!--
/***********************************************
* Image Thumbnail Viewer II script- c Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
var dynimages=new Array()
dynimages[0]=["1.jpg","#"]
dynimages[1]=["2.jpg","#"]
dynimages[2]=["3.jpg","#"]
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml+='<img src="'+theimg[0]+'" alt="" />'
if (theimg[1]!="")
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
// -->
</script>
</head>
<body>
<div class="side_left">
<p>Aについて</p>
<p>
解説1<br />
○○○○○○○○○○○○○<br />
解説2<br />
○○○○○○○○○○○○○<br />
解説3<br />
○○○○○○○○○○○○○<br />
</p>
<p align="center">
画像<br />
<a href="#" onmouseover="modifyimage('dynloadarea', 0)"><img src="1small.jpg" width="50" border="0" alt="画像1" /></a>
<a href="#" onmouseover="modifyimage('dynloadarea', 1)"><img src="2small.jpg" width="50" border="0" alt="画像2" /></a>
<a href="#" onmouseover="modifyimage('dynloadarea', 2)"><img src="3small.jpg" width="50" border="0" alt="画像3" /></a>
</p>
</div>
<div class="side_right">
<div id="dynloadarea" class="main_img"><img src="1.jpg" width="400" name="def" alt=""></div>
</div>
</body>
</html>
