0

私はアドベント/クリスマスカレンダーを持っています。毎日が別の写真で、ドアがもう 1 つ開いています。これらの領域をクリック可能にするために、次のような CSS と ID を使用しました。

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>

これまでのところ、すべて正常に動作しています。これで、画像がロールオーバーすると、マウス カーソルが領域上にある間、マウス カーソルの近くにドアが表示されるはずです。私は次のようなものを試しました：

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

しかし、この方法は、他の画像がドア領域よりも大きい場合には機能しません。他のアイデアはありますか？背景画像をスライスできません。これはオプションではありません。

領域内でマウスを追う必要はなく、位置を固定できます。ただし、この 2 番目の画像は、マウスがドア (または 2 番目の画像) の上にあるときにのみ表示されます。

最善の解決策は次のようなものです: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

しかし、この場合、ズームインするのは同じ写真です。空白のGIFしかありません。最も賢いアイデアは何ですか？

4

4 に答える 4

1

jQuery を使用する場合は、「ドア」ごとに非表示の div を作成できます。次に、ホバー イベントをaタグにバインドし、div の可視性を true に設定します。そのような：

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

「door1image」は、最初から非表示になる div の ID です ( display:none)。各ドアliのタグで内側に配置できます。a

コードはテストされておらず、完璧ではないかもしれませんが、うまくいけばアイデアが得られます.

于 2009-11-24T02:56:48.850 に答える
0

フェードやアニメーションを思い通りに動作させることができませんでしたが、ポップアップ画像を作成する方法は次のとおりです。注：空白の画像を使用する代わりに、画像はホバー時に表示する画像である必要があります。

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>

脚本

// 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();
  })
 })
})
于 2009-11-24T16:03:32.790 に答える
0

何が必要なのか完全にはわかりませんが、次のコードは、提供された「ファンシー サムネイル」リンクの機能を複製しています。うまくいけば、それは助けになるでしょう！

<!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>
于 2009-11-24T16:18:54.600 に答える
0

ドアの div を position: relative に設定してから、絶対位置の div を負の下部と右の配置の例で設定するのはどうですか:

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

次に、JavaScript を使用して表示プロパティを通常に戻します。

お役に立てれば。

于 2009-11-24T03:19:50.207 に答える