?? ???? Emmy-Award Game ??? Mike Worth? ?? ??? ? ????? ??? ??? ??????. ?? ?? ???? ?? ??? ???? ?? ??? ???? ??????.

Mike? 90 ?? ?????, ?? Disney 's Duck Tales ? ?? ????? ???? ?????. ?? ??? 90 ?? ???? ?????? ??? ?? ???? ?? ? ??? ??? ??? ??????. ??? ??? ?? ??? ??? ????. ?? ???, ??, ?? ? ? ???? ???? ?? ?? ??? ???? 90 ??? ??? ????????.

Mike??? ???? ?? ? ??? ???? ???? ?? ??? ?? ? ????? ??? ? ???? ??? ??? ???? ??? ????. ?? ????? ???? "???"??? ?????.

???

1. ????? ?????? ???? ????
2. ??? ???; ?????
3. ????? ????? ??????

- ??? ?? ??

??? ?? ??? ??? ???? ???? ????. "???" ???. "Fanciful?" ??. ???“??????” ??? ?????. "???"? ????? ???? ?? "??"??? ????.

? ???? ???, ??? ? ??? ??? ???? ?? ?? ? ??? ??????. ? ?? ? ???? ??? ? 90 ?? ? ???? ?? ?? ?? ??? 1996 ??? Warner Brothers? Space Jam ? ?? ??????.

??? ?? ????? ?? ????.

Nintendo? ?? ???? ????? ???? ??? ??? ?????? ???? ???? ??????. Cheestrings? ???? ?????? ???? ??? ?? ?? ???? ?? ??? ??? ?????. ?? ??? ?? ??? ?? ?? ??? ????? ????? ??? ??? ???? ????? ?? ???? ???? ???? ?? ????? ???? ??????.

90 ???, ?? ?? ? ?????? ???? ???? ?, ?? ???? ?? ??? ???? ??? ??? ??? ??? ?? ??????.

??? ?? ?? ??? ??

?? ?? ??? ?? ?????. ??? ?? html 3.2? ?????, ?? ?? ? ?? ????? ?? ?? ? ? ?? ??? ???? ???? ?? ?? ??? ??? ??????. ???, ? ? ?????? ??? ???? CSS, SVG ? JavaScript? ???? ?? ??? ??????.

 <map name="projects">
  ...
</map>

 <img  usemap="#projects" ... alt="??? ? ? ??" >

??? ??? ??? HREF ? ALT ??? ?? ? ??? ARIA? ???? ???? ???? ? ????.

 <map name="projects">
  <area href="" alt="">
  ...
</map>

?? ??? ??? ??? ?????. ?? ? ?? ?? ?? ?? X ? Y ?? ??? ?? ? ??? ? ? ????.

???? ???? ?????? ??? ?? ??? ?????. ??? JavaScript? ???? ????. 1 ? ?? ? ??? ??????. Alt, Aria ? Title ??? ?? ??? ? ?? ???? ??? ????. ?? ???? ???? ??? ??? ??????? ??? ?? ?????.

Mike Worth??? ?? ????? ? ?? ??? ????? ??? ?????? ??? ?? ??? ??? ????? ???????.

??? ?? ?????

Mike? ??? ? ???? ??? ??? ???? ?? ????? ????? ????. ?? ???? ??? ??? ?? ? ? ?? ???? ??? ??, ????? ??? ??? ??? ?? ???? ?? ???? ??????. ????? ??? ??? ??? ???? ??? ??? ??? ??? ?????.

?? ? ?? ??? ??? ???? SVG? ????? ?? ????.

 <img src="projects.svg" alt="projects">

<svg ...>
  ...
  <a href="...">
    <circle cx="35" cy="35" r="35" fill="#941b2f"></circle>
    
  </a>
</svg>

? ???? ??????. ? ??? SVG? ????? ???? ???? ?? ?? ??????. ??? ??? ???? ?? ?? ?? ??? ??? ?? ???? ?????. ???? ?? ??? ??? ? ???? ??? ???? ? ? ?????. ???? ????? ?? ??? ???? ??? ??? ?? ?? ??????.

 <img  src="projects.svg" usemap="#project-map.svg" alt="??? ? ? ??" >

<map name="project-map.svg">
  <area href="" alt="" coords="..." shape="circle">
  <area href="" alt="" coords="..." shape="circle">
  ...
</map>

??? ?? ???? ?? ? ?? ? ? ? ????? ? ??? ???? ??? ????? ? ??? ????? ??? ??? ?????. ??? ? ?? ?? ?? ?????. ???? ??? ?? ? ? ?? ??? ?? ????? ??? JavaScript? ?????.

 ?? resizemap () {
  const image = document.getElementById ( "????");
  const map = document.querySelector ( "map [name = 'project-map']");
  
  if (! image ||! map ||! image.naturalwidth) return;
  
  const scale = image.clientwidth / image.naturalwidth;
  map.querySelectorALL ( "Area"). foreach (area => {
  
    if (! area.dataset.originalcoords) {
      area.dataset.originalcoords = area.getAttribute ( "coords");
    }

    const scaledcoords = area.dataset.originalcoords
    
    .???(",")
    .map (coord => math.round (coord * scale))
    .????(",");
    Area.setAttribute ( "coords", scaledcoords);
  });
}

