CSS/imagewithtextandnewwindow.html at main · Snowil-tuscano/CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!-- Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be
displayed. Along with the appropriate image display, additional window should pop up displaying the benefit of
each fruit. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textrollover</title>
</head>

<body>
    <style>
        /* Add some CSS styles for label spacing */
        label {
            margin-right: 20px;
        }
    </style>
    <!-- sample image to display -->
    <img src="img1.jpg" height="400" id="img" width="600"><br><br>
    <label for="fruits" id="mango" onmouseover="change('mango.jpg')">mango </label>
    <label for="fruits" id="banana" onmouseover="change('banaa.jpg')">banana</label>
    <label for="fruits" id="orange" onmouseover="change('orange.jpg')">orange</label>
    <script>
        function change(imageSource) {
            if (imageSource == 'mango.jpg') {
                document.getElementById("img").src = imageSource;
                var newwin = window.open("", "new window", "width= 600, height=400")
                newwin.document.write(" Mango is sweet")
                setTimeout(function () {
                     newwin.close();}, 2000)

            }
            if (imageSource == 'banaa.jpg') {
                document.getElementById("img").src = imageSource;
                var newwin = window.open("", "new window", "width= 600, height=400")
                newwin.document.write(" Banana is sweet and long " + imageSource)
                //newwin.document.write('<img src="' + imageSource + '" height="400" width="600"><br><br>');

                setTimeout(function () {
                     newwin.close();}, 2000)

            }
            if (imageSource == 'orange.jpg') {
                document.getElementById("img").src = imageSource;
                var newwin = window.open("", "new window", "width= 600, height=400")
                newwin.document.write(" Orange  is sweet and sour ")
                setTimeout(function () {
                     newwin.close();}, 2000)

            }

        }
    </script>
</body>

</html>