CODEWITHSUNDEEP
htmlclickable-image
Xylon Gracias
Xylon Gracias

Reputation: 3

Names to the clickable areas of an image in HTML

Is there any way I can Name the clickable areas of an image? On mouse hover the name has to be highlighted.

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

If you visit the above mentioned link the names of the destinations gets highlighted.

Upvotes: 0

Views: 129

Answers (1)

Jacob G
Jacob G

Reputation: 14172

How it is done in the link you provided is they set an image as the background of the div then used absolute positioning to place the click-able areas:
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 Example

Upvotes: 1

Related Questions