Görüntü rollover-zoom yakın fare

4 Cevap php

Ben gelişi / yılbaşı takvimi var. Her gün açılan bir daha kapı ile başka bir resim. Bu gibi CSS ve kimlikleri kullanılan tıklanabilir bu bölgeleri yapmak için:

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>

Şimdiye kadar tüm çalışıyor. Bu bölgede iken şimdi bir görüntü, rollover, fare imleci yakın bir kapı göstermelidir. Ben böyle bir şey denedim:

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

Diğer resim kapı bölgede daha büyük Ama eğer bu yöntem işe yaramaz. Başka herhangi bir fikir? Ben arka plan resmi dilim edemez, bu bir seçenek değil.

Bu bölgede fare takip etmek gerekli değildir, konumu sabit olabilir. Fare kapı üzerinde (ya da belki ikinci resimde) iken Ama bu ikinci resim sadece apear gerekir.

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/: İYİ çözüm böyle bir şey olurdu

Ama bu durumda ben sadece boş bir gif var yakınlaşır aynı picuture olduğunu. Ne akıllı bir fikir olacak?

4 Cevap

Ne konuma kapı divs ayarlama hakkında: bağıl sonra negatif alt ve rightplacement örnek bir kesinlikle konumlandırılmış div yapın:

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

Sonra geri normale görüntüleme özelliğini değiştirmek için javascript kullanın.

Umarım bu yardımcı olur.

JQuery kullanmak için istekli iseniz, her bir "kapı" için gizli bir div oluşturmak olabilir. Ardından, a etiketine bir hover olay bağlamak ve true div görünürlüğünü ayarlayın. Gibi gibi:

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

"Door1image" baştan gizli olacak div id olan (display:none). Her kapı için a etiketi olan li içine yerleştirilebilir.

Kodu test değildir ve mükemmel olmayabilir, ama umarım anladınız.

Ben bunu istiyorum gibi çalışmak kaybolur veya animasyon almak mümkün, ama burada açılan resimler yapmak istiyorum nasıl değil. Note: yerine boş bir görüntü kullanarak, görüntü, gezinip üzerinde görüntülemek istediğiniz görüntü olması gerektiğini söyledi.

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>

Senaryo

// 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();
  })
 })
})

Ben size ihtiyacı şeyin entirely Emin değilim, ancak aşağıdaki kod sağlanan "Fancy hâli" bağlantısını işlevselliğini çoğaltır. Umarım bu yardımcı olur!

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

etiketler