RSS

Image Rotator in Javascript

26 Jun

mage Rotator in Javascript

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

1. My 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 js function(show()) on 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.

2. My second Program:->

Here we sets the imge on the basis of the onmouseover event of the particular Table’s Text and sets the image and there 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 event.

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 sets the src 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 Id .Here we get the Id with the help of getElementById (The getElementById() method accesses the element with the specified id).

Advertisements
 
1 Comment

Posted by on June 26, 2010 in ASP Dot Net C#

 

One response to “Image Rotator in Javascript

  1. Robert

    September 11, 2013 at 9:33 am

    The Rotator Control for Windows Forms UI design is able to create interactive and user friendly rotation user interface style for rotating content.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: