Imran Rafique Imran Rafique - 1 month ago 5
HTML Question

How to hide div on interactive world

Wonder if someone could help me on this soo i got this code of world map, i created this using svg format, what i want to do is hide and show div when user clicks on africa also want to show the name of continent when someone hover over it
This is my code

test

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2321" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="195.61pt" width="372.35pt" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 372.3541 195.61465">
<g id="africa" fill="#53676c" transform="matrix(.016963 0 0 -.016963 -43.875 233.48)">
<path id="path2330" d="m13728 10231c-34-19-84-21-109-5-6 4-15 1-19-5-5-9-14-9-35 1-22 10-29 10-33 0-2-6-11-12-21-12-9 0-23-6-29-12-10-10-17-10-32 0-27 16-55 15-190-7-113-19-180-42-180-63 0-5-7-8-15-5-8 4-17 2-20-3-4-6-13-10-21-10s-26-11-40-25-30-25-37-26c-25-2-62 3-70 10-4 4-33 4-65 0-63-9-100 6-109 42-6 20-20 24-39 11-6-4-22-32-35-62-34-81-57-108-119-137-60-29-120-82-120-107 0-9-10-31-22-47-18-24-23-44-23-94 0-38-5-69-12-76s-13-18-13-24c0-5-16-24-36-40-20-17-45-38-56-48-23-21-80-47-103-47-22 0-36-16-62-72-13-27-27-48-31-48-27 0-82-82-82-123 0-24-26-64-66-102-12-11-32-47-45-80-12-33-30-66-40-72-9-7-20-29-24-50-3-21-9-49-12-62-4-17-2-22 8-19 7 2 24-7 36-20 23-25 30-52 14-52-17 0-22-50-6-73 21-30 19-116-5-177-11-28-20-62-20-77 0-30-49-113-67-113-7 0-13-4-13-10 0-5 7-10 15-10 9 0 20-12 26-27 6-16 15-36 20-45 5-10 5-19-1-23-6-3-10-27-10-53 1-39 6-52 30-76 33-32 39-49 14-39-13 5-15 2-9-18 11-35 18-39 40-22 14 11 16 17 8 20-15 5-18 33-4 33 5 0 14-13 20-30 5-16 15-30 20-30 6 0 11-7 11-15s7-15 15-15 15-3 15-8c0-4 23-31 50-61 32-35 50-63 51-80 1-42 7-64 20-71 6-4 8-13 5-19-4-6-3-11 3-11s8-6 6-12c-3-8 12-20 37-31 42-17 77-45 197-153 121-109 151-118 242-74 96 46 247 50 331 9 11-5 28-3 45 6 92 46 161 75 181 75 12 0 25 7 28 14 7 19 88 36 181 38 59 2 75-1 93-17 25-23 60-87 60-109 0-8 10-25 23-36 17-17 30-20 57-15 19 3 53 8 75 10 22 3 54 6 72 8 26 4 33 0 37-19 3-12 15-26 26-29s20-12 20-19c0-8 6-19 14-25 19-16 10-113-15-163-13-25-15-38-7-40 7-3 9-11 3-24-4-10-10-39-12-64-5-43-18-64-35-54-13 8-9-20 6-52 8-16 22-47 32-69s35-56 54-75c71-69 160-201 160-238 0-12 5-24 10-27 6-4 8-10 5-15s5-33 19-62c13-29 32-77 43-106 18-52 18-54-1-67-18-14-18-17 14-97 22-56 32-98 31-128-2-52-18-100-35-100-19-1-65-84-72-131-8-60-34-149-42-149-13 0-7-184 7-217 7-18 17-33 20-33 10 0 53-89 96-195 9-22 28-60 43-85 21-36 27-59 28-115 1-38 6-92 12-120 6-27 18-90 27-139 19-103 33-135 85-192 24-26 45-65 60-110 24-74 57-146 71-155 5-3 12-26 15-52 6-39 4-47-9-47-8 0-17-6-20-12-4-14 12-48 27-59 5-4 7-18 4-32-7-34 8-58 22-37 6 10 10 11 10 3 0-7 6-13 13-13 8 0 22-9 32-20 22-25 42-25 67-3 12 11 34 17 60 16 23-1 51 5 65 14 29 19 101 24 156 11 26-6 43-6 52 2 8 6 24 10 37 8s22 2 21 8c-1 7 17 14 41 16 53 6 154 72 211 136 11 13 37 40 59 60 37 36 106 134 106 151 0 13 67 81 80 81 11 0 29 37 54 115 18 56 22 130 6 120-18-11-10 13 13 40 12 14 54 38 92 54 51 20 76 37 93 61 14 21 19 37 13 43s-6 19 1 36c13 32 11 112-2 125-6 6-10 15-10 20 0 6 5 4 10-4 8-12 10-11 10 8 0 12-5 21-12 20-7-2-12 11-13 32-1 19-7 36-14 38-6 2-11 14-11 26 0 26 90 126 114 126 9 0 16 4 16 8s8 19 18 32c36 49 73 78 129 101 32 12 60 26 63 29 3 4 12 11 21 16 26 14 93 105 107 146 10 29 10 47 2 80-7 24-11 99-10 173 3 167 4 160-23 172-19 9-28 26-40 80-22 87-21 100 3 106 11 3 20 11 20 17 0 7-7 10-15 6-20-7-32 21-18 43 8 13 4 25-18 52-16 18-29 41-29 49 0 21 33 114 43 121s56 113 64 147c3 12 15 27 26 33 31 17 83 73 103 110 43 85 178 230 260 282 54 34 213 208 214 234 0 4 16 33 35 63s35 62 35 72c0 20 61 151 73 156 4 2 7 8 7 14 0 5 11 32 25 60 14 27 25 65 25 85 0 26 5 36 20 40 21 6 27 19 10 25-9 3-14 56-8 92 5 28-37 40-59 17-22-22-108-52-129-44-8 3-26 0-39-7s-34-10-46-7c-13 4-32-2-49-15-20-14-38-19-61-16-22 3-44-1-64-13-52-32-90-19-130 44-10 15-28 30-42 33l-24 6 23 12c38 19 34 48-14 98-24 25-50 55-58 67-8 11-19 21-25 21-5 0-18 14-27 30-10 17-25 33-35 37s-24 13-31 20c-7 6-19 10-26 7-9-3-15 4-18 20-4 18-1 26 9 26 12 0 12 2-1 15-19 20-23 19-30-7-6-23-7-23-21-3-9 11-20 38-25 60-28 115-42 144-91 182-56 44-70 76-73 173-2 38-9 76-15 84-7 9-14 27-15 41 0 14-3 25-6 25s-24 17-48 38c-47 42-75 112-44 112 11 0 8 7-11 24-14 13-38 50-55 82-16 33-39 76-51 97-11 21-21 43-21 50s-8 24-17 37c-10 14-19 33-20 43-2 11-19 37-38 60-19 22-35 51-35 63 0 13-4 25-9 29-6 3-13 37-17 75-3 38-12 77-19 87-26 35-145 23-189-19-12-11-29-17-41-14-11 2-40 10-65 15-25 6-54 15-65 20-36 16-103 29-128 24-19-4-27 0-32 16s-15 21-38 21c-54 0-104 19-110 40-3 12-14 20-25 20-12 0-24 5-27 10-15 24-110 2-155-36-31-27-40-72-21-103 16-26-24-80-60-81-8 0-33 13-55 28-41 30-104 52-145 52-35 0-66 25-74 61-5 20-16 34-33 41-15 6-40 17-56 26-18 9-52 15-82 14-33-1-66 6-93 18-40 20-67 51-54 64 3 3-1 6-10 6s-17-4-17-10c0-17-29-11-40 9-8 16-4 24 20 45 17 14 37 23 45 20 8-4 15-1 15 6 0 6-5 8-10 5-7-4-8 7-4 33 5 34 3 42-15 51-25 14-27 36-5 58 8 9 13 22 10 30s-1 11 4 8c6-3 10-2 10 3 0 19-14 21-32 5s-19-16-24 4c-5 17-29 32-54 33-3 0-22-9-42-19zm1908-3229c8-11 9-21 2-29-5-7-7-16-4-21 6-11-15-62-26-62-5 0-8-5-8-11 0-7-8-18-17-25-17-13-17-15 0-28 25-20 10-26-43-16-27 5-50 4-57-1-19-16-24 6-18 78 10 107 11 110 52 123 21 7 42 16 47 20 11 11 56-6 72-28zm-346-384c0-15 5-30 11-33 6-4 8-14 5-22s-1-24 5-36c9-16 9-22 0-25-20-7-12-42 13-51 24-10 36-30 36-62 0-11 11-42 25-69 31-61 31-62 0-48-16 7-24 17-20 26 3 7-2 23-10 35s-15 28-15 35c0 8-13 30-30 49-16 18-31 41-32 51 0 9-2 31-4 47-2 17-5 66-7 110-3 72-2 77 9 50 7-16 13-42 14-57zm360-458c6-11 12-41 14-65 1-25 8-51 14-57 15-15 16-55 2-63-14-9-6-148 9-153 6-2 11-8 11-13 0-6-4-7-10-4-5 3-10 1-10-4 0-6-5-11-11-11s-8 9-4 20c4 12 2 26-3 33-10 13-25 90-23 122 7 119 5 153-6 175-7 14-13 28-13 33 0 15 20 6 30-13z"/>
<path id="path2332" d="m16760 5958c-8-13-15-38-17-57-3-42-9-48-33-33-16 10-20 10-20-2 0-8 6-17 13-20 6-3 2-3-10 0-23 5-27-1-24-38 1-9-3-19-9-23-5-3-10-15-10-25 0-13-5-17-15-14-9 4-15 0-15-9 0-20-71-70-125-88-22-7-44-17-49-21-6-4-20-8-33-8-18 0-23-5-23-27 0-16-9-41-19-57-20-30-20-54 0-169 12-67 12-69-17-125-16-31-33-60-37-63-35-25-48-116-23-163 8-16 12-44 9-70s-1-46 6-50c6-4 11-15 11-25 0-22 30-51 53-51 9 0 17-4 17-10 0-15 52-11 74 5 11 8 32 15 47 15 30 0 69 40 69 69 0 9 6 25 14 36 7 11 19 45 26 75 8 30 22 71 31 91 10 20 24 58 30 85 7 27 29 92 50 146 21 53 41 114 44 135 12 72 15 83 28 80 12-2 13 7 1 83l-7 45 20-24 20-25 17 32c12 24 14 37 6 51-5 11-10 40-10 64s-5 59-11 78c-14 44-53 128-59 129-3 0-12-10-20-22z"/>
</g>

