First I wrote a re-usable function/plugin in jQuery:

$.fn.mouseOverImageSwitch = function(default_image, mouse_over_image) {
$(this).livequery('mouseout', function (){
$(this).attr('src',default_image);
});
$(this).livequery('mouseover', function (){
$(this).attr('src',mouse_over_image);
});
};

This function would allow me to call image-switching on mouse-over event on any element. Now we need to hook this call to an img element so we can switch images when the user brings mouse over a voting icon. Assuming, I had following elements with img elements with class attributes like “thumbs_up” and “thumbs_down”:

<a href="#"><img class="thumbs_up" src="/images/thumbs_up_grey.png"></a>
<a href="#"><img class="thumbs_down" src="/images/thumbs_down_grey.png"></a>

I did following to hook the call up.

<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('.thumbs_up').mouseOverImageSwitch('/images/thumbs_up_grey.png','/images/thumbs_up_colored.png');
$('.thumbs_down').mouseOverImageSwitch('/images/thumbs_down_grey.png','/images/thumbs_down_colored.png');
});
</script>

In the original plugin function, I used livequery which allows me to bind mouse-over hook to elements that were added using ajax. I can image that too many such hooks would degrade performance. I will wait to see how this works before performing performance optimizations …

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.