javascript - 将鼠标悬停时的文本内容更改为 img alt 属性

Question

我有一些带有 box 类名的 img 标签，和一个带有 title 类的 p 标签，我需要更改 mouseover 并将 p 标记的文本内容更改为 alt 单击的 img 属性，请帮助我。

<table style="width:100%;padding-top:200px;border-bottom:5px solid black;">
    <tr style="text-align:right;width:100%;font-size:small;text-align:center;">
        <td class="box" style="width:22%;">
            <a href="http://xxxxxx.com">
                <img src="Images/photo_2016-06-21_12-13-45.jpg" alt="link1" class="imgLogo" />
            </a>
        </td> 
        <td  class="box" style="width:22%;">
            <a href="http://xxxxxxxxx.com">
                <img src="Images/photo_2016-06-21_12-13-18.jpg" alt="link2" class="imgLogo" data-tree="oak" onmouseover="reply_click(this);"/>
            </a>
        </td>
        <td class="box" style="width:22%">
            <a href="http://xxxxx.com/pwa">
                <img src="Images/photo_2016-06-21_12-14-00.jpg" alt="link3" class="imgLogo" /> 
            </a> 
        </td>
        <td class="box" style="width:22%">
            <a href="http://xxxx.com">
                <img src="Images/photo_2016-06-21_12-13-51.jpg" alt="link4" class="imgLogo" /> 
            </a> 
        </td>
    </tr>
</table>

和我的 p 标签:

<p style="text-align: center" id="title-links" class="title-links">content here</p>

我想用javascript写，我不想用jQuery。

Answer 1

我使用 javascript 编写了这个问题的解决方案。

在 img 标签中添加 onmouseover 和 onmouseout 事件属性。如下:

<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="سیستم مدیریت جلسات" class="imgLogo" onmouseover="changeText(this)" onmouseout="changeTextToDefault()"/>

在此之后，添加以下链接到上述鼠标事件的 js 函数。

这个 changeText() 函数将在鼠标指针移到显示的 img 标签上时执行。之后，它将 p 标签的文本内容更改为 img 标签上的 alt 属性的值。

function changeText(xTag){ document.getElementById("title-links").innerHTML =xTag.getAttribute("alt");}

此外，changeTextToDefault() 函数将在鼠标指针离开显示的 img 标签时执行。并且，它将 p 标签的文本内容更改为默认文本。

function changeTextToDefault(){ document.getElementById("title-links").innerHTML = "سیستم مدیریت جلسات";} 

Here is demo