Javascript 移动网站上ImageMap的替代方案

我有以下问题。我正在用jQuery Mobile编写一个网站（数据来自drupal cms）

目前我最大的问题是，我有一个图像，用户应该能够通过触摸来获取更多信息。问题是，当设备旋转时，图像不应该旋转

我目前的解决方案是，当设备旋转到相同的图像但旋转90*时，更改图像。对于用户可以触摸的点，我使用带有自定义触摸事件的

div

s。现在的问题是，如果更改图像，则

div

s不在图像上的相同位置（我知道顶部和左侧现在已更改，因此我相应地更改了它们-新的左侧是旧的顶部等）

有什么办法解决这个问题吗？也许从一开始就可以阻止图像旋转

用于按设备方向应用不同的图像旋转：

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    img.class {
       transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -webkit-transform: rotate(270deg);
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    img.class {
       transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -webkit-transform: rotate(270deg);
    }
}

---

如果您使用的是ImageMap…为什么要捕捉div上的触摸事件？如果你以“普通”的方式使用它，你就不需要因为旋转而更新任何东西（如果你的布局能够适应新的形状因素）。因为旋转，我现在不使用图像地图。图像不应旋转。