Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#image_frame {
border-top:2px solid #666666;
border-right:2px solid #dddddd;
border-bottom:2px solid #dddddd;
border-left:2px solid #666666;
}
</style>
<script type="text/javascript">
function frame_image(im){
var wf='image_frame', fr=document.getElementById(wf), nim=new Image(),
doit=function(){window.frames[wf].location.replace(nim.src); fr.width=nim.width; fr.height=nim.height;};
nim.onload=doit;
nim.src=im;
}
onload=function(){window.frames['image_frame'].location.replace('about:blank');};
</script>
</head>
<body>
<iframe id="image_frame" name="image_frame" src="about:blank" width="300" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="1"></iframe>
<br>
<a href="image1.jpg" onclick="frame_image(this.href);return false;">Test 1</a>
<br>
<a href="image2.jpg" onclick="frame_image(this.href);return false;">Test 2</a>
<br>
<a href="image3.jpg" onclick="frame_image(this.href);return false;">Test 3</a>
</body>
</html>
Added Later:
There is no style:
float:middle;
resize iframe to loading image height/width
Reply With Quote
Bookmarks