Image with rollovers

Question

Hi,

I have a big image that has to go in the background.

Say the image is a square. Now when someone does a mouseover on any of the square's corners, the image should change to the green version of the image.

Actually the background image is going to remain, but I have to somehow overlay the green image slice over the background image.

So I have a file called 'background.png' and then 'corner1.png', corner2.png etc.

How can I implement this? Do I have to know the exact number of pixels to place the image in the corner properly?

Answer 1

It should be possible for you to use CSS to place the corner images overlaid into each of the corners of your background image. You shouldn't need to know the size of those corner images to place them, just use alignment parameters,

The mouse-over actions would then be associated with those invisible image objects.

Answer 2

Your answer is here probably.

Answer 3

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

Might require some fine-tuning

Answer 4

The following example has hotspots on the four corners of background.png (with their own corner backgrounds) and when those hotspots are moused over, shows an overlay image on top of the background (but not over the corners). This can be altered to remove the corner images, etc. Is this what you're looking for?

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