</svg>

</body>
</html>


here is code pen example
http://codepen.io/comunit/pen/xENoad

Answer

Here you go. Give your div an ID and then hide/show baed upon visibility.

<div id="divVisible">test</div>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2321" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="195.61pt" width="372.35pt" version="1.0" preserveAspectRatio="xMidYMid meet" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 372.3541 195.61465">
 <g id="africa" fill="#53676c" transform="matrix(.016963 0 0 -.016963 -43.875 233.48)">
  <path id="path2330" d="m13728 10231c-34-19-84-21-109-5-6 4-15 1-19-5-5-9-14-9-35 1-22 10-29 10-33 0-2-6-11-12-21-12-9 0-23-6-29-12-10-10-17-10-32 0-27 16-55 15-190-7-113-19-180-42-180-63 0-5-7-8-15-5-8 4-17 2-20-3-4-6-13-10-21-10s-26-11-40-25-30-25-37-26c-25-2-62 3-70 10-4 4-33 4-65 0-63-9-100 6-109 42-6 20-20 24-39 11-6-4-22-32-35-62-34-81-57-108-119-137-60-29-120-82-120-107 0-9-10-31-22-47-18-24-23-44-23-94 0-38-5-69-12-76s-13-18-13-24c0-5-16-24-36-40-20-17-45-38-56-48-23-21-80-47-103-47-22 0-36-16-62-72-13-27-27-48-31-48-27 0-82-82-82-123 0-24-26-64-66-102-12-11-32-47-45-80-12-33-30-66-40-72-9-7-20-29-24-50-3-21-9-49-12-62-4-17-2-22 8-19 7 2 24-7 36-20 23-25 30-52 14-52-17 0-22-50-6-73 21-30 19-116-5-177-11-28-20-62-20-77 0-30-49-113-67-113-7 0-13-4-13-10 0-5 7-10 15-10 9 0 20-12 26-27 6-16 15-36 20-45 5-10 5-19-1-23-6-3-10-27-10-53 1-39 6-52 30-76 33-32 39-49 14-39-13 5-15 2-9-18 11-35 18-39 40-22 14 11 16 17 8 20-15 5-18 33-4 33 5 0 14-13 20-30 5-16 15-30 20-30 6 0 11-7 11-15s7-15 15-15 15-3 15-8c0-4 23-31 50-61 32-35 50-63 51-80 1-42 7-64 20-71 6-4 8-13 5-19-4-6-3-11 3-11s8-6 6-12c-3-8 12-20 37-31 42-17 77-45 197-153 121-109 151-118 242-74 96 46 247 50 331 9 11-5 28-3 45 6 92 46 161 75 181 75 12 0 25 7 28 14 7 19 88 36 181 38 59 2 75-1 93-17 25-23 60-87 60-109 0-8 10-25 23-36 17-17 30-20 57-15 19 3 53 8 75 10 22 3 54 6 72 8 26 4 33 0 37-19 3-12 15-26 26-29s20-12 20-19c0-8 6-19 14-25 19-16 10-113-15-163-13-25-15-38-7-40 7-3 9-11 3-24-4-10-10-39-12-64-5-43-18-64-35-54-13 8-9-20 6-52 8-16 22-47 32-69s35-56 54-75c71-69 160-201 160-238 0-12 5-24 10-27 6-4 8-10 5-15s5-33 19-62c13-29 32-77 43-106 18-52 18-54-1-67-18-14-18-17 14-97 22-56 32-98 31-128-2-52-18-100-35-100-19-1-65-84-72-131-8-60-34-149-42-149-13 0-7-184 7-217 7-18 17-33 20-33 10 0 53-89 96-195 9-22 28-60 43-85 21-36 27-59 28-115 1-38 6-92 12-120 6-27 18-90 27-139 19-103 33-135 85-192 24-26 45-65 60-110 24-74 57-146 71-155 5-3 12-26 15-52 6-39 4-47-9-47-8 0-17-6-20-12-4-14 12-48 27-59 5-4 7-18 4-32-7-34 8-58 22-37 6 10 10 11 10 3 0-7 6-13 13-13 8 0 22-9 32-20 22-25 42-25 67-3 12 11 34 17 60 16 23-1 51 5 65 14 29 19 101 24 156 11 26-6 43-6 52 2 8 6 24 10 37 8s22 2 21 8c-1 7 17 14 41 16 53 6 154 72 211 136 11 13 37 40 59 60 37 36 106 134 106 151 0 13 67 81 80 81 11 0 29 37 54 115 18 56 22 130 6 120-18-11-10 13 13 40 12 14 54 38 92 54 51 20 76 37 93 61 14 21 19 37 13 43s-6 19 1 36c13 32 11 112-2 125-6 6-10 15-10 20 0 6 5 4 10-4 8-12 10-11 10 8 0 12-5 21-12 20-7-2-12 11-13 32-1 19-7 36-14 38-6 2-11 14-11 26 0 26 90 126 114 126 9 0 16 4 16 8s8 19 18 32c36 49 73 78 129 101 32 12 60 26 63 29 3 4 12 11 21 16 26 14 93 105 107 146 10 29 10 47 2 80-7 24-11 99-10 173 3 167 4 160-23 172-19 9-28 26-40 80-22 87-21 100 3 106 11 3 20 11 20 17 0 7-7 10-15 6-20-7-32 21-18 43 8 13 4 25-18 52-16 18-29 41-29 49 0 21 33 114 43 121s56 113 64 147c3 12 15 27 26 33 31 17 83 73 103 110 43 85 178 230 260 282 54 34 213 208 214 234 0 4 16 33 35 63s35 62 35 72c0 20 61 151 73 156 4 2 7 8 7 14 0 5 11 32 25 60 14 27 25 65 25 85 0 26 5 36 20 40 21 6 27 19 10 25-9 3-14 56-8 92 5 28-37 40-59 17-22-22-108-52-129-44-8 3-26 0-39-7s-34-10-46-7c-13 4-32-2-49-15-20-14-38-19-61-16-22 3-44-1-64-13-52-32-90-19-130 44-10 15-28 30-42 33l-24 6 23 12c38 19 34 48-14 98-24 25-50 55-58 67-8 11-19 21-25 21-5 0-18 14-27 30-10 17-25 33-35 37s-24 13-31 20c-7 6-19 10-26 7-9-3-15 4-18 20-4 18-1 26 9 26 12 0 12 2-1 15-19 20-23 19-30-7-6-23-7-23-21-3-9 11-20 38-25 60-28 115-42 144-91 182-56 44-70 76-73 173-2 38-9 76-15 84-7 9-14 27-15 41 0 14-3 25-6 25s-24 17-48 38c-47 42-75 112-44 112 11 0 8 7-11 24-14 13-38 50-55 82-16 33-39 76-51 97-11 21-21 43-21 50s-8 24-17 37c-10 14-19 33-20 43-2 11-19 37-38 60-19 22-35 51-35 63 0 13-4 25-9 29-6 3-13 37-17 75-3 38-12 77-19 87-26 35-145 23-189-19-12-11-29-17-41-14-11 2-40 10-65 15-25 6-54 15-65 20-36 16-103 29-128 24-19-4-27 0-32 16s-15 21-38 21c-54 0-104 19-110 40-3 12-14 20-25 20-12 0-24 5-27 10-15 24-110 2-155-36-31-27-40-72-21-103 16-26-24-80-60-81-8 0-33 13-55 28-41 30-104 52-145 52-35 0-66 25-74 61-5 20-16 34-33 41-15 6-40 17-56 26-18 9-52 15-82 14-33-1-66 6-93 18-40 20-67 51-54 64 3 3-1 6-10 6s-17-4-17-10c0-17-29-11-40 9-8 16-4 24 20 45 17 14 37 23 45 20 8-4 15-1 15 6 0 6-5 8-10 5-7-4-8 7-4 33 5 34 3 42-15 51-25 14-27 36-5 58 8 9 13 22 10 30s-1 11 4 8c6-3 10-2 10 3 0 19-14 21-32 5s-19-16-24 4c-5 17-29 32-54 33-3 0-22-9-42-19zm1908-3229c8-11 9-21 2-29-5-7-7-16-4-21 6-11-15-62-26-62-5 0-8-5-8-11 0-7-8-18-17-25-17-13-17-15 0-28 25-20 10-26-43-16-27 5-50 4-57-1-19-16-24 6-18 78 10 107 11 110 52 123 21 7 42 16 47 20 11 11 56-6 72-28zm-346-384c0-15 5-30 11-33 6-4 8-14 5-22s-1-24 5-36c9-16 9-22 0-25-20-7-12-42 13-51 24-10 36-30 36-62 0-11 11-42 25-69 31-61 31-62 0-48-16 7-24 17-20 26 3 7-2 23-10 35s-15 28-15 35c0 8-13 30-30 49-16 18-31 41-32 51 0 9-2 31-4 47-2 17-5 66-7 110-3 72-2 77 9 50 7-16 13-42 14-57zm360-458c6-11 12-41 14-65 1-25 8-51 14-57 15-15 16-55 2-63-14-9-6-148 9-153 6-2 11-8 11-13 0-6-4-7-10-4-5 3-10 1-10-4 0-6-5-11-11-11s-8 9-4 20c4 12 2 26-3 33-10 13-25 90-23 122 7 119 5 153-6 175-7 14-13 28-13 33 0 15 20 6 30-13z"/>
  <path id="path2332" d="m16760 5958c-8-13-15-38-17-57-3-42-9-48-33-33-16 10-20 10-20-2 0-8 6-17 13-20 6-3 2-3-10 0-23 5-27-1-24-38 1-9-3-19-9-23-5-3-10-15-10-25 0-13-5-17-15-14-9 4-15 0-15-9 0-20-71-70-125-88-22-7-44-17-49-21-6-4-20-8-33-8-18 0-23-5-23-27 0-16-9-41-19-57-20-30-20-54 0-169 12-67 12-69-17-125-16-31-33-60-37-63-35-25-48-116-23-163 8-16 12-44 9-70s-1-46 6-50c6-4 11-15 11-25 0-22 30-51 53-51 9 0 17-4 17-10 0-15 52-11 74 5 11 8 32 15 47 15 30 0 69 40 69 69 0 9 6 25 14 36 7 11 19 45 26 75 8 30 22 71 31 91 10 20 24 58 30 85 7 27 29 92 50 146 21 53 41 114 44 135 12 72 15 83 28 80 12-2 13 7 1 83l-7 45 20-24 20-25 17 32c12 24 14 37 6 51-5 11-10 40-10 64s-5 59-11 78c-14 44-53 128-59 129-3 0-12-10-20-22z"/>
 </g>
</svg>

<script type="text/javascript">
$("#svg2321").click(function(e) {
        e.preventDefault();
        if ($("#divVisible").is(":visible")) {
            $("#divVisible").hide();
        } else {
            $("#divVisible").show();
        }
    });
</script>
Comments