1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title></title>
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width">
  10. </head>
  11. <body>
  13. <style>
  14. #ischmap {
  15. position: relative; /* set our container */
  16. width: 800px;
  17. height: 605px;
  18. font-family: sans-serif;
  19. }
  20. #ischmap a {
  21. position: absolute;
  22. font-size: 18px;
  23. color: #fff;
  24. text-shadow: 0 0 4px #000, 0 0 24px #fff, 0 0 24px #fff, 0 0 24px #fff, 0 0 24px #fff, 0 0 24px #fff; /* let it shine */
  25. cursor: pointer;
  26. padding: 10px; /* add some padding to make clicking easy */
  27. }
  28. #ischmap a span {
  29. font-size: 12px;
  30. display: none; /* hide the tooltip */
  31. position: absolute;
  32. width: 150px;
  33. margin-left: -75px; /* center the tooltip */
  34. border-radius: 10px;
  35. background: #000;
  36. box-shadow: 0 2px 4px #000;
  37. text-shadow: none;
  38. padding: 10px;
  39. text-align: center;
  40. }
  41. #ischmap a:hover span{
  42. display: block;
  43. }
  45. #element1 {
  46. top: 45px; /* set up element position, # -> id */
  47. left: 395px;
  48. }
  49. #element2 {
  50. top: 195px;
  51. left: 230px;
  52. }
  53. #element3 {
  54. top: 195px;
  55. left: 565px;
  56. }
  57. #element4 {
  58. top: 395px;
  59. left: 95px;
  60. }
  61. #element5 {
  62. top: 495px;
  63. left: 275px;
  64. }
  66. </style>
  68. <div id="ischmap">
  69. <img src="http://i.imgur.com/JmrFJBk.jpg" alt="mybg">
  70. <a id="element1">&#9679; <span>This ist ze Info<br>for element 1</span></a>
  71. <a id="element2">&#9679; <span>This ist ze Info<br>for element 2</span></a>
  72. <a id="element3">&#9679; <span>This ist ze Info<br>for element 3</span></a>
  73. <a id="element4">&#9679; <span>This ist ze Info<br>for element 4</span></a>
  74. <a id="element5">&#9679; <span>This ist ze Info<br>for element 5</span></a>
  75. </div>
  77. </body>
  78. </html>