-1

How can I add effects to the code below? Should I do using javascript and css...Please help me.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Mapping Hover</title>
</head>
<body>

<style type="text/css">
#area1, #area2, #area3, #area4 {
 opacity: 0.8;
 transition: all .3s;
}
</style>

<div>
<img src="https://picsum.photos/300/300" width="300" height="300" usemap="#Map"/>
<map name="Map">
<area id="area1" shape="rect" coords="108,140,200,264" href="#">
<area id="area2" shape="rect" coords="9,140,101,264" href="#">
<area id="area3" shape="rect" coords="108,7,200,131" href="#">
<area id="area4" shape="rect" coords="8,7,100,131" href="#">
</map>
</div>
 
</body>
</html>

Html is here.

murat
  • 1
  • 2

1 Answers1

0

You need to move the following code out of the body Tag

<style type="text/css">
#area1, #area2, #area3, #area4 {
    opacity: 0.8;
    transition: all .3s;
}
</style>

And I suggest you give the value of class to div and try 'div class.hover #image' in the style. For example, 

<style type="text/css">
.container:hover #area1{
    opacity: 0.8;
    transition: all .3s;
}
</style>
<body>
<div class="container">
오현정
  • 1
  • 1
  • 2