Am I missing something with my image navigation? It's not clickable-CodePudding

Can someone please help me with the below? My image is not clickable but I'm not sure why? < img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make up by Lauren Evans" width= "300" height= "300" class= "floattoright" usemap= "MakeupbyLaurenEvans" /> < map name= "Make up by Lauren Evans"> < area shape= "rect" coords= "0, 0, 230, 218" href= "https://www.instagram.com/makeupbylaurenevans/?hl=en" alt="Make up by Lauren Evans Instagram" /> < /map >

CodePudding user response：

Check the following code:

<img src= "https://images.unsplash.com/photo-1653853504933-1241ec829d7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt= "Make up by Lauren Evans logo" title= "Make up by Lauren Evans"
 width= "300" height= "300" class= "floattoright" usemap= "#MakeupbyLaurenEvans" />

 <map name= "MakeupbyLaurenEvans">
    <area shape= "rect" coords= "0, 0, 230, 218" href= "https://www.instagram.com/makeupbylaurenevans/?hl=en" 
     alt="Make up by Lauren Evans Instagram" />
 </map>

CodePudding user response：

There is issue is the code. As you can see from this example.

In usemap attributes you need to add map tag name with # like usemap= "#MakeupbyLaurenEvans". Then in the map tag, name should be same as you defined in usemap attribute like this:

name= "MakeupbyLaurenEvans"

Now, the code looks like this:

<img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make up by Lauren Evans"
 width= "300" height= "300" class= "floattoright" usemap= "#MakeupbyLaurenEvans" />

 <map name= "MakeupbyLaurenEvans">
    <area shape= "rect" coords= "0, 0, 230, 218" href= "https://www.instagram.com/makeupbylaurenevans/?hl=en" 
     alt="Make up by Lauren Evans Instagram" />
 </map>

Working Example