forked from VikramSingh138/Incredia
-
Notifications
You must be signed in to change notification settings - Fork 0
/
india_map.js
108 lines (93 loc) · 5.02 KB
/
india_map.js
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
// document.addEventListener('DOMContentLoaded', function() {
// const paths = document.querySelectorAll('svg path');
// paths.forEach(path => {
// path.addEventListener('mouseover', function() {
// let descriptionBox;
// // Determine which description box to show based on the path class
// if (path.classList.contains('path1')) {
// descriptionBox = document.querySelector('.path1-description');
// } else if (path.classList.contains('path2')) {
// descriptionBox = document.querySelector('.path2-description');
// } else if (path.classList.contains('path3') || path.classList.contains('path4')) {
// descriptionBox = document.querySelector('.path3-4-description');
// } else if (path.classList.contains('path5')) {
// descriptionBox = document.querySelector('.path5-description');
// } else if (path.classList.contains('path6')) {
// descriptionBox = document.querySelector('.path6-description');
// } else if (path.classList.contains('path7')) {
// descriptionBox = document.querySelector('.path7-description');
// }
// if (descriptionBox) {
// descriptionBox.style.display = 'block';
// }
// if (path.classList.contains('path3') || path.classList.contains('path4')) {
// document.querySelector('.path3').style.fill = '#000';
// document.querySelector('.path4').style.fill = '#000';
// } else {
// path.style.fill = '#000';
// }
// });
// path.addEventListener('mouseout', function() {
// let descriptionBox;
// // Determine which description box to hide based on the path class
// if (path.classList.contains('path1')) {
// descriptionBox = document.querySelector('.path1-description');
// } else if (path.classList.contains('path2')) {
// descriptionBox = document.querySelector('.path2-description');
// } else if (path.classList.contains('path3') || path.classList.contains('path4')) {
// descriptionBox = document.querySelector('.path3-4-description');
// } else if (path.classList.contains('path5')) {
// descriptionBox = document.querySelector('.path5-description');
// } else if (path.classList.contains('path6')) {
// descriptionBox = document.querySelector('.path6-description');
// } else if (path.classList.contains('path7')) {
// descriptionBox = document.querySelector('.path7-description');
// }
// if (descriptionBox) {
// descriptionBox.style.display = 'none';
// }
// if (path.classList.contains('path3') || path.classList.contains('path4')) {
// document.querySelector('.path3').style.fill = ''; // reset to original color
// document.querySelector('.path4').style.fill = ''; // reset to original color
// } else {
// path.style.fill = ''; // reset to original color
// }
// });
// });
// });
document.addEventListener('DOMContentLoaded', function() {
const paths = document.querySelectorAll('svg path');
paths.forEach(path => {
path.addEventListener('mouseover', function() {
const descriptionSelector = path.getAttribute('data-description');
const descriptionBox = document.querySelector(descriptionSelector);
if (descriptionBox) {
descriptionBox.style.display = 'block';
descriptionBox.style.opacity=1;
descriptionBox.style.backgroundColor='transparent';
}
if (path.classList.contains('path3') || path.classList.contains('path4')) {
document.querySelectorAll('.path3, .path4').forEach(p => p.style.fill = 'black');
//document.querySelectorAll('.path3, .path4').forEach(p => p.style.fill = '#f1f4de');
// document.querySelectorAll('.path3, .path4').forEach(p => p.style.stroke = 'black');
} else {
path.style.fill = 'black';
//path.style.fill = "#f1f4de";
// path.style.stroke = 'black';
}
});
path.addEventListener('mouseout', function() {
const descriptionSelector = path.getAttribute('data-description');
const descriptionBox = document.querySelector(descriptionSelector);
if (descriptionBox) {
descriptionBox.style.display = 'none';
descriptionBox.style.opacity=0;
}
if (path.classList.contains('path3') || path.classList.contains('path4')) {
document.querySelectorAll('.path3, .path4').forEach(p => p.style.fill = '');
} else {
path.style.fill = '';
}
});
});
});