이미지 롤오버 - 마우스 근처 줌

나는 출현/크리스마스 달력이 있습니다. 매일 또 하나의 문이 열리는 또 다른 그림입니다. 나는이 같은 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의 설정에 대해 :

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

이 다시 정상으로 디스플레이 속성을 변경하는 자바 스크립트를 사용 대하여 다음 네거티브 바닥 rightplacement 예와 절대 위치 DIV 할.

희망이 도움이됩니다.

출처

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는"시작 (display:none)에서 숨겨 질 것이다 사업부의 ID입니다. 각 문당 a 태그가있는 li 내부에 배치 할 수 있습니다.

코드는 테스트되지 않았고 완벽하지 않을 수 있습니다. 그러나 잘하면 아이디어를 얻을 수 있습니다.

출처

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

이 스크립트는 이미지를 슬라이스하지 않습니다. 계산은 마우스 오버시 이미지 중간을 문 중간으로 설정합니다. – Mottie

아니에요 당신이 필요로하고 있지만 다음 코드 기능을 복제하는 것을 완전히 확인 당신이 제공 한 "멋진 섬네일"링크를 클릭하십시오. 잘하면 도움이 될 것입니다!

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

예, 이미지를 확대/축소 할 필요가 없습니다. blank.gif를 죽일 것입니다. 아무 것도하지 않습니다. : hover 규칙에 새로운 배경을 설정하기 만하면됩니다. 그게 당신이 필요로하는 것을 처리 할 것입니까? – Xanthir

이미지 롤오버 - 마우스 근처 줌

답변

관련 문제