OnMouseOver 탐색시 깜박임

Question

CSS와 약간의 자바 스크립트를 사용하여 드롭 다운 탐색을 만들었습니다. 사용자가 처음 탐색을 사용할 때 깜박 거리는 데 문제가 있습니다. 다른 브라우저 (Chrome)와 반대로 일부 브라우저에서는 더 자주 발생합니다. 그것은 정말로 성가신 일입니다. 그리고 이것은 nav에서 javascript, 특히 OnMouseOver와 OnMouseOut을 사용하는 나의 처음입니다. 다음은 내비게이션 링크 http://demo2.reclaimdesign.com/testnav.html입니다. 이 문제를 해결할 수있는 방법이 있습니까?

감사합니다, DH

Answer 1

이미지가 미리로드되지 않은 것으로 의심됩니다. 즉, '마우스 오버'상태 이미지는 마우스를 마우스로 가리키면 활성화되고로드됩니다.

사용자가 마우스를 요소 위에 올리거나 (더 좋게) 스프라이트를 사용하여 모든 마우스를 가리 키도록 할 수 있도록 자바 스크립트로 이미지를 미리로드합니다. - 당신이 필요로하는 이미지들 하나의 이미지에 CSS를 사용하면 같은 효과를 낼 수있는 '슬라이드 룰'처럼 움직일 수 있습니다.

이 이미지 미리로드와 관련된에 StackOverflow에 대한 예제를 많이하고 있지만 여기가 얻을 수있는 방법의 예는 다음과 같습니다

var image_to_preload = new Image(); 
image_to_preload.onload = function(){ // could do something here... }; 
image_to_preload.src = "/path/to/image.jpg"; 

내가 말했듯이, 나는 스프라이트를 사용하여 선호하는 것, 다시 나는 거기에 의심 많은 예제가 있지만 메뉴에 대한 예로서 항목의 크기가 110 x 35 픽셀 인 것처럼 보이므로 크기가 110 x 70 픽셀 인 이미지를 만든 경우 (둘 다 한 개의 이미지에 마우스를 놓은 상태) CSS로 '슬라이드'할 수 있습니다.

.menuAllProducts 
{ 
    width: 110px; 
    height: 35px; 
    background-image: url(background-sprite.jpg); 
    background-position: 0px 0px; 
} 

.menuAllProducts:hover 
{ 
    background-position: 0px -35px; 
} 

이것은 도움이되고 말이됩니다! 행운을 빕니다! :)

Answer 2

당신이 이미지를 사용하고 있기 때문에, 당신은 모든 이미지 및 자신의 롤 오버 대응을 미리로드해야합니다.

"깜박임"은 롤오버 이미지를로드해야하기 때문에 발생합니다. 더 좋은 방법은 하나의 이미지를 배경으로 사용하고 CSS를 사용하여 배경 이미지를 호버로 이동하는 것입니다. 이것은 "슬라이딩 도어"라고합니다.

Here's one link with a tutorial.하지만 Google의 경우 수십 가지가 있습니다.