javascript - 图像映射 w/基于区域坐标的翻转，如果可能的话使用 jQuery

Question

基本上我需要这个:

http://plugins.jquery.com/project/maphilight

...但不仅仅是 <AREA>标签在翻转时接收边框或填充颜色，让它们接收背景图像。图片需要按<AREA>的形状裁剪

有什么想法吗？

基本上我的设置如下:

<img usemap="#map" />
<map name="map">
  <area coords="foo,bar">
  <area coords="foo,bar">
  <area coords="foo,bar">
</map>

我想要每个 AREA 的背景图片滚动时更改的标签。

我想要的仿制品在这里:

tankedup 成像。 com/css_dev/rollover.html

...除了这里，请注意这不是“真实”图像映射，翻转区域实际上不受AREA 的约束。标签。

Answer 1

我不认为你可以用真实的图像映射来做到这一点:

<img usemap="#map" />
<map name="map">
    <area coords="foo,bar">
    <area coords="foo,bar">
    <area coords="foo,bar">
</map>

但是，有一种方法可以使用 CSS sprites technique 的变体仅使用 HTML 和 CSS 来完成您想要的操作。 .有关如何操作的教程在这里:http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

此技术的简短概述: DEMO Code

首先，像往常一样创建图像。然后，通过将图像的 Canvas 大小加倍并将悬停外观放在图像的新下半部分来创建各种过度状态。你最终会得到这样的结果:

I hope your image looks better than this. http://demo.raleighbuckner.com/so/1369820/test.jpg

接下来是 HTML 和 CSS。我们将使用无序列表:

<style>
    #fakeMap { 
        list-style: none; margin: 0; padding: 0;  /* removes the default UL styling */
        position: relative;                       /* allows the LIs to be positioned */
        width: 200px;                             /* width of the image */
        height: 100px;                            /* height of the image */
        background: url(test.jpg) no-repeat 0 0; /* shows the image */      
    }
    #fakeMap li {
        position:absolute; /* these will be the "area" elements */
    }
    #fakeMap a {
        display:block;        /* along with the width and height, makes the link */
        width:100%;           /*  clickable for the full size of the LI          */
        height:100%;
        text-indent:-5000px;  /* pushes the text of the link offscreen */
    }

    /* Set up each LI to be the right size and positon. */
    #maplink1 { width:15px; height:15px; top:10px; left:10px; }
    #maplink2 { width:20px; height:20px; top:30px; left:30px; }
    #maplink3 { width:80px; height:30px; top:20px; left:70px; }

    /* Set the image for all of the links. */
    #fakeMap a:hover { background: url(test.jpg) no-repeat; }

    /* Set the position of the bg for each link individually. */
    #fakeMap #maplink1 a:hover { background-position:-10px -110px; }
    #fakeMap #maplink2 a:hover { background-position:-30px -130px; }
    #fakeMap #maplink3 a:hover { background-position:-70px -120px; }
</style>

<ul id="fakeMap">
    <li id="maplink1"><a href="link1.htm">Link 1 Text</a></li>
    <li id="maplink2"><a href="link2.htm">Link 2 Text</a></li>
    <li id="maplink3"><a href="link3.htm">Link 3 Text</a></li>
</ul>