So I spent an extra hour over the last few mornings (Thursday and Friday) as well as a half hour Friday night working on a small tweak to my current blog. I added a “splat” image whenever you move your mouse over an icon at the top of the page. I did this primarily as I kept losing my mouse when I’d use the icons and I wanted to more clearly distinguish where you were on the menu.

I also did it as I need to use similar code on a few other projects I’m working on, but this site was the most suitable for it to be implemented in first and it was one of those things I could leave and pick up fairly easily without a huge loss if I didn’t finish it all in one sitting.

As to the process I went through it was fairly simple once I figured out how to best do it. The splat image is obviously larger in height (and sometimes width) than the images in the banner. As a result I knew I couldn’t just make it a CSS hover effect on the menu links. I had to use a JavaScript library to get the effect to turn on and off as I wanted. I decided to only use MooTools for JavaScript on this site when I first researched JavaScript libraries 6+ months ago. In the end the code was fairly simple. I just had to create an array of the menu items, and another array for the splat image element (an empty span before each image is the route I went this time). When the mouse goes over the image the display property on the span is set to ‘inline’ and when the mouse leaves the image the display property is updated to ‘none’. It doesn’t get much more simple than that. Here’s the actual code I used in case it benefits anybody else:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEvent('domready',function(){
    var splats = $$('ul#icon-banner li span.splat');
    var bannerlinks = $$('ul#icon-banner li a');

    bannerlinks.each(function(bannerlink, i) {
      bannerlink.addEvent('mouseover', function() {
        splats[i].setStyle('display','inline');
      });

      bannerlink.addEvent('mouseout', function() {
        splats[i].setStyle('display','none');
      });
    });
});

Anyway, enjoy the new feature, feel free to provide any suggestions or feedback in the comments on this post :)

Comments