Изображение с ролловерами

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>