Увеличенная версия классического меню с изображением, сценарий добавляет распадающийся эффект в течение определенного времени. Сценарий работает во всех браузерах. Вы определили два изображения - одно всегда видимое, второе которое появится при наведении курсора мыши. Этот сценарий фактически довольно универсален в видах эффектов, которые он может воспроизвести. В то время как значение по умолчанию "распадается", еще 23 других перехода поддерживаются, все от "сильно ударяет в", " блок ", "постепенно появиться".

Шаг №1 - Скопируйте приведенный ниже код между тэгами < HEAD> и < HEAD>

< script type="text/javascript">

//Generate transition CSS (transition=0 to 23)
document.write('< STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }< /STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('< STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.6) }< /STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("home", "home_on.gif");
Rollover("script", "script_on.gif");
Rollover("design", "design_on.gif");

< /script>

Шаг №2 - Скопируйте приведенный ниже код где будет находиться меню.

< a onMouseOver="turnOn('home');" onMouseOut="turnOff('home');" href="http://www.designsib.com">
< img name="home" class="imgTrans" src="home_off.gif" border="0">< /a>< br>
< a onMouseOver="turnOn('script');" onMouseOut="turnOff('script');" href="http://www.designsib.com/sitemap.html">
< img name="script" class="imgTrans" src="script_off.gif" border="0">< /a>< br>
< a onMouseOver="turnOn('design');" onMouseOut="turnOff('design');" href="http://www.russany.com/studio/">
< img name="design" class="imgTrans" src="design_off.gif" border="0">< /a>