<!--
filename:ajax_test.PHP
author:jom_ch
date:06/09/17
mail:phpoop@gmail.com
blog:http://blog.csdn.net/jom_ch
-->
<html>
<head>
<title>Ajax Example of View Picture</title>
<style type="text/css">
<!--
body {
font-size: 12px;
}
a:link, a:visited, a:active {
color: #616161;
text-decoration: none;}
a:hover {
text-decoration: none;
background-color: #616161;
color: #FFFFFF;}
-->
</style>
<script language="javascript">
<!--
function InitAjax(){
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function getPic(pic_id){
if(typeof(pic_id)=='undefined'){
return false;
}
var url="showPic.php?pic_id="+pic_id;
var show=document.getElementById("show_Layer");
var ajax=InitAjax();
ajax.open("GET",url,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
show.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
-->
</script>
</head>
<body>
<a href="#" οnclick="getPic(1)">P-1</a>
<a href="#" οnclick="getPic(2)">P-2</a>
<a href="#" οnclick="getPic(3)">P-3</a>
<a href="#" οnclick="getPic(4)">P-4</a>
<br>
<div id="show_Layer"></div>
</body>
</html>
<!--
showPic.php
-->
<?php
echo "<img src='pic_".$_GET[pic_id].".jpg' width=140 border=0>";
?>
同一目录下有pic_1.jpg,pic_2.jpg,pic_3.jpg,pic_4.jpg四个图片，我找了四个britney的小图，效果不错。
补充IFRAME更简单的方法：
<html>
<head>
<title>IFRAME的实现</title>
<script language="javascript">
<!--
function change(num){
document.change_pic.image.src="../ajax/images/pic_"+num+".jpg";
}
-->
</script>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href='#' οnclick="change(1)">p-1</a></td>
<td><a href='#' οnclick="change(2)">p-2</a></td>
<td><a href='#' οnclick="change(3)">p-3</a></td>
<td><a href='#' οnclick="change(4)">p-4</a></td>
</tr>
<tr>
<td colspan=4>
<Iframe src="iframe_pic_child.htm" name="change_pic" height=300 scrolling="auto" frameborder="0"></iframe>
</td>
</tr>
</table>
</body>
</html>
<!--iframe_pic_child.htm-->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<img src="" name="image">
</BODY>
</HTML>
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
