鼠标附近的图像翻转放大

我有一个来临/圣诞日历。每天都是另一张带有一扇门的照片。为了使这些区域可点击我用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

鼠标附近的图像翻转放大

回答

相关问题