Rollover Javascript

Cette technique utilise les techniques décrites dans DOM Scripting.

Il suffit d’ajouter une classe spécifique à une image (ici rollover) pour lui appliquer l’effet rollover en JavaScript. Évidemment il faut aussi avoir préparé une image pour le rollover, qui porte le même nom, mais avec le suffixe -over. Rien n'est prévu pour le moment si cette image n'existe pas, c'est clairement un problème, mais la solution devrait suivre.

Code HTML

<p><a href="/"><img src="/test/images/feed-icon-128x128.png" width="128" height="128" alt="" class="rollover"></a>
<img src="/test/images/logo-240.png" width="240" height="240" alt="" class="rollover"></p>

Code JavaScript/ECMAscript

<script type="text/javascript">
/*====================================================================
                                                          addLoadEvent
*/
function prepareRollovers()
{
	if(document.getElementsByTagName && document.getElementById)
	{
		var images = document.getElementsByTagName("img");
		for(var i=0; i < images.length; i++)
		{
			if(images[i].className.indexOf("rollover") > -1)
			{
				images[i].onmouseover = function()
				{
					var over_image = "/images/layout/videos-over.png";
					swapImageSrc(this, over_image, "over");
				}
				images[i].onmouseout = function()
				{
					var normal_image = "/images/layout/videos.png";
					swapImageSrc(this, normal_image, "out");
				}
			}
		}
	}
}


/*====================================================================
                                                          swapImageSrc
*/
function swapImageSrc(sna, src_image, whichEvent)
{
	if(whichEvent == "over")
	{
		var source = sna.getAttribute("src");
		var lastdot = source.lastIndexOf(".");
		var lastchar = source.length -1;
		var extension = source.substr(lastdot, lastchar);
		var name = source.substr(0, lastdot);
		var source = name + "-over" + extension;
		//alert(orig_lastdot + " / " + orig_lastchar + " / " + extension);
		sna.setAttribute("src", source);
	}
	else
	{
		var source = sna.getAttribute("src");
		var lastdot = source.lastIndexOf(".");
		var lastchar = source.length -1;
		var extension = source.substr(lastdot, lastchar);
		var name = source.substr(0, lastdot - 5);
		var source = name + extension;
		//alert(orig_lastdot + " / " + orig_lastchar + " / " + extension);
		sna.setAttribute("src", source);
	}
}


/*====================================================================
                                                          addLoadEvent
*/
function addLoadEvent(func)
{
	var oldonload = window.onload;
	if(typeof window.onload != 'function')
	{
		window.onload = func;
	}
	else
	{
		window.onload = function()
		{
			oldonload();
			func();
		}
	}
}


/*====================================================================
                                                    addLoadEvent Calls
*/
addLoadEvent(prepareRollovers);
</script>