1

それぞれの写真をクリックすると、写真が順番に表示されるようにしています。最初の画像をクリックすると 2 番目の画像に移動しますが、3 番目の画像は同じではありません。

メインページのコード:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.html",true);
xmlhttp.send();
}
</script>



<div id="myDiv">

<h2><a><button type="submit" onclick="loadXMLDoc()"><img src="/project2_ver3/vor/pic5.jpg" alt="vor" width="540" height="418"/></a></button></h2>

</div>

次にajax_info.htmlのコード:

<!DOCTYPE html>
<html>
<body>

<script>
function loadXMLDoc2()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDivv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","\project2_ver3\ajax_infoo.html",true);
xmlhttp.send();
}
</script>



<div id="myDivv">

<h2><button type="submit" onclick="loadXMLDoc2()"><img src="/project2_ver3/vor/pic2.jpg" alt="vor" width="540" height="418"/></button></h2>

</div>




</body>
</html>

最後に、ajax_infoo.htmlのコード:

（コードはトリミングされています）：

xmlhttp.open("GET","ajax_infooo.html",true);
xmlhttp.send();
}
</script>
<div id="myDiv">
<h2><button type="submit" onclick="loadXMLDoc2()"><img src="/project2_ver3/vor/pic1.jpg" alt="vor" width="540" height="418"/></button></h2>
</div>
</body>
</html>
4

1 に答える 1