This post is one of the simple concept using javascript, The concept is to display the title of the particular hover image or div, Here i am using image to display the title. when you hover another image it hides the current title displays the corresponding image title, This trick is done by using corresponding image title.
The below images is shows you the concept of the post and also visit the demo page to view live result of this code. I hope this example is help you some where in webpages or web applications.
The below images is shows you the concept of the post and also visit the demo page to view live result of this code. I hope this example is help you some where in webpages or web applications.
Code for change the text on hover the image
<html>
<head>
<script type="text/javascript">
function setTitle(field)
{
element = document.getElementById("titlespace");
element.textContent = field.title;
}
</script>
<style>
img{
width:225px;
height:225px;
padding:10px;
border:1px solid #000;
margin:6px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3"style="color:black; font-size:2em; font-weight:bold;">Name of the Fruit : </td>
<td colspan="3" id="titlespace" style="color:red; font-size:2em; font-weight:bold;"> </td>
</tr>
</table>
<img src="img/apple.jpg" title="Apple" onmouseover="setTitle(this);" />
<img src="img/grapes.jpg" title="Grapes" onmouseover="setTitle(this);" />
<img src="img/mango.jpg" title="Mango" onmouseover="setTitle(this);" />
<img src="img/pineapple.jpg" title="Pineapple" onmouseover="setTitle(this);" />
</body>
</html>
<head>
<script type="text/javascript">
function setTitle(field)
{
element = document.getElementById("titlespace");
element.textContent = field.title;
}
</script>
<style>
img{
width:225px;
height:225px;
padding:10px;
border:1px solid #000;
margin:6px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3"style="color:black; font-size:2em; font-weight:bold;">Name of the Fruit : </td>
<td colspan="3" id="titlespace" style="color:red; font-size:2em; font-weight:bold;"> </td>
</tr>
</table>
<img src="img/apple.jpg" title="Apple" onmouseover="setTitle(this);" />
<img src="img/grapes.jpg" title="Grapes" onmouseover="setTitle(this);" />
<img src="img/mango.jpg" title="Mango" onmouseover="setTitle(this);" />
<img src="img/pineapple.jpg" title="Pineapple" onmouseover="setTitle(this);" />
</body>
</html>
0 Comments