//鼠标悬浮效果
mounted() { this.setCurrentTask(0); //对于id为mapAll的热区图,设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量 $(function() { $('#mapAll').maphilight({ fillColor: 'ff0000', strokeColor: "FFFFFF", strokeWidth: 3, fillOpacity: 0.6, }); }); },
//点击效果 handleHighlight(id) { const escapedId = id; const $element = $(`#${escapedId}`); const data = $element.mouseout().data('maphilight') || {}; data.alwaysOn = true; data.fillColor = "feeeed"; $element.data('maphilight', data).trigger('alwaysOn.maphilight'); setTimeout(() => { const data = $element.mouseout().data('maphilight') || {}; data.fillColor = "ff0000"; data.alwaysOn = false; $element.data('maphilight', data).trigger('alwaysOn.maphilight'); }, 300); },
好的设计思路:
<template>
<div>
<!-- Task Display -->
<div>
<h2>Task {{ currentTask.id }}: {{ currentTask.name }}</h2>
<p>{{ currentTask.details }}</p>
<img ref="mapAll" id="mapAll" src="../../assets/images/JIESHOUJI.png" usemap="#image-map">
<map v-if="currentHotspots" name="image-map">
<area v-for="(area, index) in currentHotspots" :key="index" :id="area.id" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)">
</map>
</div>
<!-- Global Navigation Buttons -->
<div>
<button @click="previousTask" :disabled="currentTaskIndex === 0">Previous</button>
<button @click="nextTask" :disabled="currentTaskIndex === tasks.length - 1">Next</button>
</div>
</div>
</template>
<script>
import $ from "jquery"
import 'jquery/dist/jquery.maphilight'
export default {
data() {
return {
tasks: [
{
id: 1,
name: '开始实验',
details: '按On->显示自检->出现屏幕',
hotspots: [
{ id: 1, alt: 'Power', title: 'Power', coords: '133,34,178,86', shape: 'rect' },
{ id: 2, alt: 'LockTest', title: 'LockTest', coords: '1059,150,1096,205', shape: 'rect' }
]
}
// Add more tasks here if needed
],
currentTaskIndex: 0,
currentTask: {},
currentHotspots: []
};
},
methods: {
setCurrentTask(index) {
// Set current task and associated hotspots
this.currentTaskIndex = index;
this.currentTask = this.tasks[index];
this.currentHotspots = this.currentTask.hotspots;
},
previousTask() {
// Display previous task
if (this.currentTaskIndex > 0) {
this.setCurrentTask(this.currentTaskIndex - 1);
}
},
nextTask() {
// Display next task
if (this.currentTaskIndex < this.tasks.length - 1) {
this.setCurrentTask(this.currentTaskIndex + 1);
}
},
handleClick(area) {
// Handle click event for hotspot
console.log('Clicked hotspot:', area);
this.handleHighlight(area.id)
// Add your custom logic here
},
// maplight处理按钮特效
handleHighlight(id) {
const $element = $(`#${id}`);
const data = $element.mouseout().data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = "feeeed";
$element.data('maphilight', data).trigger('alwaysOn.maphilight');
// 使用 setTimeout 来延迟还原状态
setTimeout(() => {
const data = $element.mouseout().data('maphilight') || {};
data.fillColor = "ff0000";
data.alwaysOn = false;
$element.data('maphilight', data).trigger('alwaysOn.maphilight');
}, 300);
},
},
mounted() {
// Initialize current task and hotspots
this.setCurrentTask(0);
// 对于id为mapAll的热区图,设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量
$(function() {
$('#mapAll').maphilight({
fillColor: 'ff0000',
strokeColor: "FFFFFF",
strokeWidth: 3,
fillOpacity: 0.6,
});
});
},
};
</script>
<style scoped>
/* Add styles for task layout */
</style>