Question

基本上我需要这个：

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

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

有什么想法吗？

基本上我的设置如下：

<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

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

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>

Answer 2

好的，我的解决方案。

从像这样的图像映射开始：

<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>

然后，当用户将鼠标悬停在每个特定SRC上时，我使用jQuery交换IMG的{{1}}属性，然后将AREA返回到关闭状态鼠标移开。

IMG

这可能会以某种方式与CSS Sprites结合使用，在翻转期间交换某些图像的$(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(); }); });。

图像映射w /基于图像的翻转由AREA坐标限制，jQuery如果可能的话

2 个答案: