鼠標附近的圖像翻轉放大

我有一個來臨/聖誕日曆。每天都是另一張帶有一扇門的照片。爲了使這些區域可點擊我用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); 
}

但是，如果其他圖片大於門區域，此方法不起作用。任何其他想法？我無法切分背景圖片，這不是一個選項。

沒有必要在該地區跟隨鼠標，位置可以固定。但是，第二張圖像應該只在鼠標在門上（或者在第二張圖片上）時纔會出現。

最好的解決辦法是這樣的：http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

但在這種情況下，它是放大在同一picuture我只有空白的GIF。什麼是最聰明的想法？

來源

2009-11-24 SurfingCat

什麼門的div設置爲位置：相對然後做負底部和rightplacement例如絕對定位的div：

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

然後使用JavaScript來顯示屬性更改恢復正常。

希望這會有所幫助。

來源

2009-11-24 03:19:50 David

如果你願意使用jQuery，你可以爲每個「門」創建一個隱藏的div。然後，將懸停事件綁定到a標記，並將div的可見性設置爲true。像這樣：

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

「door1image」是從開始將被隱藏的div（display:none）的id。它可以放在li的內部，每個門上都有a標籤。

代碼未經測試，可能並不完美，但希望您能明白。

來源

2009-11-24 02:56:48

我一直無法使淡入淡出或動畫像我想要的那樣工作，但這裏是我如何製作彈出圖像。 注意：不是使用空白圖像，圖像應該是要在懸停時顯示的圖像。

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-24 16:03:32 Mottie

這就是問題所在。這不是我想要的。切片圖像需要很多工作... – SurfingCat 2009-11-24 16:33:10

此腳本不切片圖像。在鼠標懸停時，計算將圖像的中間設置到門的中間位置。 – Mottie 2009-11-24 21:14:09

我不完全確定你需要什麼，但下面的代碼複製功能的您提供的「Fancy Thumbnail」鏈接。希望它會有所幫助！

<!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-24 16:18:54 Xanthir

演示的問題是，我沒有放大的圖像，而是有一個空白的gif。只要確保所有區域都可點擊。理想的是將鼠標懸停在空白的gif上，以顯示其他圖片（比框更大）新鼠標。 – SurfingCat 2009-11-24 16:35:48

是的，你不需要放大圖像。我會殺死blank.gif - 它什麼都不做。只需在：hover規則上設置一個新的背景。這將解決你需要什麼？ – Xanthir 2009-11-24 16:46:07

鼠標附近的圖像翻轉放大

回答

相關問題