[ "??", "resize"]. foreach (event =>
  window.addeventListener (???, resizemap)
);

?? ???? ??? ??? ???? ??? ?? ? ? ? ??? ? ? ??? ??? ??? ???? ??? ???? ?????.

?? ? ??? ??? ??? ???? ??? ??? SVG ViewBox? ??? ????.

 <svg>
  
</svg>

???, ?? ??? ???? ?? ??? ?????? ?? ???????. ??? Raphael Monnerat? PathTopoints? ??????. SVG? ????? ??? ???? ???? ? ??? ??? ?? ? ?? ? ??? ??? ??????.

 <map>
  
  
  
  ...
</map>

??? ?? ?? ? ?? ??

??? ?? ???? ???? ?? ?? ???? ??? ?? ????. ??? ?? ???? ??? ???? ?? ? ?? JavaScript? ???? ? ?????? ??? ?????? ??? ????? ??? ? ????.

??? ??? ??? ??? ??? ???? ???? ??? ???? ??? ?? ? ??? ???? ???? ????. ?? ??????? ?? ?? ??? ???? ?? ??? ????.

??? ???? ?? ???? ??? ?? ?? ?? ?? ????? ???? ???? ????. ???? CSS, HTML ? SVG? ???? ???? ?????? ?? ???? ??????

??? ?? ????? ?? ? ??? ?? ?? ???? ??? ???? ???? ?? ??? ???? ?? ??? ??? ???? ????. ?? SVG ?? ??? ???? ????.

??? ???? ?? ???? ???. ?? ?? ????? ?? ????.

1. ? ?? ?? ??? ?? ? SVG ??? ????.
2. ? ?? ??? ??????.
3. ?? ?? ? ??? ?????.
4. ? SVG ??? ?? ?? ?? ??? ??? ????.
5. ?? ?? ??? ??? SVG? ?????.

?? ??? ??? ???? 6 ?? ?? ? ? ?? ??? ??????. SVG ??? ?? ? ??? ??????.

 <svg viewbox="0 0 1024 1024">

  
  <g> ... </g>

  `
  <g>`
    <a href="..."> <path fill="#b48f4c" d="..."></path> </a>`
    <a href="..."> <path fill="#6fa676" d="..."></path> </a>`
    <a href="..."> <path fill="#30201d" d="..."></path> </a>`
    ...
  </g>
</svg>

?? ?? ??? ????? 0?? ??? ?? ?? ?? ??? ?? ??? ??????.

 #links a {
  ???? : 0;
  ?? : ?? .25s? ???;
}

#links a : ?? {
  ???? : 1;
}

??? ?? ? ???? ?? ???? ??? ???? ???? ??? ? ??? ? ??? ???? ??? ????, ??? ?? ??? ???? ???? ?? ??? ??? ?? ? ????.

Mike? ?? ??? ? ???? ???? ?? ??? ??? ?? ??? ?? ? ????. ?? ?? ??? ?? ? ? ??? ???, ?? ?? ?? ???? ???? ? ????.

 <g>
  <a href="%E2%80%A6">
    
    
  </a>
</g>

?? ???????.

?? ???, ?? ??

Mike Worth? ? ???? ????? ?? ???? ???? ?? ??? ?? ? ??? ??? ???? ??? ?? ?? ???? ??? ?? Mike? ?? ???? ?? ?? ?? ??? ?? ??? ????? ?????????.

????? ?????? Mike ? ???? ??? ??? ????. ??? ???? ???? ?? ??? ??? ?? ???? ? ????????. ?? ???? ??? ? ??? ??? ???? ?? ??? ???? 90 ?? ? ??? ???? ???? ??? ? ?? ?????. ??? ???? ?? ????. ??? ??? ??? ??????.

?? : Andy Clarke

Andy Clarke? ? ???? ??? ? ???? ??? ?? ? ???? ??? ?? ?? ? ??? ?????? ????? ????? ?? ????? ?????. ?? ??? ??? ?????? ?? ? ? ??? ???? ???? ??? ????? ????????.

Andy? CSS ?? CSS , Hardboiled Web Design ? Web Art Direction? ???? ?? ?? ??? ?? ????. ?? ?? ?? ? ??? ????? ???? ??? ?? ??? ??????.

Andy? ???? ? Stuff & Nonsense? ???? ?? ?? ? ????? ???? ???? ???? ? ??? ?? ??? ? ?? ??? ??????.

? ??? ??? ? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!