World Web Designer !: 12/01/2010

Thursday, December 2, 2010

Correct Javascript Rollover Buttons

TAGS: TUTORIAL TO MAKE SIMPLE JAVASCRIPT ROLLOVER BUTTONS , TUTORIAL TO LEARN CREATE YOUR OWN JAVASCRIPT ROLLOVER BUTTONS , LEARN TO MAKE ONMOUSEOVER CHANGE IMAGE , TUTORIALS , TUTORIAL , LEARN , JAVASCRIPT WEB BUTTON ,

Rollover (Mouseover) is one of the most simplest and at the same time the most popular script on web-pages. Nevertheless in 90% of the cases this simple script is made incorrectly. The fact!
We first need to understand how this script should work. At first sight it looks quite elementary: Whenever the user moves the mouse pointer over the button, the button changes own state (one picture is replaced with another).
It should appear immediately but often it does not show. Why? The fact is that the second(active) picture downloads only WHEN user moves the mouse pointer over the button. Even if the user have hi-speed Internet connection - it will take away some time for that. The more the size of the picture - the more delay.

Sample of incorrect rollover button

When you move the mouse pointer over the button for the first time you may see a small lag:

Preload image

You need to use this script for load images as soon as possible. Insert this code between your <head></head> tags. Edit this script (see the comments).

<script type="text/javascript">
<!--
if(document.images)
{
  var image_array = new Array();
 
  // path to the directory with images
  var path = '/img/';

  // enumeration of the "active" images
  image_array[0] = path + "button1_red.gif";
  image_array[1] = path + "button2_red.gif";
  image_array[2] = path + "button3_red.gif";

  var preload_image = new Array ();
 
  for(var i=0; i<image_array.length; i++)
  {
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
  }
}
//-->
</script>

After the images were loaded - we use usual rollover buttons html code.

HTML code

<a href="#" onmouseover="rollover('button1','button1_red.gif')" onmouseout="rollover('button1','button1_blue.gif')">

<img src="/img/button1_blue.gif" name="button1" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button2','button2_red.gif')" onmouseout="rollover('button2','button2_blue.gif')">
<img src="/img/button2_blue.gif" name="button2" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button3','button3_red.gif')" onmouseout="rollover('button3','button3_blue.gif')">
<img src="/img/button3_blue.gif" name="button3" width="109" height="25" border="0"></a>

The onmouseover and onmouseout event handlers is used to execute specified Javascript code whenever the user moves the mouse over an button or move out from button.

Rollover function

Insert this code into any place of yours html, but BEFORE a html-code of buttons:

<script type="text/javascript">
<!--
function rollover(name, filename)
{
  var fullpath = '/img/' + filename;
  document.images[name].src = fullpath;
}
//-->
</script>

Correct sample

Note: Set fullpath variable to ="" if the images placed in the same directory as the html-file.

Wednesday, December 1, 2010

Tutorial of Javascript simple Text and Image Slide Show

tags: Tutorial of Javascript , Learn to make slide show in javascript , basic tutorial of javascript text and image slide show , javascript basic image picture slide show make your own learn tutorials ,

Text Slide Show

In this tutorial I'll show you how to create a text slideshow in javascript
This script will rotate display a different message after a certain amount of time, in an infinite loop.
I included only 6 quotations but you can add as many as you want just adding a line where the array elemetns are declared.

<SCRIPT type="text/javascript">
var quotations = new Array()
quotations[0]= "I have not failed. I've just found 10,000 ways that won't work.<br/><b>Thomas Alva Edison</b>"
quotations[1]= "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier.<br/><b>Bill Gates</b>"
quotations[2]= "Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done.<br/><b>Andy Rooney</b>"
quotations[3]= "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.<br/><b>Albert Einstein</b>"
quotations[4]= "Whether you think that you can, or that you can't, you are usually right.</br><b>Henry Ford</b>"
quotations[5]= "I'm going to be a great movie star some day.<br/><b>Marilyn Monroe</b>"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}
</SCRIPT>

The array that contains the quotations is named "quotations".
The display function generates a random number between 0 and the length of the array quotations and stores it into the variable "a"
Not that the div in which we call the display() function has an id, "quotation".
With the document.getElementByID method we select the element named "quotation" and modify the internal HTML with the innerHTML=quotations[a], so the selected quotation is stored in the variable "a".
The setTimeout function sets the script to run itself each time after 5 seconds (the time is expressed in milliseconds, 5000)
Put the part between <SCRIPT> and </SCRIPT> before </HEAD>.

<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>

In the div we call the display() function because it needs to be called once to start the loop.
Note that the quotations contain some HTML code, this open wide possibilities on what you can do altering the internal HTML.
You could add an element of this kind to the array and have a banner displayed (change the path to the image, this one won't work)

quotations[6]= "<a href="http://www.google.com"><img src="http://www.example.com/banner.gif" border="0"></a>"