如何在点击事件中填充图像映射的热点中的颜色。 [英] how to fill color in a hotspot of an image map on click event.

问题描述

如何在点击事件中填充图像地图的热点中的颜色。



我有一个包含50个多边形热点的图像地图，如果我点击我想要一个特定的热点然后该热点的区域变成灰色.........

how to fill color in a hotspot of an image map on click event.

I have an image map with 50 polygon hotspots and i want if i click on a perticular hotspot then area of that hotspot become gray color .........

推荐答案

使用JQuery你可以得到这样的

Using JQuery you can get like this

<div style="width: 500px; height: 487px; overflow: auto; margin-removed 0px;">
                                <img src="Images/Minesweeper.png" width="793px" height="787px" class="map" alt="Parliament">
                                    usemap="#Parliamentmap" id="ImageMap1" />
                            </img></div>
                            <map id="map" name="Parliamentmap">
                                <area shape="poly" id="Area2" rel="0" coords="270,127,289,131,257,160,240,155" alt="ff" />
                                <area shape="poly" id="Area3" rel="1" coords="289,131,303,132,275,163,257,160" alt="bb" />
                                <area shape="poly" id="Area4" rel="1" coords="303,132,317,134,296,160,275,163" alt="bb" />
                                <area shape="poly" id="Area5" rel="1" coords="317,134,329,138,312,167,296,160" alt="tg" />
                                <area shape="poly" id="Area6" rel="1" coords="329,138,339,138,325,169,312,167" alt="hk" />
                                <area shape="poly" id="Area7" rel="1" coords="339,138,354,140,340,170,325,169" alt="ui" />
                                <area shape="poly" id="Area8" rel="1" coords="354,140,364,138,353,172,340,170" alt="oi" />
                                <area shape="poly" id="Area9" rel="1" coords="364,138,374,141,365,172,353,172" alt="ry" />
                                <area shape="poly" id="Area10" rel="1" coords="374,141,382,141,376,174,365,172" alt="iy" />
                                <area shape="poly" id="Area11" rel="1" coords="382,141,394,143,389,175,376,174" alt="sf" />
                                <area shape="poly" id="Area12" rel="1" coords="394,143,403,143,402,177,389,175" alt="rt" />
                                <area shape="poly" id="Area13" rel="1" coords="403,143,415,143,415,178,402,177" alt="mn" />
                            </map>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <script src="Scripts/maphighlight.js" type="text/javascript"></script>

注意：你需要下载这些js文件。

Note: You need to download these js files.

<script type="text/javascript">

（ function （）{

（' area'）。click（ function （event）{
var map = document .getElementById（' map'）;
var areas = map.getElementsByTagName（' 区域）;
for （ var i = 0 ; i< areas.length; i ++）{
var area = areas [i];
var id = area.id;
var data =

('area').click(function (event) { var map = document.getElementById('map'); var areas = map.getElementsByTagName('area'); for (var i = 0; i < areas.length; i++) { var area = areas[i]; var id = area.id; var data =

这篇关于如何在点击事件中填充图像映射的热点中的颜色。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！