웹 페이지에 이미지가 있고 사용자가 이미지 위에 마우스를 가져 가면 다른 이미지가 나타납니다. 나타나는 이미지 위로 마우스를 가져 가면 깜박입니다.mouseover 요소가 깜박임
아무도 그 이유가 무엇입니까?
토니
업데이트 : 유혹 할 때 첫 번째 이미지 퀘스 트 로그에서 사라질하지 않고, 또 다른 (작은) 이미지가 왼쪽 상단 모서리에 맨 위에 나타납니다. 그 작은 이미지 위로 이동하면 깜박임이 나타납니다.
사이트의 이미지는 갤러리의 일부이므로 PHP 변수이며 사용자가 이미지 목록에서 선택하면로드됩니다. 그래서 하나를 다른 하나에 삽입하는 것은 매우 어렵습니다.
브라우저가 새 이미지를 가져 오기 때문에. 가장 좋은 해결책은 두 이미지를 하나로 통합하고, CSS를 사용하여 순수하게 배경 위치를 :hover으로 변경하거나 (IE6 및 비 앵커 요소의 경우) JS로 배경 위치를 변경하는 것입니다.
참조 : CSS spritemap. 여기 좋은 기사 : http://www.alistapart.com/articles/sprites –
이미지는 자바 스크립트 (createElement)로 동적으로 생성됩니다. 처음에는 숨겨져 있으며 기존 이미지 위로 마우스를 가져 가면 표시됩니다. 그러나 새 이미지 위로 마우스를 가져 가면 깜박임이 발생합니다. –
Ok. 내 설명은 여전히 적용됩니다. –
IE에서? IE는 (CSS :hover 또는 Javascript 이벤트로 인해) 동적으로로드되는 이미지를 캐시하지 않는 것으로 유명합니다. 당신은 (두 이미지를 표시하는 하나 개의 이미지 파일을 사용하고 하나 또는 다른을 표시 위치를 사용하여, 기본적으로, Mike Robinson로 연결 tutorial를) CSS 스프라이트를 사용하거나 이미지 미리로드 사용할 수 있습니다
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
편집 : 다른 브라우저는 첫 번째로드에서 동일한 작업을 수행합니다. IE는 모든 스위치에서 계속이를 수행 할 수 있습니다.
아마 IE를 사용하고있는 것 같습니다. 이것은 일부 버전에서 캐싱을 구현하는 방식의 버그입니다. 웹 서버를 구성하여 proper cache headers을 보내거나 CSS sprites을 사용하여 문제를 해결하십시오. 후자는 HTTP 요청이 적어 JS를 사용하지 않아도 미리로드가 가능하다는 것을 의미하므로 권장합니다.
잘 이해한다면 mouseover 이벤트가 발생할 때마다 이미지의 src를 대체 할 수 있습니다. 따라서 이미지가 바뀌더라도 이벤트가 시작되고 이미지가 자체로 바뀌면 깜박임이 발생할 수 있습니다.
모든 브라우저에서 깜박입니다. Chrome을 사용하고 있습니다. –