необходимо повторно включить onmouseout, который был отключен в событии onclick - PullRequest
Новая
       21

необходимо повторно включить onmouseout, который был отключен в событии onclick

1 голос
/ 05 января 2012

Я искал здесь и в Интернете код, который может повторно включить onMouseOut, который был отключен в коде onClick. Я нашел вещи, но ничего, что работает в моей ситуации.

На странице есть контейнер div, который содержит два элемента div, один для изображения и один для соответствующего текста. Под изображением четыре ссылки (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 - это пример, с которым я тестировал. Я все еще начинающий / промежуточный пользователь javascript, поэтому любой ответ должен быть достаточно простым, чтобы я мог понять и применить его к данному проекту или завершить его, чтобы я мог просто скопировать / вставить его.

Заранее благодарю за любую помощь, которую вы можете оказать.

1 Ответ

0 голосов
/ 06 января 2012

Вы можете установить флаг на onclick, чтобы проверить, если на него нажали, если да, тогда поменяйте местами onmouseout, иначе ничего не сделайте, но не сделайте this.onmouseout = "".

EDIT: 

  <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...