当前位置： 文江博客话题详情

需要重新启用在 onclick 事件中禁用的 onmouseout

发布于 2024-12-25 06:20:12 字数 3242 浏览 4 评论 0原文

我在这里和互联网上搜索了可以重新启用在 onClick 代码中禁用的 onMouseOut 的代码。我找到了一些东西，但没有一个适合我的情况。

页面上有一个容器 div，其中包含两个 div，一个用于图像，另一个用于其相应的文本。图像下方有四个链接（1、2、3、4），它们排列在无序列表中。当访问者将鼠标滑过#2时，图像需要更改为img2，匹配的文本div需要从“隐藏”变为“显示”。 onMouseOut 将图像和文本重置为原始版本。 onClick 将图像/文本更改为单击的任何内容，然后禁用 onMouseOut。

现在我需要一种方法，让 onMOuseOut 在访问者下次滑过该 #link 时再次工作。正如我现在所拥有的，一旦 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 初学者/中级人员，因此任何答案都必须足够简单，以便我能够理解并应用于该项目或完成，以便我可以复制/粘贴它。

原文

I have searched here and on the Internet for code that can re-enable an onMouseOut that has been disabled in the onClick code. I have found things but nothing that works in my situation.

On the page there is a container div that holds two divs, one for an image and one for its corresponding text. Under the image are four links (1, 2, 3, 4) laid out in an unordered list. When the visitor rolls over the #2, the image needs to change to img2, the matching text div needs to go from "hidden" to "show". The onMouseOut resets the image and text to the original versions. The onClick changes the image/text to whatever # was clicked and then disables the onMouseOut.

Now I need a way to make the onMOuseOut work again the next time the visitor rolls over that #link. As I have it now, once the onMouseOut is disabled, it stays disabled until I reload the page.

Here is the code so far:

<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 -->

list item #2 is the example I was testing with. I am still a Javascript beginner/intermediate, so any answer has to be simple enough for me to understand and apply to this project or complete so that I can just copy/paste it.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

宣告ˉ结束 2025-01-01 06:20:12

您可以在 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>

You could set a flag at onclick to be verified if it has been clicked if yes then do the swapping onmouseout else do nothing but do not do 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>
回复 原文
~没有更多了~

关于作者

空宴

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文