(untagged)

Image Rotator in JavaScript

ASP.NET Community

0.00/5 (No votes)

20 Oct 2013

Two simple examples to create an Image rotator in JavaScript

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Introduction

There are many ways to create Image Rotator in JavaScript. Here, I write two simple examples to create an Image rotator in JavaScript.

First Program

Step 1

First, we create an image (img1) with the help of <img> tag and place it in the <body> tag.

<body onload="show()">
  <img id="img1" width="120px" />
</body>

Note: Here we call a JavaScript function show() in the onload event.

Step 2

Create a JavaScript function show() in the <head> tag.

<script language="'javascript'">
function show()
{
    document.getElementById('img1').src="Water lilies.jpg";
    setTimeout("show2()",1000);
}

function show2()
{
    document.getElementById('img1').src="Winter.jpg";
    setTimeout("show3()",1000);
}

function show3()
{
    document.getElementById('img1').src="Sunset.jpg";
    setTimeout("show4()",1000);
}

function show4()
{
    document.getElementById('img1').src="Blue hills.jpg";
    setTimeout("show()",1000);
}
</script>

Here we get the Id of the image (img1) with the help of getElementById (The getElementById() method accesses the element with the specified id) and sets the source (src) of the img1. Here, we create many functions and call it with the help of setTimeout method of JavaScript.

Second Program

Here, we set the image on the basis of the onmouseover event of the particular table's text and set the image and its description on the basis of it.

Step 1

First, we create a table in the <body> tag and sets an image (img1) and multiple <p> tags in the table rows.

<table style="border:1px solid Black">
  <tr>
    <td>
      <table>
          <tr>
            <td>
              <img id="img1" src="Sunset.jpg"  width="120px" />
            </td>
          </tr>
        <tr>
          <td>
            <p id="pmain"> </p>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table style="width:140px">
        <tr>
          <td id="td1" align="center" style="border:1px solid Black" 
          onmouseover="show1()" onmouseout="hide1()">
            <p id="p1">Image1</p>
          </td>
        </tr>
        <tr>
          <td id="td2"  align="center"  style="border:1px solid Black" 
          onmouseover="show2()" onmouseout="hide2()">
            <p id="p2">Image2</p>
          </td>
        </tr>
        <tr>
          <td id="td3"  align="center"  style="border:1px solid Black" 
          onmouseover="show3()" onmouseout="hide3()">
            <p id="p3">Image3</p>
          </td>
        </tr>
        <tr>
          <td id="td4"  align="center"  style="border:1px solid Black" 
          onmouseover="show4()" onmouseout="hide4()">
            <p id="p4">Image4</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Here, we set the style and call functions on the onmouseover and onmouseout events.

Step 2

Create JavaScript functions in the <head> tag.

<script language="'javascript'">
function show1()
{
    document.getElementById('img1').src="Winter.jpg";
    document.getElementById("p1").style.fontStyle="italic";
    document.getElementById("td1").style.background="Red";
    document.getElementById("pmain").innerHTML="Image1";
}

function hide1()
{
    document.getElementById("p1").style.fontStyle="normal";
    document.getElementById("td1").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show2()
{
    document.getElementById('img1').src="Sunset.jpg";
    document.getElementById("p2").style.fontStyle="italic";
    document.getElementById("td2").style.background="Red";
    document.getElementById("pmain").innerHTML="Image2";
}

function hide2()
{
    document.getElementById("p2").style.fontStyle="normal";
    document.getElementById("td2").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show3()
{
    document.getElementById('img1').src="Water lilies.jpg";
    document.getElementById("p3").style.fontStyle="italic";
    document.getElementById("td3").style.background="Red";
    document.getElementById("pmain").innerHTML="Image3";
}

function hide3()
{
    document.getElementById("p3").style.fontStyle="normal";
    document.getElementById("td3").style.background="White";
    document.getElementById("pmain").innerHTML="";
}

function show4()
{
    document.getElementById('img1').src="Blue hills.jpg";
    document.getElementById("p4").style.fontStyle="italic";
    document.getElementById("td4").style.background="Red";
    document.getElementById("pmain").innerHTML="Image4";
}

function hide4()
{
    document.getElementById("p4").style.fontStyle="normal";
    document.getElementById("td4").style.background="White";
    document.getElementById("pmain").innerHTML="";
}
</script>

Here, we set the source property of image (img1) with the help of id and sets the style of <td> and <p> tags and the innerHTML property of <p> tag on the basic of the id.

Here, we get the id with the help of getElementById. The getElementById() method accesses the element with the specified id.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here