带有翻转的图像答案

【问题标题】：Image with rollovers带有翻转的图像
【发布时间】：2010-10-05 00:20:36
【问题描述】：

我有一张大图像必须放在背景中。

假设图像是一个正方形。现在，当有人将鼠标悬停在正方形的任何角上时，图像应该会变为图像的绿色版本。

实际上背景图像会保留，但我必须以某种方式将绿色图像切片覆盖在背景图像上。

所以我有一个名为“background.png”的文件，然后是“corner1.png”、corner2.png 等。

我该如何实现呢？我必须知道确切的像素数才能将图像正确放置在角落吗？

【问题讨论】：

我认为您的意思是“翻转”而不是角色翻转 :)
您能否发布一张翻车前和翻车期间应该是什么样子的照片？我很难想象你要做什么。

标签： javascript css image

【解决方案1】：

<div class="image">
    <div class="top left" onmouseover="javascript: cornerHover();" />
    <div class="top right" onmouseover="javascript: cornerHover();" />
    <div class="bottom left" onmouseover="javascript: cornerHover();" />
    <div class="bottom right" onmouseover="javascript: cornerHover();" />
</div>

<style>
    div.image {background: url() top left no-repeat;
    div.image > div { position: absolute; width: 10px; height: 10px; }
    div.image > div[class=top] { top: 0; }
    div.image > div[class=bottom] { bottom: 0; }
    div.image > div[class=left] { left: 0; }
    div.image > div[class=right] { right: 0; }

    /* if corners need to have a different background */
    div.image > div[class=top][class=left] { background: url(); }
    div.image > div[class=top][class=right] { background: url(); }
    div.image > div[class=bottom][class=left] { background: url(); }
    div.image > div[class=bottom][class=right] { background: url(); }
</style>

可能需要一些微调

【讨论】：

【解决方案2】：

您应该可以使用 CSS 将角图像叠加到背景图像的每个角上。您不需要知道这些角图像的大小来放置它们，只需使用对齐参数，

然后，鼠标悬停动作将与那些不可见的图像对象相关联。

【讨论】：

【解决方案3】：

以下示例在 background.png 的四个角上具有热点（具有自己的角背景），当将鼠标悬停在这些热点上时，会在背景顶部（但不在角上）显示叠加图像。这可以更改以删除角落图像等。这是您要查找的内容吗？

<style>
  #bgImage { position: relative; background: url(background.png) top left no-repeat; width: 500px; height: 500px; }
  #overlayImage { position: absolute; width: 500px; height: 500px; background-position: top left; background-repeat: no-repeat; }
  #bgImage a.top, #bgImage a.right, #bgImage a.bottom, #bgImage a.left { position: absolute; width: 25px; height: 25px; cursor: pointer; display: block; }
  #bgImage a.top { top: 0; }
  #bgImage a.right { right: 0; }
  #bgImage a.bottom { bottom: 0; }
  #bgImage a.left { left: 0; }
  #bgImage a.top-left { background: url(corner1.png) top left no-repeat; }
  #bgImage a.top-right { background: url(corner2.png) top left no-repeat; }
  #bgImage a.bottom-left { background: url(corner3.png) top left no-repeat; }
  #bgImage a.bottom-right { background: url(corner4.png) top left no-repeat; }
</style>

<script>
    function ShowOverlay()
    {
        document.getElementById("overlayImage").style.backgroundImage = "url(green-overlay.png)";
    }

    function HideOverlay()
    {
        document.getElementById("overlayImage").style.backgroundImage = "none";
    }
</script>

<div id="bgImage">
    <div id="overlayImage"></div>

    <a class="top left top-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="top right top-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="bottom left bottom-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="bottom right bottom-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
</div>

【讨论】：