JavaScript Program to Show Image Selected Image in Second Frame
Write a JavaScript program to show image selected image in second frame.
Source Code
<html>
<head>
<title>Calling child window JS function</title>
</head>
<frameset rows="25%, *">
<frame src="webpage1.html" name="topPage"/>
<frame src="webpage2.html" name="bottomPage"/>
</frameset>
</html>
<html>
<head>
<title>Add border to image on click</title>
<script>
function changeImage(img, name)
{
parent.bottomPage.targetImage.src=name+".jpg";
for(i=1; i<=3;i++)
{
document.getElementById('i'+i).border="0";
}
img.border = "4";
}
</script>
</head>
<body>
<center>
<img src="nature1.jpg" id="i1" name="image1" width="100" height="100" alt="image1.jpg" onclick="changeImage(this, 'nature1')"/>
<img src="nature2.jpg" id="i2" name="image2" width="100" height="100" alt="image2.jpg" onclick="changeImage(this, 'nature2')"/>
<img src="nature3.jpg" id="i3" name="image3" width="100" height="100" alt="image3.jpg" onclick="changeImage(this, 'nature3')"/>
</center>
</body>
</html>
<html>
<head>
<title>Webpage 2</title>
</head>
<body>
<img name="targetImage" alt="No image selected"/>
</body>
</html>
Output
