<template>
  <div>
    <div class="popup" v-if="showPopup">
      <detail-dialog
        :visible="showPopup"
        :kind="season"
        @exitDialog="exitDialog"
      />
    </div>

    <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" />

    <map name="pmap" id="pmap">
      <area
        v
 
-for="(item, index) in areaData"
        :key="index"
        shape="rect"
        :coords="item.coords"
        @click="handleClick(item.alt)"
        :alt="item.alt"
      />
    </map>
  </div>
</template>
<script>
import DetailDialog from "../components/detailDialog.vue";
export 
 
default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      imgSrc: require("../assets/img/cxxx.png"),
      showPopup: false,
      season: "",
      areaData: [
        {
          coords: "0,0,742,213",
          alt: "rawMaterial",
        },
        {
          coords: "0,231,307,476",
          alt: 
 
"fuel",
        },
        {
          coords: "334,332,786,623",
          alt: "clinker",
        },
      ],
    };
  },
  methods: {
    // close dialog
    exitDialog() {
      this.showPopup = false;
    },
    // mouseclick action
    handleClick(season) {
      this.season = season;
      this.showPopup = true;
    },
  },
};
</script>

參考網站——HTML圖片熱區map area的用法 -- 簡明現代魔法 (nowamagic.net)