Click here to Skip to main content
15,867,895 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm creating an interactive map for office locations to make it easier for clients to reach out to the nearest office. I use HTML file, CSS file, and JS file together for this map. Everything works fine except when your point out a location on the map, information about the nearest office should popup on the right side of the screen. This information includes a hyperlink to the office's website. The problem is that the hyperlink looks fine (blue and underlined) but it is not clickable. I mean the link does not work.

I tried all possible solutions to solve that. Can you help me? Thanks in advance.

What I have tried:

This is the HTML code

HTML
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Interactive Geographical Map w/ SVG & JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./vasbdc.css">

</head>
<body>

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     inkscape:export-ydpi="96"
     inkscape:export-xdpi="96"
     inkscape:export-filename="/Users/maqabljh/OneDrive/test.png"
     inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
     sodipodi:docname="test.svg"
     id="vasbdc-map"
     viewBox="-44643 -21466 74862 32467"
     version="1.1"
     width="1260"
     height="585">



     <g id="City1" transform="translate(1615 46.592)">
       <title>New University Office - Central Region</title>
       <desc>
         <image xlink:href="1234.jpg" alt="LOGO"></image>
         <p>
           <br>Tel: 111.222.3333
           <br><a href="http://www.google.com/">www.google.com</a>
        </p>
      </desc>

  <path d="m26870-5569l816-130 1345-188 26 13 21 10-1 35-62 40-61-6-41 15-109 140 4 36 26 55-82-11-67-5-51-1-41-25-16 85 15 71-6 55-27 151 25 56 31 5h46l15 41-11 80-52 45-25-10-51-6-36 5-26 5-21 25-10 25-1 40 15 36 15 45 10 51 20 50-5 45-6 45-26 35-21 20v56l-52 65-31 20-36 55h-26l-36 4-57 35-20-25 11-35 26-25 36-65 1-51 15-25 26-65 31-15 31-30 42-30 5-30-15-20-62-26-20 10-88 35v10l-52 90-73 191-47 75-47 85 15 66 66 10 62-14 62 5 40 21-25 19-21 20-42 61-10 45-42 50-31 20-26 30-10 30-6 30-10 20-15-5v-25l10-35 11-10 5-36-5-20-30-20h-31l-26-1-41 35-16 35-5 21 15 10 26 25-1 25v66l5 30-11 25-21 10h-15l-51 20-26 40-32 45-36 15-10 30-6 30 10 65-10 25-16 46-6 60 5 45 10 25 5 21 15 30v40l-26 40-11 20v56l-21 40-67 19-26-10 1-15-5-20 5-25v-25l-5-36-15-30-20-15-31 15-21 50-21 40-16 40-21 80-5 46-26 35-11 40-16 35-21 75-10 20-26 40-37 40-92 55-32 90-21 86-73 120-31 55 10 36 51 25 71 31 56 15 41 46 25 61-31 45-21 25-21 30-41 25-46 4-26-5-30-20-21-6h-30l-16 25-6 35-20 46-21 20-46-1-46-15-62 40-27 75-31 95-47 90-52 76-47 44-15 36 20 30 25 30 10 26-20 20-16 20-26 25-10 30-11 30-36-6-31-10-35 5-21 15-11 20-20 30-26 45-26 30-11 30-5 50 10 31 25 35 25 10 52 1 56 10 20 21 47 5 30-20 26 5 46 6 67-5 82-9v55l-1 40-26 50-36 15-25-5-5-20-10-30-16-31-41-10-30 5-47 14-46 15-21 40 10 31 25 50 21 35 20 51 4 40h-36l-41-5-40-6-31 5-16-10-25-30-36-36-30-45-51-41-25-30-10-16-47 5-41 20-56 30-21 20-37 95-10 20-21 45-37 70-10 20-21 35-52 81-32 80 5 70 46 16 67-30 61 11 5 25-21 45 36 15 46 1 31 20 15 30 36 26 41-10 92-45v71l-31 20-47 35-62 39-35-10-36-30-41 4-21 35-31 71-36 25-26-41-4-75 5-51-35-20-46-11-62-10-87-6-88 80-31 45-57 25-41 25-31 70-37 20-35-5-21 56-20-52v-35l21-30 20-20 21-15 78-70-4-151 46-15-25-20-31-10-57 15-15-16v-20l1-20-15-45 5-10h41l10-5 5-5-5-30 11-5 26-15 20-20 5-15 6-30 15-20 6-5 5-15-408-255-21-10h-5l-84 9-23-35-67-11-51-5-41-16-26 5-15 35-26 10-57-10-71-26-77-16-66-15-87-21-62-31-15 15v30l-42 5-46-5-26 35-20 10-15-46 21-65 26-45 42-85 15-35 46 45 36-40 26-5 87 87 51 20 41-30 51 11 42-35-16-31-46-20-46-15-61-21-25-76 16-55-31-5-36 15-57 55-30-6-10-35-15-56-20-35 36-20 56-45 63-70 16-60v-75l31-5 10 25 20 51-10 40 35 45 20 71h36l72 6 61 40 46 46 51 5 10-35-20-50-25-20-51-11v-55h57l46 1 25-10-25-26-20-35 20-20 62-35 77-14 57-5 5-40 31-15 62-20v-40l-51 5-57 14-128 55-93 29-72 35-26 40-31 40-10-25-20-46-5-45 26-35 31-15-36-35-61-16-41-56 6-35 21-20 5-30v-55l62 5 61 21 41 25 16-25-10-45-20-25-26-26 6-30 41-30 25 5 139 2 72-25 46 5 67 31 19 65 5 51 62 10 46 21 25-35-35-86 26-35 41 15 51 26 46 5 6-60 37-60 16-65-31 4-31 25-16 40-36 25-57-5-76-26-52 5-5-25 11-46-36-5-31 20h-30l-41-21-62 5-25-46 26-45 5-40-9-70 16-46 66-14 46 20 41 16 52-5 5-35-41-26-46-20-36-10-30-41v-35l31-25h52l36 1 15 30h41l10-25 6-30 36-45 15 30-6 45-15 46 15 25 36 5 31-50 36-15 21-45 16-50 25 10 46 81 66 21 62 15 9 46v45h36l26-50h46l37-35-16-30-71-26-46-20-46-26-77-50-66-61-35-31-77-10-47 19h-56l-46-5-26 45-21 60h-31l-4-81 15-35 31-35 68-70 36-85h46v40l20 61 52-20 5-50 16-45 31-20 36-5 26-30 16-40 30-10 16 25-1 46 20 45 16 10 30-10 26 16 30 40 36 31 41 15 31-25-10-25-25-36-46-35-26-25-40-56-10-35 26-20 46-45-10-36h-31l-45-30-122-122-57-6-41 10-72 10-20-21-5 11-6 45-21 40-26 5-30-36-5-45 6-40 15-30 42-30 51-45 37-25 36-60 26-10 41 20 25-15 6-30 15-20 21 5 15 16 36 20 26-15 20 15 20 6 31 5 5 20-16 25h-30l-47 10-31 30v15l31 30 15 35 30 21 16-10 21-50 36-35 26-10 26-5 5 20 4 40 5 36 15 25 15 35 5 31-10 40-11 40 20 25 26 5 15-20 21-20v-30l-4-55-5-40 41-10 41-5 26 5 5 25 5 36 15 25h36l15-15 6-35-5-45-15-36-20-60 10-40 26-5 20 35 46 51 35 51 31 25 41-25 6-50-30-46-16-30 21-5 41-5 11-45-10-50-20-31h-41l-42 20-61 25-36-6-5-40 11-40v-30l-15-31-10-40 26-5 15 25 15 31 25 20 46 21 21-46-45-80 11-56 20-10 41 16 36-10 5-25-20-15-46-1-56-25 15-25 21-10 5-25 16-46 41-9 5-30 21-46 21 16 5 25-1 50 10 15 31 26 15 40 4 71v50l15 10 31-30 6-60 21-25h25l31 15 46 11 62 15 31-30-21-25-61-46-41-35-20-61 47-40 21-10 56-29 57-20v-35l-25-16h-67l-72 24-57 25-62 25-25-25-10-36 32-105 31-30 6-76 36 11 20 20 46 15 56-4 21-20-41-21-51-35-46-31-5-20 16-25-31-15-71-11-32 55-46 5-61-11-10-35 46-15 36-19 31-46 51 11 62-20 32-60-11-10h-20l-67-1-51-20-77 29-83 65-35-60-41-51-61-1 4 51 26 45-16 5-26 35-82 25-113 14-61-15-47 4-20-45 16-40 98-20 51 1 31-35-56-41 57-50 25-10 63-55 78-150 56-5 5 30 25 41 67 15 82-39 52-80 42-35 82 31 46 20 71 11 82 5 67-50 37-90-4-55-20-61-31-50-40-91 21-20 15-20 26-16 25 1 21 9 15 5 16-10 4-11-14-28-15-20v-25l14-22 14-16 25-25 31-53z"/>
    </g>
</svg>

<div id="centerInfo"></div>
<script  src="./vasbdc.js"></script>

</body>
</html>

This is the JS code
JavaScript
var vasbdcmap = document.getElementById("vasbdc-map"),
        centerInfo = document.getElementById("centerInfo"),
        allCenters = vasbdcmap.querySelectorAll("g");
        vasbdcmap.addEventListener("click", function(e){
            var center = e.target.parentNode;
            if(e.target.nodeName == "path") {
            for (var i=0; i < allCenters.length; i++) {
                allCenters[i].classList.remove("active");
            }
            center.classList.add("active");
            var centerName = center.querySelector("title").innerHTML,
            centerPara = center.querySelector("desc p");
            sourceImg = center.querySelector("img"),
            imgPath = "http://gator2007.temp.domains/~virgibdc/";
        //  imgPath = "";

            centerInfo.innerHTML = "";
            centerInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+centerName+"</h1><p>"+centerPara.innerHTML+"</p>");
            centerInfo.classList.add("show");

    
            }
        })

And this is the CSS code
CSS
  * {
  box-sizing: border-box;
}

body {
  background: #88a;
  color: #fff;
  font-family: Avenir, Calibri, sans-serif;
}

#vasbdc-map {
  fill: #174f17;
}

#vasbdc-map g {
  -webkit-transition: .3s;
  transition: .3s;
}

#vasbdc-map g:hover {
  fill: #2e9e2e;
  cursor: pointer;
}

.active, .active:hover {
  fill: #2e2e9e !important;
}

#centerInfo {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}

@media all and (max-width: 800px) {
  #centerInfo {
    width: 40%;
  }
}
@media all and (max-width: 750px) {
  #centerInfo {
    width: 100%;
    position: static;
    background: none;
  }

  #centerInfo.show p {
    color: #000 !important;
    margin-bottom: 2rem;
  }
}
#centerInfo.show {
  opacity: 1;
}

#centerInfo h1 {
  background: #2e2e9e;
  padding: .3rem;
  padding-left: 1rem;
  margin-top: -.5rem;
  font-weight: 400;
}

#centerInfo p {
  margin-left: 2rem;
  margin-right: 2rem;
}

#centerInfo img {
  width: 100%;
}
Posted
Updated 27-Jan-21 3:19am
v2

1 solution

You "tried all possible solutions" cannot be true in that if you had it would be working.

But here's how to find your bug - and it's a good rule-of-thumb method for many link-related problems.

Modify your code so that when the link is 'clicked' it sent to a javascript alert() and see if it's really a valid link (or copy by highlighting the blue underlined link and pasting it into a pure text editor, such as notpad). Is it a good link?

But one other note: you code seems somewhat sophisticated and yet you seem to be unable to get the link to work - is this really your code or copied?
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900