-
Notifications
You must be signed in to change notification settings - Fork 0
/
scrollable_and_highlighting_image_maps.html
128 lines (112 loc) · 5.27 KB
/
scrollable_and_highlighting_image_maps.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!-- # Dylan Kenneth Eliot & GPT-4o ( Alpha Edition )
This just highlights scrollable image maps.
-->
<!DOCTYPE html>
<html>
<head>
<title>Horizontally Scrollable Section with Brython and Image Maps</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.0/brython.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.11.0/brython_stdlib.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.scrollable-container {
height: 470px; /* Adjust height to accommodate the largest image */
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding: 5px;
justify-content: center;
align-items: center;
}
.item {
margin-top: 5px;
display: inline-block;
margin-right: 5px;
margin-left: 5px;
text-align: center;
line-height: 150px;
}
/* Custom scroll bar */
.scrollable-container::-webkit-scrollbar {
height: 8px; /* Scrollbar height */
}
.scrollable-container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scrollable-container::-webkit-scrollbar-thumb {
background: #888;
}
.scrollable-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body onload="brython()">
<div class="scrollable-container" id="scrollable-container">
<!-- Content will be added by Brython -->
</div>
<!-- Image maps -->
<map name="cat-map" class="map">
<area shape="rect" coords="0,0,200,150" href="https://example.com/cat1" alt="Cat Part 1">
<area shape="rect" coords="200,0,400,150" href="https://example.com/cat2" alt="Cat Part 2">
<area shape="rect" coords="0,150,200,300" href="https://example.com/cat3" alt="Cat Part 3">
<area shape="rect" coords="200,150,400,300" href="https://example.com/cat4" alt="Cat Part 4">
</map>
<map name="dog-map" class="map">
<area shape="rect" coords="0,0,200,150" href="https://example.com/dog1" alt="Dog Part 1">
<area shape="rect" coords="200,0,400,150" href="https://example.com/dog2" alt="Dog Part 2">
<area shape="rect" coords="0,150,200,300" href="https://example.com/dog3" alt="Dog Part 3">
<area shape="rect" coords="200,150,400,300" href="https://example.com/dog4" alt="Dog Part 4">
</map>
<map name="cheetah-map" class="map">
<area shape="rect" coords="0,0,200,150" href="https://example.com/cheetah1" alt="Cheetah Part 1">
<area shape="rect" coords="200,0,400,150" href="https://example.com/cheetah2" alt="Cheetah Part 2">
<area shape="rect" coords="0,150,200,300" href="https://example.com/cheetah3" alt="Cheetah Part 3">
<area shape="rect" coords="200,150,400,300" href="https://example.com/cheetah4" alt="Cheetah Part 4">
</map>
<map name="bird-map" class="map">
<area shape="rect" coords="0,0,200,150" href="https://example.com/bird1" alt="Bird Part 1">
<area shape="rect" coords="200,0,400,150" href="https://example.com/bird2" alt="Bird Part 2">
<area shape="rect" coords="0,150,200,300" href="https://example.com/bird3" alt="Bird Part 3">
<area shape="rect" coords="200,150,400,300" href="https://example.com/bird4" alt="Bird Part 4">
</map>
<map name="whale-map" class="map">
<area shape="rect" coords="0,0,200,150" href="https://example.com/whale1" alt="Whale Part 1">
<area shape="rect" coords="200,0,400,150" href="https://example.com/whale2" alt="Whale Part 2">
<area shape="rect" coords="0,150,200,300" href="https://example.com/whale3" alt="Whale Part 3">
<area shape="rect" coords="200,150,400,300" href="https://example.com/whale4" alt="Whale Part 4">
</map>
<script type="text/python3">
from browser import document, html, window
# Select the scrollable container
scrollable_container = document['scrollable-container']
# Add content to the scrollable container
images = [
{"src": "https://i.imgur.com/CzXTtJV.jpg", "usemap": "#cat-map", "class": "map"},
{"src": "https://i.imgur.com/OB0y6MR.jpg", "usemap": "#dog-map", "class": "map"},
{"src": "https://farm2.staticflickr.com/1533/26541536141_41abe98db3_z_d.jpg", "usemap": "#cheetah-map", "class": "map"},
{"src": "https://farm4.staticflickr.com/3075/3168662394_7d7103de7d_z_d.jpg", "usemap": "#bird-map", "class": "map"},
{"src": "https://farm9.staticflickr.com/8505/8441256181_4e98d8bff5_z_d.jpg", "usemap": "#whale-map", "class": "map"}
]
for image in images:
item = html.DIV(Class="item")
img = html.IMG(src=image["src"], useMap=image["usemap"], Class=image["class"], style={"max-width": "600px", "max-height": "600px"})
item <= img
scrollable_container <= item
# Apply maphilight after all images are loaded
def apply_maphilight():
window.jQuery('.map').maphilight({
'fillColor': '0000f1',
'strokeColor': '00ff00',
})
window.setTimeout(apply_maphilight, 1000)
</script>
</body>
</html>