翻轉圖像

Question

我有一個很大的圖像，必須在後臺進行。

說圖像是方形的。現在，當有人在廣場的任何角落進行鼠標懸停時，圖像應該變爲綠色版本的圖像。

實際上背景圖像將保留，但我必須以某種方式覆蓋背景圖像上的綠色圖像切片。

所以我稱爲文件「background.png」，然後「corner1.png」，corner2.png等

我如何能實現呢？我是否必須知道將圖像正確放置在角落中的確切像素數？

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

可能需要進行一些微調

Answer 2

您應該可以使用CSS將角落圖像疊加到背景圖像的每個角落。您不需要知道要放置這些角落圖像的大小，只需使用對齊參數即可，然後將鼠標懸停操作與那些不可見的圖像對象相關聯。

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