은 onclick 이벤트에서 비활성화 된 onmouseout을 다시 활성화해야합니다.

onClick 코드에서 비활성화 된 onMouseOut을 다시 활성화 할 수있는 코드를 인터넷에서 검색했습니다. 나는 사물을 발견했지만 내 상황에서는 아무 것도 발견하지 못했습니다.은 onclick 이벤트에서 비활성화 된 onmouseout을 다시 활성화해야합니다.

페이지에는 두 개의 div가있는 컨테이너 div가 있습니다. 하나는 이미지 용이고 다른 하나는 해당 텍스트 용입니다. 이미지 아래에는 정렬되지 않은 목록에 배치 된 4 개의 링크 (1, 2, 3, 4)가 있습니다. 방문자가 # 2를 굴리면 이미지가 img2로 변경되어야하고 일치하는 텍스트 div는 '숨김'에서 '표시'로 이동해야합니다. onMouseOut은 이미지와 텍스트를 원래 버전으로 재설정합니다. onClick은 클릭 한 이미지/텍스트를 변경 한 다음 onMouseOut을 비활성화합니다.

이제 방문자가 다음 번에 # 링크를 굴릴 때 다시 onMOuseOut 작업을 수행 할 방법이 필요합니다. 지금 가지고 있기 때문에 일단 onMouseOut이 비활성화되면 페이지를 다시로드 할 때까지 비활성화 상태로 유지됩니다. 여기

지금까지 코드 :

<head> 
<script> 
if (document.images) { 
book1 = new Image 
    book2 = new Image 
    book3 = new Image 
    book4 = new Image 

book1.src = "/llb/assets/book1.jpg" 
    book2.src = "/llb/assets/book2.jpg" 
book3.src = "/llb/assets/book3.jpg" 
    book4.src = "/llb/assets/book4.jpg" 
} 
function swapImage(thisImage,newImage) { 
if (document.images) { 
    document[thisImage].src = eval(newImage + ".src") 
} 


} 
function show_visibility(IDS){ 
hide_visibility(); 
document.getElementById(IDS).style.display = 'block'; 
} 

function hide_visibility(){ 
var sel = document.getElementById('bookleadin').getElementsByTagName('div'); 
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; } 

} 

</script> 
</head> 

<body> 

<div id="content"> 
    <div id="books"> 
     <div id="bookimages"> 
     <img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" /> 
     <ul> 
      <li><a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a></li> 
      <li><a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a></li> 
      <li><a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a></li> 
      <li><a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a></li> 
     </ul> 
     </div><!-- end bookimages --> 
     <div id="bookleadin"> 
     <div id="bt1" style="display:block;"><p>Writing starts with living...</p> 
     </div> 
     <div id="bt2" style="display:none;"><p>The air is silk...</p> 
     </div> 
     <div id="bt3" style="display:none;"><p>I lived in the woods...</p> 
     </div> 
     <div id="bt4" style="display:none;"><p>I tried to forget...</p> 
     </div> 
    </div><!-- end bookleadin --> 
    <div class="spacer"></div> 
    </div><!-- ends books --> 
</div><!-- end content -->

목록 항목 # 2 내가 함께 테스트 한 예이다. 나는 아직 자바 스크립트 초보자/중급입니다. 그래서 어떤 대답이라도이 프로젝트를 이해하고 적용 할 수있을 정도로 간단해야합니다. 그렇지 않으면 복사/붙여 넣기 만 할 수 있습니다.

도움을 주셔서 감사합니다.

출처

2012-01-05 ssliver1

onclick에 플래그를 설정할 수 있습니다. 그렇다면 클릭하면 onmouseout을 교환하고 그 외에는 아무것도하지 않고 this.onmouseout = ""을 수행하지 마십시오.

편집 :

<head> 
<script> 
    if(document.images) { 
     book1 = new Image 
     book2 = new Image 
     book3 = new Image 
     book4 = new Image 

     book1.src = "/llb/assets/book1.jpg" 
     book2.src = "/llb/assets/book2.jpg" 
     book3.src = "/llb/assets/book3.jpg" 
     book4.src = "/llb/assets/book4.jpg" 
    } 
    var swap_list = {}; // a list of swapped elements 
    function swapImage(thisImage, newImage) { 
     if(typeof swap_list[thisImage] == 'undefined' || swap_list[thisImage]=='') 
      if(document.images) { 
       document[thisImage].src = eval(newImage + ".src"); 
       swap_list[thisImage] = newImage; 
      } 
     else 
      { 
       swap_list[thisImage] = ''; 
       document[thisImage].src = "../llb/assets/book1.jpg"; 
      } 
    } 

    function show_visibility(IDS) { 
     hide_visibility(); 
     document.getElementById(IDS).style.display = 'block'; 
    } 

    function hide_visibility() { 
     var sel = document.getElementById('bookleadin').getElementsByTagName('div'); 
     for(var i = 0; i < sel.length; i++) { 
      sel[i].style.display = 'none'; 
     } 

    } 
</script> 
</head> 
<body> 
    <div id="content"> 
     <div id="books"> 
      <div id="bookimages"> 
       <img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" /> 
       <ul> 
       <li> 
         <a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); " onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a> 
       </li> 
       <li> 
        <a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); " onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a> 
       </li> 
       <li> 
        <a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a> 
       </li> 
       <li> 
        <a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a> 
       </li> 
      </ul> 
     </div><!-- end bookimages --> 
     <div id="bookleadin"> 
      <div id="bt1" style="display:block;"> 
       <p> 
        Writing starts with living... 
       </p> 
      </div> 
      <div id="bt2" style="display:none;"> 
       <p> 
        The air is silk... 
       </p> 
      </div> 
      <div id="bt3" style="display:none;"> 
       <p> 
        I lived in the woods... 
       </p> 
       </div> 
       <div id="bt4" style="display:none;"> 
        <p> 
        I tried to forget... 
        </p> 
      </div> 
      </div><!-- end bookleadin --> 
      <div class="spacer"></div> 
     </div><!-- ends books --> 
    </div><!-- end content --> 
</body>

출처

2012-01-06 00:31:34 khael

제가 당신을 이해하고 있는지를 바꿔 보자. onClick 발생 여부를 결정하는 함수를 작성합니다. true이면 onMouseOut을 비활성화하고, false이면 onMouseout을 건드릴 수 없으므로 커서가 링크에서 벗어나 원래의 항목이 다시 나타날 때 발생합니다. 어디에서 verify 함수를 호출할까요? onMouseOut 이벤트를 비활성화하는 데 사용할 코드는 무엇이며, 사용자가 다른 링크를 클릭하거나 다른 링크를 클릭하면 어떻게 해당 링크를 다시 켭니까? – ssliver1

@ ssliver1 onmouseout을 비활성화하지 마십시오. onclick이 발생하면 verifiy가 실행되고, 코드를 수행하지 않으면 아무 일도하지 않습니다. 코드가 필요하거나 알고리즘의 순수한 논리로 충분합니까? – khael

코드가 필요할 수도 있습니다. 나는 언제/어디에서 onclick을 확인하기위한 점검을 시작할지 알아 내려고 노력하고있다. 각 링크에는 mouseOver, mouseOut 및 onCLick의 세 가지 이벤트가 있습니다. 그들이 링크를 클릭하면 나는 mouseOut 아무것도하지 않아도됩니다. 클릭하지 않으면 action을 완료하기 위해 mouseOut이 필요합니다. 도와 줘서 고마워. – ssliver1

은 onclick 이벤트에서 비활성화 된 onmouseout을 다시 활성화해야합니다.

답변

관련 문제