I have an advent/christmas calendar. Everyday is another picture with one more door opened. To make these regions clickable I used CSS and IDs like this:
CSS:
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregionsli {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
#door2 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
HTML:
<ul id="doorregions">
<li id="door1">
<span><a href="<?php echo($december1); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
<li id="door2">
<span><a href="<?php echo($december2); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
</ul>
So far all works fine. Now an image should, on rollover, show a door near the mouse cursor while it is over the region. I tried something like:
#door1 a:hover {
display:block;
background-image: url(OTHERPICTURE1.jpg);
}
But this method doesn't work if the other picture is bigger than the door region. Any other idea? I can't slice the background image, that is not an option.
It's not necessary to follow the mouse in the region, the position can be fixed. But this second image should only apear while the mouse is over the door (or maybe on the second picture).
The BEST solution would be something like this: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
But in this case it is the same picuture which zooms in. I have only blank gifs. What will be the smartest idea?
What about setting the door divs to position: relative then do an absolutely positioned div with negative bottom and rightplacement example:
#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25;
Right:-25;
Display:none;
}
Then use javascript to change the display property back to normal.
Hope this helps.