html - 图像映射和悬停效果
问题描述
我被这个问题困住了。有没有办法通过悬停效果使这张地图的每个部分都可以点击？我从来没有做过这样的事情。
解决方案
我使用 GIMP 按颜色选择区域，但您也可以手动跟踪更简单的路径：
- 按颜色选择区域
- [选择] → [到路径]
- 并从路径窗口：右键单击并[导出路径...]
- 找到保存的 SVG 文件并将所有
<path>s 合并到一个 SVG 中。 - 使用 CSS
:hover,transition,fill - 使用 JS 处理点击事件
const ELS_areas = document.querySelectorAll("#my_map path");
const handleClickArea = (ev) => {
const area = ev.currentTarget;
console.log(area.id); // Get ID of clicked <path>
};
ELS_areas.forEach(area => {
area.addEventListener("click", handleClickArea);
});svg#my_map {
height: 180px;
width: auto;
}
path {
transition: 0.3s;
transform-origin: 50%;
stroke: #929ba9;
stroke-width: 4;
paint-order: stroke;
}
path:hover {
z-index: 1;
transform: scale(1.05);
fill: gold;
}<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg id="my_map" viewBox="0 0 431 609" xmlns="http://www.w3.org/2000/svg">
<path id="balranald"
fill="#a7c197"
d="M 301,420
C 301,420 300,424 300,424
300,424 246,424 246,424
246,424 246,438 246,438
246,438 238,438 238,438
238,438 238,445 238,445
238,445 232,444 232,444
231,448 228,464 224,466
222,468 215,468 212,468
212,468 208,487 208,487
208,487 206,495 206,495
206,495 201,497 201,497
200,507 197,506 186,506
186,506 186,510 186,510
186,510 181,510 181,510
181,510 181,519 181,519
181,519 190,520 190,520
190,520 186,541 186,541
186,541 183,548 183,548
183,548 167,551 167,551
167,551 162,569 162,569
162,569 153,573 153,573
153,573 155,581 155,581
156,585 157,590 163,589
167,589 173,584 174,581
176,577 176,571 182,570
186,569 188,573 190,575
192,576 196,578 199,579
209,582 216,579 223,582
223,582 238,591 238,591
241,593 241,596 243,598
245,599 252,604 255,605
255,605 260,590 260,590
262,585 266,584 268,580
268,580 270,572 270,572
272,568 275,565 277,562
280,557 281,555 285,552
297,542 298,548 307,543
313,540 313,538 317,534
318,532 320,530 322,530
325,530 327,535 333,535
337,536 345,534 350,533
353,532 356,533 360,531
363,529 366,526 369,524
374,519 375,520 377,515
377,515 366,515 366,515
366,515 366,484 366,484
359,481 361,476 361,470
353,469 355,466 352,461
349,453 348,457 347,447
347,444 347,439 345,437
343,435 335,436 333,436
333,436 333,424 333,424
333,424 301,420 301,420 Z" />
<path id="wentworth_shire"
fill="#7cd2f4"
d="M 203,384
C 203,384 202,398 202,398
202,398 159,393 159,393
159,393 162,411 162,411
162,411 152,410 152,410
152,410 145,409 145,409
145,409 132,420 132,420
132,420 112,422 112,422
112,422 113,418 113,418
113,418 108,418 108,418
108,418 108,423 108,423
108,423 68,423 68,423
68,423 68,419 68,419
68,419 59,419 59,419
59,419 59,408 59,408
53,409 47,409 42,408
42,408 38,434 38,434
38,434 36,444 36,444
36,444 29,446 29,446
29,446 5,446 5,446
5,446 5,515 5,515
5,515 25,516 25,516
25,516 33,521 33,521
33,521 40,522 40,522
40,522 51,526 51,526
53,527 56,529 59,528
65,528 68,518 77,520
80,520 82,523 86,523
86,523 105,522 105,522
110,522 111,525 116,526
119,527 122,526 125,529
130,532 127,536 130,539
133,542 140,542 143,546
144,549 142,554 143,560
144,564 149,567 152,571
152,571 162,569 162,569
162,564 164,550 168,548
171,546 180,549 182,546
183,545 184,540 184,539
184,539 187,521 187,521
187,521 179,521 179,521
179,521 179,508 179,508
179,508 184,508 184,508
184,508 184,503 184,503
184,503 199,503 199,503
199,503 199,495 199,495
199,495 204,493 204,493
204,493 207,485 207,485
207,485 211,465 211,465
213,465 221,467 224,465
227,462 228,446 231,443
232,442 234,442 236,442
236,442 236,436 236,436
236,436 244,436 244,436
244,436 244,422 244,422
244,422 263,422 263,422
263,410 262,409 274,409
274,409 274,402 274,402
274,402 265,402 265,402
265,402 265,397 265,397
265,397 258,397 258,397
255,400 251,402 249,397
248,396 249,392 249,390
249,390 203,384 203,384 Z" />
<path id="broken_hill"
fill="#f79226"
d="M 5,3
C 5,3 5,443 5,443
5,443 35,443 35,443
35,443 40,406 40,406
44,406 58,404 60,408
62,410 61,414 60,417
60,417 71,418 71,418
71,418 70,420 70,420
70,420 106,421 106,421
106,421 106,415 106,415
111,415 113,414 115,420
115,420 131,418 131,418
131,418 143,407 143,407
136,396 141,393 140,384
138,384 136,384 135,384
126,384 129,373 129,368
125,368 118,368 115,366
113,363 113,355 114,352
114,352 114,348 114,348
115,337 125,346 129,342
129,342 134,331 134,331
136,326 139,326 140,323
141,321 140,319 143,316
143,316 164,300 164,300
164,300 177,286 177,286
182,284 185,291 189,288
191,286 189,282 189,281
189,278 189,278 191,276
189,273 186,270 185,268
184,265 185,263 183,261
180,255 178,259 178,248
178,248 178,211 178,211
174,211 166,213 164,209
162,207 163,203 163,201
163,201 178,201 178,201
176,194 176,188 177,182
177,177 176,174 181,173
181,163 180,161 191,161
191,161 191,147 191,147
191,147 208,147 208,147
208,143 207,135 209,133
211,131 218,132 222,132
230,132 249,131 257,133
257,133 257,127 257,127
257,127 313,127 313,127
313,127 314,133 314,133
321,131 320,136 322,142
322,142 342,127 342,127
338,125 335,126 331,127
331,123 331,111 330,109
327,106 316,108 316,103
316,100 319,99 320,94
322,87 318,79 323,70
325,65 342,52 346,47
352,40 348,33 349,29
351,24 356,24 358,18
360,10 354,11 351,9
344,4 349,3 338,3
338,3 5,3 5,3 Z" />
<path id="central_darling_shire"
fill="#eeb948"
d="M 260,129
C 258,135 256,134 251,135
251,135 211,135 211,135
211,137 211,145 209,147
207,151 196,150 193,150
193,150 193,164 193,164
193,164 184,164 184,164
184,164 184,175 184,175
184,175 180,175 180,175
180,175 180,204 180,204
180,204 165,204 165,204
165,204 165,209 165,209
165,209 181,209 181,209
181,209 181,248 181,248
181,259 183,254 186,262
185,260 192,277 192,274
192,276 191,278 191,280
191,283 193,285 191,288
186,295 182,287 178,289
178,289 168,299 168,299
168,299 146,316 146,316
142,320 143,323 141,325
139,329 138,325 134,335
133,338 132,343 129,344
127,346 120,345 117,344
117,344 116,365 116,365
116,365 131,365 131,365
131,365 131,382 131,382
131,382 142,382 142,382
142,382 142,390 142,390
141,399 140,405 152,407
152,407 159,409 159,409
159,409 156,391 156,391
156,391 201,395 201,395
201,395 201,381 201,381
201,381 252,388 252,388
251,395 249,398 256,398
256,398 255,395 255,395
260,393 266,392 267,400
267,400 276,400 276,400
276,400 276,412 276,412
276,412 266,412 266,412
266,412 266,422 266,422
266,422 298,422 298,422
298,422 298,418 298,418
306,418 315,419 324,421
326,421 332,421 334,423
336,425 336,431 336,434
336,434 348,434 348,434
348,434 348,437 348,437
348,437 364,437 364,437
364,437 372,432 372,432
372,432 382,430 382,430
382,430 383,423 383,423
389,423 388,415 389,411
389,411 404,412 404,412
404,412 403,416 403,416
403,416 408,416 408,416
408,416 408,410 408,410
408,410 420,408 420,408
420,408 422,402 422,402
422,402 426,383 426,383
426,383 408,383 408,383
408,383 408,360 408,360
406,361 404,363 401,363
396,364 394,360 390,359
387,358 383,359 381,357
379,356 379,353 377,352
374,349 372,353 367,349
363,347 359,340 356,338
350,334 349,341 343,335
336,328 339,326 337,322
336,319 333,315 332,313
329,313 323,316 321,316
319,315 313,306 313,304
313,303 317,299 319,298
320,299 322,302 324,302
326,303 334,298 337,297
337,297 333,291 333,291
333,291 359,273 359,273
359,273 352,262 352,262
350,262 345,264 344,264
341,263 337,259 336,258
336,258 320,242 320,242
316,238 310,233 311,228
312,224 320,218 324,216
324,216 329,214 329,214
332,213 332,210 335,209
337,208 340,210 342,209
346,208 343,203 349,198
356,190 365,192 375,192
375,192 333,144 333,144
332,142 330,141 328,141
325,140 319,147 318,138
318,138 318,135 318,135
313,134 311,134 311,129
311,129 260,129 260,129 Z" />
</svg>推荐阅读
- javascript - 用星号或最后两个单词替换最后一个单词
- git - 如何列出从特定分支的任何提交创建的所有 git 分支
- python - 如何在执行期间不提供输入的情况下运行 aws-nuke？
- rabbitmq - Camel RabbitMQ 连接器在使用它们之前会读取数千条消息
- python - 我怎样才能让这个数据框显示最经常出现的单词
- pandas - 为什么我的代码在 1 列中给我数据，它应该在两个不同的列中给我
- php - 在 PHP 中处理 Cobol 文件和工作簿
- haskell - 如何创建一种特殊的列表？
- c++ - 使用 C++/Qt（已知密码）打开加密的 PDF
- sql - 如何修复 psql ubuntu 中“psql”处或附近的语法错误