2012-12-20 3 views
-2

내가 디자인하고있는 사이트에 문제가 있습니다. 불행히도 나는 인터넷 익스플로러를 처음으로 디자인하지 않았지만 Chrome과 같은 더 친숙한 브라우저를 고수했다. 이제 IE에서 그걸 보았습니다. 나는 조금 어이가 빠져있는 문제를 발견했습니다. 여기 -일부 브라우저에서 JavaScript mouseover/mouseleave가 깜박임 (IE 및 FF)

http://mydomain.com/apassociates/page/home

... 플리커 및 붕괴

메뉴 링크. 모양이 어떻게 보이는지 알고 싶다면 Chrome에서 확인해보세요.

저는 전문적인 웹 개발자가 아니며 이러한 문제가 경험 많은 개발자에게 기본 요소가 될 수 있다고 생각합니다. 그러나 실제로 어디서부터 시작해야할지 모르겠습니다.

누구든지이 문제에 대한 생각이나 조언이 있습니까?


그래서 여기

<div id='home-pictures'> 

    <a href='http://mydomain.com/apassociates/page/conservatory'> 
     <div id='home-1'> 
      <span class='home-link'>Traditional</span> 
     </div> 
    </a> 
    <a href='http://mydomain.com/apassociates/page/blackbrookhouse'> 
     <div id='home-2'> 
      <span class='home-link'>Commercial</span> 
     </div> 
    </a> 
    <a href='http://mydomain.com/apassociates/page/floodproof'> 
     <div id='home-3'> 
      <span class='home-link'>Innovative</span> 
     </div> 
    </a> 
</div> 

여기에 자바 스크립트, mouseover-

// home links 
$('div#home-1').mouseover(function() { 
    $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption-wash.png)'); 
}); 

$('div#home-1').mouseleave(function() { 
    $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption.png)'); 
}); 
시 배경 이미지를 대체 작동, HTML이다, 의견의 조언에 따라이를 돕는 초점을 시도

저는 첫 번째 링크의 코드 만 포함 시켰습니다. 다른 코드는 다른 신원 태그가있는 이들의 중복입니다.

각 링크를 고정 된 차원의 자체 div에 배치하는 것이 더 좋은지 궁금합니다. 붕괴/깜빡 거림을 막을 수 있습니까?

+0

이 장면을 줄 수 있습니까?이 메타 태그를 추가하십시오 :''. 권장되는 방법은 아니지만 빠른 수정을 제공 할 수 있습니다. – Marty

+0

감사합니다. 감사합니다. – goose

+0

슬프게도 그렇게하지 않았습니다. – goose

답변

2

나는 문제를 격리하고 this fiddle에서 해결할 수있었습니다.

HTML :

<div id="home-pictures"> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/conservatory"> 
     <div id="home-1" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/devonhouse-caption.png);"> 
      <span class="home-link">Traditional</span> 
     </div> 
    </a> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/blackbrookhouse"> 
     <div id="home-2" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/carehome-caption.png);"> 
      <span class="home-link">Commercial</span> 
     </div> 
    </a> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/floodproof"> 
     <div id="home-3" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/submersible-caption.png);"> 
      <span class="home-link">Innovative</span> 
     </div> 
    </a> 
</div> 

CSS :

#home-pictures { 
    height: 250px; 
} 
#home-pictures { 
    text-align: center; 
} 
#home-pictures a:link, 
#home-pictures a:visited { 
    color: #B43104; 
    display: block; 
    text-decoration: none; 
} 
#home-1, #home-2, #home-3 { 
    margin-left: 20px; 
    float: left; 
    height: 256px; 
    width: 285px; 
    zoom: 1; 
} 
.home-link { 
    color: #B43104; 
    display: block; 
    float: left; 
    font-family: 'book antiqua', palatino, serif; 
    font-size: 24px; 
    margin-left: 15px; 
    position: relative; 
    top: 220px; 
} 

자바 스크립트 : 나는 호버에 대한 이미지에 의존하지 않도록 자바 스크립트를 변경하지만,에

// home links 
$('div#home-1, div#home-2, div#home-3').mouseenter(function() { 
    $(this).css({ 
     'filter' : 'alpha(opacity=50)', 
     'opacity' : '0.5' 
    }); 
}).mouseleave(function() { 
    $(this).css({ 
     'filter' : 'alpha(opacity=100)', 
     'opacity' : '1.0' 
    }); 
}); 

불투명. 그것은 div 아래에 있기 때문에 이미지 아래의 글꼴에 영향을 미칩니다. 그러나 div.image와 같은 이들 각각에 전용 div가있을 수 있으며 전체 이미지가 아니라 이미지에만 opterity가 설정됩니다. 항목은 ...

는 UPDATE :

불투명도 IE에 까다로울 수있다. IE에서도 작동하도록 CSS와 자바 스크립트가 업데이트되었습니다 ... 바이올린도 업데이트되었습니다. 브라우저 간 불투명도는 this post에서 가져온 것입니다 ...

+0

Wallace에게 감사합니다. opactiy가 앞으로 나아갈 길 인 것처럼 보일 것입니다. 아마도이 모든 부분을 단순화 할 필요가있을 것입니다. 게시 한 내용을 구현하려고했지만 트릭을 완료하지 않은 것 같습니다. 나는 무언가를 놓쳤다 고 생각한다. 당신의 도움에 환호! – goose

+0

필자는 바이올린에서 작업 할 수있는 절대 이미지 URL 만 만들었습니다. 그걸 로컬로 할 필요는 없습니다. 원하는 경우에도 이미지 방식으로 이동할 수는 있지만 불투명도가 낮은 오버 헤드를 필요로한다고 생각합니다. 이 경우'mouseleave'와 결합 된'mouseenter'는 더 신뢰할만한 결과를 줄 것입니다. 당신이 볼 수 있듯이이 기능은 상당히 단순화 될 수 있습니다. 잠자리에 들었다면 일단 시험을 마치면 어떻게되었는지 알려주십시오. ;) –

+0

Internet Explorer 5-9에서 불투명도를 지원하는 코드가 업데이트되었습니다. –

관련 문제