Question

我不是一个干净的CSS编码器，所以这可能是我的问题的关键......但是......我已经拼凑了本教程中的交互式地图：http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/。

我的解决方案：http://www.paideiaschool.org/testing/barb_map.htm

我认为我有地图工作的初始“翻转” - （我只编写了地图左上角的前两个建筑物）并对此感到满意。

我的问题是我希望地图的图例与地图的翻转做同样的事情。我提出了一个笨拙的解决方案（标记为'1509'），但并不适用于所有浏览器，这告诉我在某个地方出错了。

我也试图避免使用javascript。

主要问题是什么？

Answer 1

Here's an updated jsFiddle for part one

以下是基础知识：

<div id="city-map">
    <a href="#" id="mac"><div class="pop-up">...</div></a>
    <a href="#" id="admin"><div class="pop-up">...</div></a>
    ...
</div>

我们使用带有锚标签的图像映射作为“热点”。我们使用CSS将这些“热点”绝对定位在正确的位置，我们执行基本的背景图像精灵“技巧”，就像您在原始代码中所做的那样。

但是，我更新了您的精灵图像以获得两个“悬停”图像。当制作具有非方形图像点的图像悬停地图（如同建筑物彼此重叠）时，单个悬停状态遇到问题，其中“邻居”图标出现在热点切片中。这是由于正确的HTML块是正方形而无法绘制奇怪的形状。我们通过提供额外的图像状态来解决这个问题，这样你就可以让邻居看起来仍然没有突出显示。

弹出框

<div class="pop-up">
    <h1 class="title">Mac</h1>
    <div class="content">Some Content</div>
</div>

所有弹出框都有此HTML格式。我的位置：绝对;他们离开标准左侧：-999em;特技。我精心设计了CSS，为他们提供了一个标准的弹出式位置，热点框和弹出框之间有一点空间。这有助于确保您的鼠标在到达新的热点时“悬停”出热点。否则，你会将鼠标悬停在弹出框上，直到你完成两个弹出框后它才会消失。

<div id="city-map-legend">
    <div id="glamour-photo">
        <img src="..." id="mac-img" />
        <img src="..." id="admin-img"/>
        ...
    </div>
    <div id="cml-list">
        <h2>Around Campus</h2>
        <ul>
            <li><a id="mac-list" href="#">Mac</a></li>
            ...
        </ul>
    </div>
</div>

对于“地图图例”，我有一组“魅力图片”和一系列链接。很标准的东西。关键是他们如何与他们的ID绑在一起。当我们将三个元素（地图，魅力图像和链接列表）绑定在一起时，JavaScript将使用它来交换图像和CSS状态。

地图中的ID是直接的ID名称，如“mac”。魅力图像中的ID是“[id] -img”（即“mac-img”）。列表中的ID是“[id] -list”（即“mac-list”）。

<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

我建议使用jQuery来帮助轻松实现JavaScript并从Google API加载它，以便轻松实现内容分发网络的优势。

真正剩下的就是JavaScript事件。

$(document).ready(function() {
    // highlight map when legend link is hovered
    $('#cml-list a').hover(
        // hover over
        function(){
            // get id code
            var id = $(this).attr('id');
            // tokenize string to get main id code
            var tokens = id.split('-');
            id = '#' + tokens[0];
            // add active class to map id
            $(id).addClass('active');
        },
        // hover out
        function(){
            // clear all .active classes from map
            $('#city-map a').removeClass('active');
        }
    );
});

上面发生的是我们告诉JavaScript在任何人悬停列表链接时触发。悬停，进出时有两个事件。

当有人徘徊在链接中时，我们会从中获取基本ID值，而我们所做的就是将“活动”CSS类应用于地图“热点”。

“。active”类基本上会“打开”地图项，就像它被悬停一样（如果你在CSS中注意到，所有：悬停选择器样式也与'.active'类共享）。

当我们徘徊时，我们只是告诉jQuery删除所有“活动”类。剩下要做的就是交换也写一些代码，为“魅力”图像做同样的事情。只需将它们打开（显示：阻止）或关闭（显示：无）。唯一的问题是，除非我们只是希望以前激活的魅力图像保持活动状态，否则应该有一个我们总是会重新打开的默认图像，除非我们只是希望之前激活的魅力图像保持活动状态，这也是有用的。

我还没有得到那些代码。我会看到我可以稍后更新它，也许可以留一点让你玩。

更新

我主要在Chrome和一点点Firefox中开发它。我刚刚检查过它在IE7 / 8/9中似乎工作正常。
我更新了jsFiddle以包含魅力图像交换。我也有一个小的CSS错误，我把浮动放在错误的位置。所以，解决最新的问题。
注意我没有为所有位置执行CSS。我做了几个例子，但剩下的给你了。 =）

顺便说一下，我更新了您的地图图片并将其上传到imgur.com =＆gt; http://i.imgur.com/n7spM.png

CSS交互式地图

1 个答案: