Имена областей изображения, которые можно активировать в HTML

Question

Можно ли как-нибудь назвать области изображения, на которые можно нажимать? При наведении мыши имя должно быть выделено.

http://www.fifa.com/worldcup/destination/index.html

Если вы перейдете по вышеупомянутой ссылке, названия пунктов назначения будут выделены.

Answer 1

Как это делается по предоставленной вами ссылке, они устанавливают изображение в качестве фона элемента div, а затем используют абсолютное позиционирование для размещения областей с возможностью нажатия:
HTML

<div>
    <span>Pepperoni!</span>
    <span>Cheese!</span>
    <span>Tomato!</span>
</div>

CSS

div{
    background: url(http://www.lorempizza.com/200/200);
        background-size:cover;
    width:500px;
    height:500px;
    position:relative;
}
span{
    display:block;
    background:white;
    border-radius:5px;
    width:100px;
    text-align:center;
    padding:10px;
}
span:hover{
    background:lightblue;
    font-size:20pt;
   }
span:nth-child(1){
 position:absolute;
    top:100px;
    left:300px;
}
span:nth-child(2){
 position:absolute;
    top:300px;
    left:100px;
}span:nth-child(3){
 position:absolute;
    top:400px;
    left:300px;
}

Пример JSFiddle