JavaScript Program to Show Image Selected Image in Second Frame

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