Parike Parike - 5 months ago 16
HTML Question

change text content on mouseover to img alt property

i have some

img
tag with class name
box
, and a
p
tag with class
title
, i need to change on
mouseover
and change text content of
p
tag to
alt
property of
img
that clicked, please help me.

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


and my p tag:

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


i want to write it with javascript, i dont want to use jQuery.

Answer

I coded solution for this question using by javascript.

Add onmouseover and onmouseout event properties into the img tag. As below:

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

After this, add the following js functions linked to above mouse events.

This changeText() function going to execute when mouse pointer come over the displayed img tag. After, it changes text content of p tag to the value of alt property on img tag.

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

Also, changeTextToDefault() function going to execute when mouse pointer leaves over the displayed img tag. And, it changes text content of p tag to the default text.

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

Here is demo