JavaScript와 jQuery가 서로 충돌합니다.

Question

페이지 상단에 탐색 막대가있는 웹 사이트를 만들었습니다. 일부 롤오버 이미지가 링크로 있습니다. Dreamweaver를 사용하므로 Dreamweaver에서 JS를 사용합니다. 하지만 최근 Orbit (orbit creator : zurb.com/playground/jquery_image_slider_plugin)이라는 jQuery 갤러리/슬라이드 쇼를 추가했습니다.

그러나 jQuery는 마우스 오버시 이미지가 변경되지 않고 클릭 할 수 없도록 롤오버 이미지의 JavaScript와 충돌 및 충돌하는 것으로 보입니다. 어떤 이유로 5 링크 중 처음 3 개에만 영향을 미칩니다. 또한 문제는 Chrome, Firefox 및 Opera에서 발생하지만 이상하게도 Internet Explorer에서 완벽하게 작동합니다.

jQuery.noConflict를 여러 가지 방법으로 사용해 보았지만 작동하지 않지만 문제가 계속 발생합니다.

이 문제가 발생하는 웹 주소 : http://www.eastfieldjoinery.com/gallery.html 웹 주소 탐색 막대 할 것으로 예상되는 것을 이해하는 것입니다 : 여기 www.eastfieldjoinery.com/

이다 롤오버 이미지의 자바 스크립트 코드가

<script type="text/javascript"> 
function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
</script> 

을 그리고 여기 궤도 슬라이드 쇼의 jQuery 코드에 대한 링크입니다 : Dreamweaver는 구성 http://www.eastfieldjoinery.com/JavaScript/jquery.orbit-1.2.3.js

나는 당신이 할 수있는 솔루션을 부탁드립니다 나에게주세요. 감사.

Answer 1

링크에 CSS의 Z- 색인 : 10을 추가하십시오. 그것은 마우스 움직임을 취하는 슬라이드 쇼의 div 블록입니다. 링크에 z- 색인을 추가하면 '보이지 않는'div 위에 표시됩니다.

Answer 2

이것은 CSS 문제로 보입니다. 자세히 보면 div가 실제로 처음 3 개의 메뉴 항목에 매달려 있기 때문에 호버가 올바르게 작동하고 div는 메뉴 항목과 겹치기 때문에 클릭 할 수 없습니다.

당신은 단지 DIV 클래스 = "궤도-래퍼"이상이를 추가하려고한다> :

<div class="clear"></div> 

와 CSS :

이

.clear { 
    clear: both; 
} 

는 또한 위치를 빼앗아 할 수 있습니다 : 상대를 궤도 - 래퍼에서 제거하고 일부 패딩을 추가합니다.

또 다른 옵션 1의 궤도 - 래퍼 DIV에 Z- 인덱스를 추가하는 것입니다, 그리고 메뉴를 제공하는 10

더 많은 정보의 Z- 인덱스 링크 : http://www.w3schools.com/cssref/pr_pos_z-index.asp