Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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?</p> <pre><code>&lt;style&gt; #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; } &lt;/style&gt; &lt;script&gt; function ShowOverlay() { document.getElementById("overlayImage").style.backgroundImage = "url(green-overlay.png)"; } function HideOverlay() { document.getElementById("overlayImage").style.backgroundImage = "none"; } &lt;/script&gt; &lt;div id="bgImage"&gt; &lt;div id="overlayImage"&gt;&lt;/div&gt; &lt;a class="top left top-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"&gt;&lt;/a&gt; &lt;a class="top right top-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"&gt;&lt;/a&gt; &lt;a class="bottom left bottom-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"&gt;&lt;/a&gt; &lt;a class="bottom right bottom-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload