Javascript 带基于图像的翻转的图像地图，以面积坐标为边界，如果可能，jQuery

基本上我需要这个：

…但与其让

标记在滚动时接收边框或填充颜色，不如让它们接收背景图像。图像需要根据

s的形状进行剪裁

有什么想法吗

基本上，我的设置如下：

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

我希望每个

区域

标记的背景图像在滚动时发生变化

这里是我想要的仿制品：

tankedup成像。com/css_dev/rollover.html

---

…除此之外，请注意，这不是一个“真实”的图像贴图，滚动区域实际上不受

区域

标记的约束。

我认为使用真实图像贴图无法做到这一点：

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

. 有关如何执行此操作的教程，请参见：

此技术的简要概述：

首先，像平常一样创建图像。然后，通过将图像的画布大小加倍，并将悬停外观放置在新的图像下半部分，创建各种覆盖状态。你会得到这样的结果：


接下来是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> 


#赝品
列表样式：无；边距：0；填充：0；/*删除默认UL样式*/
位置：相对；/*允许定位LIs*/
宽度：200px；/*图像的宽度*/
高度：100px；/*图像高度*/
背景：url（test.jpg）不重复0；/*显示图像*/
}
#假货李{
位置：绝对；/*这些将是“面积”元素*/
}
#假货{
显示：block；/*连同宽度和高度一起创建链接*/
宽度：100%；/*可单击以查看LI的全尺寸*/
身高：100%；
文本缩进：-5000px；/*将链接文本推离屏幕*/
}
/*将每个LI设置为正确的大小和位置*/
#maplink1{宽度：15px；高度：15px；顶部：10px；左侧：10px；}
#maplink2{宽度：20px；高度：20px；顶部：30px；左侧：30px；}
#maplink3{宽度：80px；高度：30px；顶部：20px；左侧：70px；}
/*设置所有链接的图像*/
#fakeMap a:hover{background:url（test.jpg）无重复；}
/*分别为每个链路设置bg的位置*/
#fakeMap#maplink1 a:悬停{背景位置：-10px-110px；}
#fakeMap#maplink2 a:悬停{背景位置：-30px-130px；}
#fakeMap#maplink3 a:悬停{背景位置：-70px-120px；}





好的，我的解决方案

从图像贴图开始，如下所示：

<img src="nav.jpg" id="main-nav" usemap="#imagemap" />              

<map id="imagemap" name="imagemap">
    <area id="item1" href="item1.shtml" shape="poly" coords="153,52,484,6,492,43,158,74" />
    <area id="item2" href="item2.shtml" shape="poly" coords="95,96,287,84,289,112,95,118,97,118" />
</map>

这可能会以某种方式与CSS精灵结合，在滚动期间交换某些图像的
背景位置。
我无法加载jQuery插件页面。我希望我在回答中所说的与你想要的很接近。谢谢，但是链接的形状是如此的不规则和相互交织，以至于我不得不使用真实的图像地图，而不是LIs+CSS Spit附带的矩形分割。
$(document).ready(function() {

//set off state 
var nav_off = "/images/nav-off.jpg";

// functions for over and off
function over(image) {
    $("#main-nav").attr("src", image);
}
function off() {
    $("#main-nav").attr("src", nav_off);
}

$("#imagemap area").hover(
    function () {
        var button = $(this).attr("id");
        over("/images/nav-" + button + ".jpg");
    },
    function () {
        off();
    });

});