Skip to main content

How to make correct rollover buttons with preload images


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.
Download Rollover Buttons Sample
Labels:

Comments

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயிற்சிகளை முயற்சித்து பார்கவும் கண்டிப்பாக பலன் கிடைக்கும் .
Post a Comment
Read more

38 (new) web tools to keep you busy

For many of us, the internet represents our daily job, income resource or biggest hobby. Every day we check our emails, read our feeds, visit our websites, find and discuss new things and GOD knows what else. It requires a lot of tools to do all this stuff and sometimes, we forget to search for easier solutions losing valuable time or keeping down the production graph. It's very hard to keep track with everything that's new and popular and this is why we do monthly searches for the best web tools out there. Enjoy!  45+ Web Operating Systems "There are many more web operating systems hoping to bring all your usual desktop applications online in one place - here are more than 45 of our favorites."  15 Ways To Create Website Screenshots "15 Ways To Create Website Screenshots"  Open Source Windows "The promise of open source software is best quality, flexibility and reliability. The only way to have TRUE "Open Source Windows"is
Post a Comment
Read more

40 Fresh & Beautiful Examples of Websites With Large Backgrounds

Using large sized pictures or illustrations as your website’s background adds a great visual appeal to your website’s design. Many web designers use large images as backgrounds as more and more users are now opting for high resolution monitors and high speed internet connections. Here’s a showcase of 40 Fresh and amazing websites that are using large background images. 1.  The Pixel Blog 2.  Copimaj Interactive 3.  Flourish Web Design 4.  Abduction Lamp 5.  Morphix Design Studio 6.  Final Phase 7.  Make Photoshop Faster 8.  WebSarga 9.  Suie Paparude 10.  Duirwaigh Studios 11.  BlackMoon Design 12.  Sepitra 13.  Le Blog de Gruny 14.  Piipe 15.  Mozi Design Studio 16.  Electric Current 17.  Lora Bay Golf 18.  Life Style Sports 19.  ligne triez 20.  Oliver Kavanagh 21.  World of Merix Studio 22.  Le Web Defi 23.  How host 24.  Productive Dreams 25.  Gary Birnie 26.  Glocal Ventures 27.  GDR UK 28.  Absolute Bica 29.  Le Nordik 30.  Leaf Tea Shop & Bar 31.  Paul Smith 32.  EwingCole
Post a Comment
Read more