使用 HTML 热点管理旋转部分答案

【问题标题】：Using HTML hotspot to manage rotated sections使用 HTML 热点管理旋转部分
【发布时间】：2019-09-08 23:38:41
【问题描述】：

我有以下菜单需要稍微旋转一下：

我已经设法为每个菜单条使用嵌套 div 来实现外观（容器 div 具有黄色背景图像，嵌入式 div 具有链接到带有每个菜单部分文本的图像的背景图像）

<div id="the-menu" style="position:absolute; z-index:9998; left:120px; top:-5px; width:255px; height:300px;">
    <div id="home-strip" align="right" style="position:absolute; z-index:1; left:0px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('home');" style="cursor:pointer; position:relative; width:90px; height:35px; top:9px; left:6px;  background-image:url('images/menu-text.png');"></div>
    </div> 
    <div id="about-strip" align="right"  style="position:absolute; z-index:2; left:10px; top:30px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('about');" style="cursor:pointer; position:relative; width:90px; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -38px; background-repeat:no-repeat"></div>
    </div> 
    <div id="classes-strip" align="right"  style="position:absolute; z-index:3; left:20px; top:60px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:35px; top:6px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -76px; background-repeat:no-repeat"></div>
    </div> 
    <div id="team-strip" align="right"  style="position:absolute; z-index:4; left:30px; top:90px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:37px; top:7px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -116px; background-repeat:no-repeat"></div>
    </div> 
    <div id="facilities-strip" align="right" style="position:absolute; z-index:5; left:40px; top:120px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-3px;  background-image:url('images/menu-text.png'); background-position: 6px -157px; background-repeat:no-repeat"></div>
    </div> 
    <div id="schedule-strip"  align="right" style="position:absolute; z-index:6; left:50px; top:150px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -196px; background-repeat:no-repeat"></div>
    </div> 
    <div id="contact-strip"  align="right" style="position:absolute; z-index:7; left:60px; top:180px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-5px;  background-image:url('images/menu-text.png'); background-position: 8px -234px; background-repeat:no-repeat"></div>
    </div> 
</div>

不要介意内联样式。我的问题是我想为每个菜单部分（带有角度）创建悬停和单击状态，但是使用原生 HTML 实现这一点似乎有点挑战性，因为 div 会相交。请参阅以下快照以进行说明：

_{（来源：maroonlemoon.com）}

您的帮助将不胜感激，我想要一个适用于所有主要浏览器的解决方案（我研究了一个 jQuery 插件，它可以做到这一点，但不兼容跨浏览器）我应该使用经典的 html 热点来做到这一点.我有点讨厌使用它们，并且觉得它们不再用于此目的

【问题讨论】：

您考虑过只使用图像映射吗？它们的存在时间几乎与互联网一样长，而且使用起来比较简单；你只需要一张图像，你就可以以任何你想要的角度绘制任意复杂的多边形。它们得到普遍支持 - 第一个支持是在 Mosaic 1.1 中！对于超级花哨的东西，您可以使用 Imagemapster：outsharked.com/imagemapster（我已经设计了包含这两种技术的完整 HTML5 应用程序，并且可以正常工作）

标签： javascript jquery html css

【解决方案1】：

你可以用 CSS 解决这个问题：

您必须应用变换：rotate(150deg);为您或您想要旋转的标签添加样式。

div{
    transform: rotate(150deg);
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Safari and Chrome */
}

这是一个使用 CSS 旋转物体的示例。

http://jsfiddle.net/MathiasaurusRex/hTx2w/1/

【讨论】：

我对这种方法的唯一问题是它只支持 IE9+
您可以使用其他属性向下旋转到 5.5：stackoverflow.com/a/12701854/2574944。使用浏览器条件样式表，这样它就不会弄乱 IE9+
使用 IE 8 及更低版本的过滤器选项只能给我 0,90,270 度旋转，这在我的设计中不起作用，但无论如何感谢您的帮助 :)

【解决方案2】：

有时老技术是最好的技术。

<html><head></head><body>
<img src="http://maroonlemoon.com/rotated2.png" name="example" usemap="#nav_map" id="example" />
<map name="nav_map">
    <area shape="poly" coords="201,4,89,47,100,75,216,29" href="#">
</map>
</body></html>

Dreamweaver 甚至构建了用于将它们直接放入基本界面的工具，如果您碰巧使用了上述软件 - 但是有很多在线工具可以帮助您绘制框，它也会生成代码供您使用.

另外 6 行简单的标签，将它们链接到您希望它们去的地方，确保为屏幕阅读器和残疾人提供正确的替代文本，然后就可以开始了。

【讨论】：