How can I detect hex edges and corners for Catan map?

Question

The following messy code implements a decent hex map, but I have no way to detect edges and corners:

function blankMap($scenario_array){
    $hexMap = null;
    $hexCss = "<style media=\"screen\" type=\"text/css\">#map {
        position: relative;}
      #map li {
        margin: 0; padding: 0; list-style: none;
        position: absolute;}
      #map li, #map a {
        height: 300px; display: block;}";
    $hexCount = 1;
    $row = 1;
    $top = 0;
    $left_pad = 10;
    $first_fifth = 0;
    $second_fourth = 0;
    if($scenario_array[0] == 'basic'){

      $hexMap .= "<ul id=\"map\">";
      foreach($scenario_array[1] as $x){
        //set horizontal placement
        $first_fifth = 149;
        $second_fourth = 75;
        if($row == 1){
          $left_pad = $first_fifth;
        }elseif($row == 2){
          $left_pad = $second_fourth;
        }elseif($row == 3){
          $left_pad = 0;
        }elseif($row == 4){
          $left_pad = $second_fourth;
        }elseif($row == 5){
          $left_pad = $first_fifth;
        }
        for($i=0;$i<$x;$i++){
          $hexMap .= "<li id=\"hex".$hexCount."\"><a href=\"".$hexCount."\"></a></li>";
          $hexCss .= "#hex".$hexCount." {left: ".(($i*150)+$left_pad)."; width: 225px; top: ".$top."; background: url(./images/wheattile.png); background-repeat: no-repeat; }";
          $hexCount++;
        }
        $row++;

        $top += 127;
      }
      $hexMap .= "</ul>";
      $hexCss .= "</style>";
      echo $hexCss.$hexMap;
    }
}

How do I move on from here so that I can click on edges and corners of the hexes?

Answer 1

I recommend reading this blog. Assuming you know the middle point coordinate and the width of every hexagon, from the linked blog you can easily calculate corner points. It is essential to know minimally these two.

I'm not sure if what you are referring as edges are the lines between points or the free space between the hexagons. Regardless, the blog shows you how to calculate it in the Size and Spacing section.

Answer 2

I googled css layers and came up with a lot of useful resources, for example: This one

What you could do is take another loop over your gameboard, and fill it with fully transparent edges and corners, layering it on top of your current board.