Rollover de imagem perto do mouse

Question

Eu tenho um calendário de advento/Natal. Todos os dias é outra foto com mais uma porta aberta. Para tornar essas regiões clicadas, usei CSS e IDs como este:

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>

Até agora tudo funciona bem. Agora, uma imagem deve, na rolagem, mostrar uma porta perto do cursor do mouse enquanto está na região. Eu tentei algo como:

#door1 a:hover {
  display:block;
  background-image: url(OTHERPICTURE1.jpg);
}

Mas esse método não funciona se a outra imagem for maior que a região da porta. Alguma outra ideia? Não posso cortar a imagem de fundo, isso não é uma opção.

Não é necessário seguir o mouse na região, a posição pode ser fixada. Mas essa segunda imagem deve apenas aparecer enquanto o mouse está sobre a porta (ou talvez na segunda foto).

A melhor solução seria algo assim: http://www.sohtanaka.com/web-design/fancy-thumbnail-os-effect-w-jquery/

Mas, nesse caso, é o mesmo picuture em que o zoom. Eu tenho apenas GIFs em branco. Qual será a ideia mais inteligente?

Answer 1

Que tal definir as Divs da porta para a posição: parente, faça uma Div absolutamente posicionada com o exemplo inferior negativo e de colocação direita:

#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25; 
Right:-25;
Display:none;
}

Em seguida, use JavaScript para alterar a propriedade Display de volta ao normal.

Espero que isto ajude.

Answer 2

Se você estiver disposto a usar jQuery, poderá criar uma div oculta para cada "porta". Em seguida, vincule um evento pairar ao a Tag e defina a visibilidade da div para True. Assim:

$("li #door1 a").hover(function () {
  $("div #door1image", this).fadeIn("fast");
}, function () {
  $("div #door1image", this).fadeOut("fast");
});

A "Door1Image" é Id da div que estaria escondida desde o início (display:none). Pode ser colocado dentro do li com o a etiqueta para cada porta.

O código não é testado e pode não ser perfeito, mas espero que você tenha a ideia.

Answer 3

Não consegui fazer com que o Fades ou a animação funcione como eu quero, mas aqui está como eu faria as imagens pop -up. Observação: Em vez de usar uma imagem em branco, a imagem deve ser a imagem que você deseja exibir no mouse.

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#doorregions li {
  border: 0px ;
  position: absolute;
}
#door1 {
  left: 135px;
  top: 192px;
}
#door2 {
  left: 225px;
  top: 192px;
}
.doors {
  background: #444;
  width: 73px;
  height: 116px;
}
.popup {
 position: absolute;
 top: 0;
 left: -99999px;
 border: 0px;
 z-index: 9;
}

Html

<ul id="doorregions">
 <li id="door1" class="doors">
  <span><a href="<?php echo($december1); ?>">
   <img class="popup" src="<?php echo($december1Image); ?>">
  </a></span>
 </li>
 <li id="door2" class="doors">
  <span><a href="<?php echo($december2); ?>">
   <img class="popup" src="<?php echo($december2Image); ?>">
  </a></span>
 </li>
</ul>

Roteiro

// using window.load to ensure all images are loaded
$(window).load(function(){
 $('.doors').each(function(){
  var popup = $(this).find('.popup');
  // find middle of door
  var doorY = $(this).height()/2;
  var doorX = $(this).width()/2;
  // position middle of popup to middle of door
  var popY = doorY - popup.height()/2;
  var popX = doorX - popup.width()/2;
  popup
   .hide()
   .css({top: popY, left: popX });
  $(this).hover(function(){
   popup.show();
  },function(){
   popup.hide();
  })
 })
})

Answer 4

Eu não sou inteiramente Claro do que você precisa, mas o código a seguir duplica a funcionalidade do link "Miniatura sofisticado" que você forneceu. Espero que isso ajude!

<!DOCTYPE html>
<style>
ul {
    list-style: none;
    margin: 50px;
    padding: 0;
}

li {
    width: 300px;
    height: 300px;
    float: left;
    border: 3px outset gray;
    background: white;
}

li:hover {
    margin: -50px;
    width: 400px;
    height: 400px;
    z-index: 2;
    position: relative;
}
</style>
<ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
</ul>