Ръководство: Как да създадем Rollover бутони

[Sonik_Blast]

Как да създадем rollover бутони

Rollover (Mouseover) е един от най-лесните начини и същевременно един от най-популярните начини за създаване на rollover бутони за уеб. Същевременно обаче 90% от създадените такива менюта са направени неправилно... При повечето случай когато отидете в/у някой бутон се получава малък лаг, които не е никак приятен и точно в това е цялата грешка!
Ето и пример как да направим правилно този скрипт, така, че да работи перфектно:

Това се слага м/у таговете head и /head (може и с инклуд както желаете):

<script>
<!--
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>

А сега простия html код:

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

Този код може да го сложите където си искате, НО да е преди самите бутони:

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

Aвтор Sonik_Blast, webleit.info
Може да го изтеглите от тук