<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImage.alt = imgName;
curImage.title = imgName;
}
</script>
<style type="text/css">
#mainContainer, #footerArea {
clear: both;
width: 700px;
margin: 10px;
}
#leftNav {
float: left;
width: 150px;
margin-right: 15px;
border-right: 1px solid #000;
text-align: center;
}
#rightDisplay {
float: right;
width: 530px;
margin: 0;
text-align: center;
}
img {
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->
<div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
<img src="images/bridget_moynahan_01_tn.jpg" onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
<img src="images/bridget_moynahan_02_tn.jpg" onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
<img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
<img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
<img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
<div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function showImage(imgName) {
var curImage = document.getElementById('currentImg');
var thePath = 'images/';
var theSource = thePath + imgName;
curImage.src = theSource;
curImage.alt = imgName;
curImage.title = imgName;
}
</script>
<style type="text/css">
#mainContainer, #footerArea {
clear: both;
width: 700px;
margin: 10px;
}
#leftNav {
float: left;
width: 150px;
margin-right: 15px;
border-right: 1px solid #000;
text-align: center;
}
#rightDisplay {
float: right;
width: 530px;
margin: 0;
text-align: center;
}
img {
margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->
<div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
<img src="images/bridget_moynahan_01_tn.jpg" onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
<img src="images/bridget_moynahan_02_tn.jpg" onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
<img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
<img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
<img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
<div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>
</body>
</html>
No comments :
Post a Comment