Vue+jquery+jquery.maphilight实现图片热区高亮以及点击效果
<!DOCTYPE html>
<html>
<head>
<title>图片热区高亮示例</title>
<link rel="stylesheet" href="path/to/jquery.maphilight.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.maphilight.min.js"></script>
<script src="path/to/vue.js"></script>
</head>
<body>
<div id="app">
<img id="hot-spot" src="path/to/image.jpg" usemap="#map" />
<map name="map" id="image-map">
<area v-for="area in areas" :key="area.id" v-bind="area" href="#" />
</map>
</div>
<script>
new Vue({
el: '#app',
data: {
areas: [
{
shape: 'rect',
coords: '100,100,200,200',
alt: '区域A'
},
{
shape: 'circle',
coords: '300,200,50',
alt: '区域B'
}
// 添加更多区域对象
]
},
mounted() {
this.$nextTick(() => {
$('#hot-spot').maphilight({
fillColor: '00ff00',
fillOpacity: 0.5,
strokeColor: '000000',
strokeOpacity: 0.5,
strokeWidth: 1,
fade: true
});
$('#image-map area').on('click', function() {
const area = $(this);
alert('点击了区域: ' + area.attr('alt'));
});
});
}
});
</script>
</body>
</html>这个代码示例展示了如何在Vue应用中使用jQuery结合jquery.maphilight插件来实现图片热区的高亮和点击事件的处理。在mounted钩子中，我们首先等待DOM渲染完成，然后初始化图片热区高亮，并为每个区域添加点击事件的处理函数。这里的areas数组用于动态生成<area>标签，并绑定相应的属性。
评论已关闭