Skip to content

Commit 34fd2b0

Browse files
osama2kabdullahosama2kabdullah
committed
feature added
1 parent 862739e commit 34fd2b0

File tree

2 files changed

+155
-33
lines changed

2 files changed

+155
-33
lines changed

‎assets/style.css‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
.planer-container img {
2-
width: 100%;
3-
height: auto;
4-
}
5-
61
.property-list {
72
display: grid;
83
grid-template-columns: 1fr 1fr;
@@ -20,6 +15,11 @@
2015
padding: 10px 16px;
2116
gap: 10px;
2217
font-family: sans-serif;
18+
cursor: pointer;
19+
}
20+
21+
.property-card.selected {
22+
border: 1px solid #cca75b;
2323
}
2424

2525
.lot {
@@ -52,7 +52,7 @@
5252
padding: 6px 12px;
5353
border-radius: 6px;
5454
font-weight: bold;
55-
cursor: pointer;
55+
cursor: default;
5656
display: flex;
5757
align-items: center;
5858
}
@@ -62,32 +62,60 @@
6262
}
6363

6464
/* map */
65-
/* Basic image container */
65+
/* Container holding the image and map */
6666
.map-container {
6767
position: relative;
68+
width: 100%;
69+
height: auto;
6870
}
6971

70-
.plan-image {
71-
width: 100%; /* Or use fixed width/height */
72+
.map-container img {
73+
width: 100%;
7274
height: auto;
75+
display: block;
7376
}
7477

75-
/* Overlay for the areas */
76-
.area {
77-
position: relative;
78+
.overlay {
79+
position: absolute;
80+
top: 0;
81+
left: 0;
82+
width: 100%;
83+
height: 100%;
7884
cursor: pointer;
85+
/* background-color: #cca75ba3; */
86+
}
87+
88+
.overlay {
89+
background-color: transparent;
7990
}
8091

81-
/* Overlay effect for hover */
82-
.area:hover {
83-
background-color: rgba(0, 0, 0, 0.4); /* Transparent dark overlay */
84-
border: 2px solid rgba(255, 255, 255, 0.7); /* Optional border on hover */
85-
opacity: 0.7; /* Slight fade on hover */
86-
transition: all 0.3s ease;
92+
.overlay.overlay {
93+
background-color: #cca75ba3; /* your active highlight */
8794
}
8895

96+
.overlay::after {
97+
content: attr(data-title);
98+
position: absolute;
99+
top: 10px;
100+
left: 10px;
101+
background-color: rgba(0, 0, 0, 0.6);
102+
color: #fff;
103+
font-size: 14px;
104+
padding: 4px 8px;
105+
border-radius: 4px;
106+
display: none;
107+
}
108+
109+
.overlay:hover::after {
110+
display: block;
111+
}
89112

90113
@media (max-width: 600px) {
114+
.planer-header {
115+
position: sticky;
116+
top: 0;
117+
}
118+
91119
.property-list {
92120
gap: 10px;
93121
padding: 10px;

‎planer.html‎

Lines changed: 109 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,22 @@
1111

1212
<div class="planer-container">
1313

14-
<div class="map-container">
15-
<!-- Your image with image map -->
16-
<img src="assets/images/CHAMPS-scaled.jpg" usemap="#image-map" class="plan-image" alt="Campus image" />
17-
18-
<map name="image-map">
19-
<area target="" alt="Lot B11" title="Lot B11" href="" coords="672,476,665,584,127,561,129,451,525,451" shape="poly">
20-
<area target="" alt="Lot B01" title="Lot B01" href="" coords="1106,600,1079,702,127,677,131,571,1004,589" shape="poly">
21-
<area target="" alt="Lot B12" title="Lot B12" href="" coords="692,461,1059,452,1108,485,1111,580,697,571" shape="poly">
22-
<area target="" alt="Lot A01" title="Lot A01" href="" coords="1364,389,1341,431,1335,549,2255,535,2257,391" shape="poly">
23-
<area target="" alt="Lot A11" title="Lot A11" href="" coords="1389,672,1730,665,1735,544,1339,553,1330,663" shape="poly">
24-
<area target="" alt="Lot A12" title="Lot A12" href="" coords="2253,668,2255,546,1839,544,1834,668" shape="poly">
25-
<area target="" alt="Lot A21" title="Lot A21" href="" coords="1396,758,2228,774,2097,749,2090,675,1398,675" shape="poly">
26-
</map>
27-
14+
<div class="planer-header">
15+
<div class="map-container">
16+
<!-- Your image with image map -->
17+
<img src="assets/images/CHAMPS-scaled.jpg" usemap="#image-map" class="plan-image" alt="Campus image" />
18+
19+
<div class="" data-title="Lot B11" data-clip="672,476,665,584,127,561,129,451,525,451"></div>
20+
<div class="" data-title="Lot B01" data-clip="1106,600,1079,702,127,677,131,571,1004,589"></div>
21+
<div class="" data-title="Lot B12" data-clip="692,461,1059,452,1108,485,1111,580,697,571"></div>
22+
<div class="" data-title="Lot A01" data-clip="1364,389,1341,431,1335,549,2255,535,2257,391"></div>
23+
<div class="" data-title="Lot A11" data-clip="1389,672,1730,665,1735,544,1339,553,1330,663"></div>
24+
<div class="" data-title="Lot A12" data-clip="2253,668,2255,546,1839,544,1834,668"></div>
25+
<div class="" data-title="Lot A21" data-clip="1396,758,2228,774,2097,749,2090,675,1398,675"></div>
26+
27+
</div>
2828
</div>
29+
2930
<div class="property-list">
3031

3132
<!-- Row 1 -->
@@ -126,8 +127,101 @@
126127

127128

128129
</div>
129-
</div>
130130

131+
</div>
131132
</main>
133+
134+
<script>
135+
window.addEventListener('load', () => {
136+
const img = document.querySelector('.plan-image');
137+
const overlays = document.querySelectorAll('.map-container [data-title]');
138+
const propertyCards = document.querySelectorAll('.property-card');
139+
let selectedOverlay = null;
140+
let selectedCard = null;
141+
142+
const naturalWidth = img.naturalWidth;
143+
const naturalHeight = img.naturalHeight;
144+
145+
const updateOverlays = () => {
146+
const currentWidth = img.clientWidth;
147+
const currentHeight = img.clientHeight;
148+
149+
const scaleX = currentWidth / naturalWidth;
150+
const scaleY = currentHeight / naturalHeight;
151+
152+
overlays.forEach(overlay => {
153+
const coords = overlay.dataset.clip.split(',').map(Number);
154+
const points = [];
155+
156+
for (let i = 0; i < coords.length; i += 2) {
157+
const x = coords[i] * scaleX;
158+
const y = coords[i + 1] * scaleY;
159+
points.push(`${x}px ${y}px`);
160+
}
161+
162+
overlay.style.clipPath = `polygon(${points.join(',')})`;
163+
});
164+
};
165+
166+
updateOverlays();
167+
window.addEventListener('resize', updateOverlays);
168+
169+
propertyCards.forEach(card => {
170+
const lot = card.querySelector('.lot');
171+
const lotText = lot?.innerText.trim();
172+
173+
if (!lotText) return;
174+
175+
const matchedOverlay = Array.from(overlays).find(
176+
overlay => overlay.dataset.title === lotText
177+
);
178+
179+
if (!matchedOverlay) return;
180+
181+
card.addEventListener('mouseover', () => {
182+
if (matchedOverlay !== selectedOverlay) {
183+
matchedOverlay.classList.add('overlay');
184+
}
185+
});
186+
187+
card.addEventListener('mouseout', () => {
188+
if (matchedOverlay !== selectedOverlay) {
189+
matchedOverlay.classList.remove('overlay');
190+
}
191+
});
192+
193+
card.addEventListener('click', (event) => {
194+
event.stopPropagation();
195+
if (selectedOverlay && selectedOverlay !== matchedOverlay) {
196+
selectedOverlay.classList.remove('overlay');
197+
}
198+
199+
selectedOverlay = matchedOverlay;
200+
matchedOverlay.classList.add('overlay');
201+
202+
card.classList.add('selected');
203+
selectedCard = card;
204+
propertyCards.forEach(otherCard => {
205+
if (otherCard !== card) {
206+
otherCard.classList.remove('selected');
207+
}
208+
});
209+
210+
});
211+
});
212+
213+
document.addEventListener('click', () => {
214+
if (selectedOverlay) {
215+
selectedOverlay.classList.remove('overlay');
216+
selectedOverlay = null;
217+
}
218+
if (selectedCard) {
219+
selectedCard.classList.remove('selected');
220+
selectedCard = null;
221+
}
222+
});
223+
});
224+
</script>
225+
132226
</body>
133227
</html>

0 commit comments

Comments
 (0)