Javascript 使用HTML热点管理旋转部分_Javascript_Jquery_Html_Css

Javascript 使用HTML热点管理旋转部分

javascript jquery html css

Javascript 使用HTML热点管理旋转部分,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有下面的菜单，需要稍微旋转一个角度：（来源：）我已经成功地为每个菜单条使用嵌套的div实现了外观（container div有黄色的背景图像，而嵌入的div有一个背景图像，链接到带有每个菜单部分文本的图像）不要介意内联样式。我的问题是，我想为每个菜单部分（带有一个角度）创建一个悬停和单击状态，但是用原生HTML实现这一点似乎有点困难，因为div将相交。请参考以下快照以了解说明：（来源：）非常感谢您的帮助，我想要一个能在所有主流浏览器上运行的解决方案（我已经研究了一个jQuer

我有下面的菜单，需要稍微旋转一个角度：

（来源：）

我已经成功地为每个菜单条使用嵌套的div实现了外观（container div有黄色的背景图像，而嵌入的div有一个背景图像，链接到带有每个菜单部分文本的图像）

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

（来源：）

非常感谢您的帮助，我想要一个能在所有主流浏览器上运行的解决方案（我已经研究了一个jQuery插件，它可以做到这一点，但不兼容跨浏览器），我应该使用经典的html热点来实现这一点。我有点讨厌使用它们，觉得它们不再用于此目的了

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

必须应用变换：旋转（150度）；设置要旋转的标签的样式

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

下面是一个使用CSS旋转对象的示例

有时旧技术是最好的技术

<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行更简单的标记，将它们链接到您希望它们去的地方，确保为屏幕阅读器和残疾人提供正确的alt文本，然后离开。

您考虑过只使用图像地图吗？它们的存在时间几乎和互联网一样长，而且使用起来也比较简单；您只需要一个图像，就可以以任意角度绘制任意复杂的多边形。它们得到了普遍的支持——第一个支持是在Mosaic 1.1中！对于超级花哨的东西，你可以使用Imagemapster：（我已经用这两种技术设计了完整的HTML5应用程序，它可以正常工作）我唯一的问题是这种方法只在IE9+中受支持，你可以使用其他属性向下旋转到5.5:。使用浏览器条件样式表，这样就不会弄乱IE9+，使用IE 8和更低版本的过滤器选项只能给我0,90270度的旋转，这在我的设计中不起作用，但还是要感谢您的帮助：）

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