Brillar Resurrected and perfected.

Posted by Dustin on November 6, 2008 under Javascript, Web Development | Be the First to Comment

Remember long ago when Sid, and Remo and I (and Bryce but he probably doesn’t remember this cuz he is in infernal apps) started and there was this javascript function called Brillar? Well nobody seemed to understand the brillar function but we had to use it over and over again for image swapping, and I was just getting to the point that I almost knew how to use it without cheating. But then Phil killed it with jQuery and we have all partied since.

WELL THE PARTY IS OVER! Recently I’ve needed to do a rollover effect on some Input images and wasn’t sure exactly how to do it with jQuery, come to think of it I am not sure how to do much with jQuery, so I turned back the clock and resurrected the Brillar function. only now it’s hotter, better, more dynamic smaller and yes hotter. In fact it’s so hot Phil and I renamed it to “BrillarCaliente“.

Now instead of passing Two or three (can’t remember for sure but it was a lot) parameters in your onmouseover/onmouseout calls, you only need to pass one.

onmouseover="javascript:BrillarCaliente(this);" onmouseout="javascript:BrillarCaliente(this);"

The rest is in the Javascript function, thus making it easier to change what images/path’s are to be used.

<script type="text/javascript">
function BrillarCaliente(image){
	var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />';
	var id = image.id;
	var source = document.getElementById(id).src;
	if(source == hostpath+'sml-addcart.gif'){
		document.getElementById(id).src = hostpath+'sml-addcart-on.gif';
	} else {
		document.getElementById(id).src = hostpath+'sml-addcart.gif';
	}
}
</script>

Ok so maybe it’s not perfect but it’s whole lot better than it was. The only thing I don’t love is that I had to set up the “id” var in order to set up the “source” var, if there is a way around it I’d love to know.

Now for those of you who are reformists and love jQuery, I’m quite confident that this is doable in jQ with about 3 lines of code. Either way is better than what we used to do.

Alternativley if you wanted to make this more dynamic you could do the following:

onmouseover="javascript:BrillarCaliente(this, 'newimage.jpg');" onmouseout="javascript:BrillarCaliente(this, 'oldimage.jpg');"

<script type="text/javascript">
function BrillarCaliente(image, swapImage){
	var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />';
	var id = image.id;
	var source = document.getElementById(id).src;
	if(source == hostpath+'sml-addcart.gif'){
		document.getElementById(id).src = hostpath+swapImage;
	} else {
		document.getElementById(id).src = hostpath+swapImage;
	}
}
</script>

note the extra param passed through to the function, I haven’t actually tested it but it should work.