Image Rotator in JavaScript

ASP.NET Community

Rate me:

2.25/5 (3 votes)

20 Oct 2013CPOL1 min read

20.6K

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.

JavaScript

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

JavaScript

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

HTML

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

JavaScript

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

This article was originally posted at http://wiki.asp.net/page.aspx/1278/image-rotator-in-javascript

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

ASP.NET Community

United States

The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, ~~googling~~live-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.

This is a Collaborative Group

754 members

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Image Rotator in JavaScript

Introduction

First Program

Step 1

Step 2

Second Program

Step 1

Step 2

License

Comments and Discussions