Hover en etiquerta MAP-AREA
Publicado por miguel (5 intervenciones) el 18/09/2017 18:26:03
Hola a todos trato de hacer hover en la etiqueta map con ayuda de imageMapster pero no logro conseguirlo alguien me podria orientar por que realmente no consigo lograrlo ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<script type="text/javascript" src="Resources/jquery.imagemapster.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img id="frog" src="Resources/img/menu.png"
style="width:450px;height:400px;" usemap="#frog-map" >
<map name="frog-map">
<area shape="rect" name="menu1hot" coords="10,10,120,330" href="#" />
<area shape="rect" name="menu1" coords="10,340,110,390" href="#"/>
<area shape="rect" name="menu2hot" coords="120,10,230,330" href="#" />
<area shape="rect" name="menu2" coords="120,340,220,390" href="#"/>
<area shape="rect" name="menu3hot" coords="230,10,340,330" href="#" />
<area shape="rect" name="menu3" coords="230,340,330,390" href="#"/>
<area shape="rect" name="menu4hot" coords="340,10,450,330" href="#" />
<area shape="rect" name="menu4" coords="340,340,440,390" href="#"/>
</map>
<script>
$(document).ready(function(){
$('#frog').mapster({
mapKey: 'name',
singleSelect: false,
altImage: "Resources/img/hover.png",
altImageOpacity: 0.8,
fillOpacity: 0.7,
fillColor: 'f4ff75',
areas: [
{key: 'menu1hot',
staticState: false,
includeKeys: 'menu1'
},
{key: 'menu2hot',
staticState: true,
includeKeys: 'menu2'
},
{key: 'menu3hot',
staticState: false,
includeKeys: 'menu3'
},
{key: 'menu4hot',
staticState: false,
includeKeys: 'menu4'
} ]});
});
</script>
</body>
</html>
Valora esta pregunta
0
