Simple Animation In JavaScript

This is a simple example of Javascript in this example when the mouse over on the title the Image will be change.Here we change the font and style of the tags. and use show and hide method by which when the mouse over on the next title the first image will be hide.

In this Example, When we mouseover on particular text, it will change the image according to where the mouseover occurs.

In this example, I prefer One,Two Three, you can choose whatever heading you prefer. In this example we change the color and image on the onmouse over of the particular heading.

In this example, there are the two functions Show2() and Hide2() of JavaScript.

Show2(): This function is called on the mouseover of the particular heading (here td1, td2, td3). With this we change the color (foreground and background) of the td and change the image.

Hide2(): This function is called for the onmouseout event of the particular heading (here td1, td2, td3). With this we set the default color of the heading.

Note: Here we take an Image Folder to store our images.

Now we write the JavaScript functions:

<script language="javascript" type="text/javascript">
function Show1() {
document.getElementById('img1').src = "Image/one.jpg";
document.getElementById('td1').style.color = "Red";
document.getElementById('td1').style.backgroundColor = "#FF9999";
document.getElementById('td1').style.fontStyle = "Italic";
function Hide1() {
document.getElementById('td1').style.color = "Black";
document.getElementById('td1').style.backgroundColor = "#FFFFFF";
document.getElementById('td1').style.borderColor = "Black";
document.getElementById('td1').style.fontStyle = "";
function Show2() {
document.getElementById('img1').src = "Image/two.jpg";
document.getElementById('td2').style.color = "Red";
document.getElementById('td2').style.backgroundColor = "#FF9999";
document.getElementById('td2').style.fontStyle = "Italic";
function Hide2() {
document.getElementById('td2').style.color = "Black";
document.getElementById('td2').style.backgroundColor = "#FFFFFF";
document.getElementById('td2').style.borderColor = "Black";
document.getElementById('td2').style.fontStyle = "";
function Show3() {
document.getElementById('img1').src = "Image/Three.png";
document.getElementById('td3').style.color = "Red";
document.getElementById('td3').style.backgroundColor = "#FF9999";
document.getElementById('td3').style.fontStyle = "Italic";
function Hide3() {
document.getElementById('td3').style.color = "Black";
document.getElementById('td3').style.backgroundColor = "#FFFFFF";
document.getElementById('td3').style.borderColor = "Black";
document.getElementById('td3').style.fontStyle = "";

Here we set the source of the Image:

document.getElementById('img1').src = "Image/Three.png";

And the style of the heading:

document.getElementById('td3').style.color = "Red";
document.getElementById('td3').style.backgroundColor = "#FF9999";
document.getElementById('td3').style.fontStyle = "Italic";


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: