Patrick Hansen.com

Do designers need to know how to code?

(there are many fields of design and this post relates more towards interaction/UI/UX design)

This question seems to be getting a lot of exposure and traction in the pipes lately from blog posts, user groups, UX resources and I have already provided my 2 cents on some LinkedIn discussions regarding this. And I was surprised to see some of the responses, which I’m sure this blog post and my perspective will trigger some interesting comments as well.

It’s definitely an interesting question and can make you think quite a bit about an answer. Especially if you are a designer who has some coding experience, which I am. I’m not claiming to be great developer, but I have and still do get into development often, mostly on the front-end. With this experience, I think it has provided me some insights that I normally would not have if I were solely a designer and it has benefitted various other aspects of my design.

But in general, my answer to this question is “NO” …it is not a simple “No” however.

I will admit, that being able to get my feet wet with some development has helped me improve my design skills, but it has not been the driving factor behind my ability to design. I work alongside many talented designers who continuously achieve successful designs without any or very minimal development knowledge. This has not prohibited them from doing their job well. This has resonated throughout the design community for many years. I also work with a few designers who do have some development experience like Leonard Souza, Juan Sanchez and Jeremy Graston.

I will add to this though, a designer should have a solid understanding of what they are designing for in order to create something that will be successful. So, understanding the frameworks, platforms, devices, and technologies involved, will help the designer create a solution that will actually work well for the problem and the level of comprehension requirements vary. This does not require the designer to learn how to code though.

Let’s take a look at an example in a different industry like architecture. An architect does not need to know how to build the building, home or bridge that they are designing. But they do need to understand some engineering principles, materials, fabrication processes and the labor that would be involved in building their designs in order to create a successful concept.

Looking at another field of design such as graphic design and illustration, where the end result is typically the design printed on a product such as a t-shirt, poster, or packaging. The designer in this scenario can still create a very successful design without knowing how to actually perform the printing methods, be it off-set, digital process, type-set, screen printing, etc. But it does help if the designer does know how to layer and prepare the design properly for possible separation requirements, scalability, and any other implementation needs.

In music, a songwriter or composer does not need to know how to play the instruments such as drums, guitar, violin, etc, in order to create a good song. However, understanding music theory, beat structure, rhythm, and other aspects of a solid musical framework that a musician would typically understand will likely ensure that the result is “good.”

And yes, there are literally “one-man-bands” out there who are skilled in multiple disciplines from songwriting to playing an instrument or multiple instruments. And they are fully capable of making great songs single handedly. There is absolutely nothing wrong with that and if you have the skills, more power to you, but finding resources who are highly and efficiently skilled in multiple areas is far less common than someone who is specialized in one area. Also, an individual that does not have the skills in multiple areas or us NOT a one-man-band, can be just as successful writing a song and then having band/orchestra separate of themselves perform and record it.

I will emphasize again, that there is absolutely nothing wrong with a person being skilled in multiple disciplines in any industry, and in this case, I do not see any negatives about a designer knowing how to code, although some would argue that it may box the designer’s mind in too much by being aware of conventional boundaries in development.

It WILL help improve upon some facets of the design process and this is based on my personal experience from my days prior to having development experience through today where I have gained more knowledge in that area. A designer could gain some of this knowledge without knowing how to code though, but with some simple research.

I still have design questions regarding development in many situations, and if I cannot answer them myself, I go directly to someone who can, a developer. There is almost always a resource available to help provide answers from that perspective and by having this point of communication into development, a designer has the tools to produce great design.

What we also see here, is that there are a lot of instances where a TEAM is involved in order to produce a successful final result, and having multiple resources who are specialists in certain areas does help create a solid result. We also see that there are times when an individual who is skilled in multiple areas can also produce a successful result and may likely do it in a more efficient manner pending on the process and pieces involved. There’s nothing wrong with either approach.

The one concept that does remain constant in either scenario is that the resource or resources involved, all should share an understanding and knowledge of the system in which they are working within in order to produce a successful result.

There are also some other roles where a designer who knows how to code may be able to satisfy other than the full fledge traditional developer role, especially with the growth of more programmatic styling and design such as HTML5/CSS3, FXG, mobile, and areas where more dynamic design is required like responsive design.

The ability to be able to implement the visual design of a UI using programmatic techniques is making the design to develop process crossover even further. A designer who may have some experience in these areas does not necessarily need to handle complex code or need a computer science background, but the designer can help develop the front-end and help ensure that the final product is more aligned with the original vision leaving the “complex” development for the primary developer(s). This is even true with more traditional styling approaches using bitmap and older technologies.

Prototyping has always been an appropriate place for a hybrid to work within and a crucial phase in UI/UX design, be it interactive or static. But interactive prototyping definitely extends possibilities and requires that additional knowledge and effort of development in most cases and it helps when a designer can also help produce a prototype, since schedules and budgets are almost always a factor.

So, even though my answer is NO to this question, I do encourage designers to explore some development. It may open a new door to you and personally, I find it quite fulfilling to be able to make your own or even another’s designs come to life.

If a designer was required to know how to develop, would that person be a developer?

Do developers need to know how to design?

I frequently come across designs that use placeholders, as this is a common practice in the design industry. I think we’re all familiar with “lorem ipsum” and “John Doe.” Those work well in most cases for filler and/or placeholder content, but can wreak havoc in your design once it goes into actual production and all of a sudden you realize that the data providing your content is about 100 words vs. the 20 you designed for and the names contain a lot more characters than John Doe, which now disrupts your design and things aren’t looking so pretty anymore when the label or greeting is being pushed into the logo of the header, because “John Doe” is now “Keaweaheulu Smithsonian.”

note: this is a slightly exaggerated example

Now, that’s only about 15 characters more than the placeholder, but it could have a huge impact on the design if not thought out properly. It is a fundamental mistake that occurs often and sometimes isn’t discovered until further into the process and can cause a domino effect in your design.

This post isn’t just about long names or words, this philosophy should be applied to the whole design overall, from text handling to containers, lists, etc.

In the interactive realm, considerations for multiple screen sizes has been around for years, but it is more important now than ever with all of the devices popping up every other week. Making sure that your design fits the screen it is being displayed on is key, but making sure the content that is being displayed is usable and valuable is even more important; you can’t just truncate everything, that’s just a copout.

Any aspect of your design that will contain content, especially dynamic data that you may not have a lot of control over, needs to be considered in a “worse case scenario” presentation. It may not look pretty and when most designs are being created, it is preferred to have a nice and pretty best case scenario or the “happy path” view, especially if you are presenting to a client. I don’t disagree, but the design should consider those other scenarios be it edge case or not. And if it is so edge case that the probability is almost 0 that means it isn’t impossible, thus there still needs to be a rule and design to define what would happen under those circumstances, as it will go into development and code will have to instruct the UI on what to do and how to handle content.

You don’t have to show that worse case scenario design to the client if isn’t ideal or required, but at least you know that you have taken the time to plan and have a viable solution for it when and if it occurs. If you can make that scenario look good, then more power to you and your design has probably been well thought out to handle scalability without much impact to the integrity of the design.

In short, as much as placeholder data is easy to throw in and efficient, make sure your placeholder content mimics the real world data as much as possible and always throw in that wild card like the Hawaii state fish, Humuhumunukunukuapuaa, just to see how well your design will handle a scenario around that.

I just designed a new limited edition skateboard deck graphic for BC Surf & Sport and a new series to help raise funds for Japan Tsunami relief efforts.

The sun rays and the red cross are pretty obvious in what they signify. The bamboo was inspired by the the various meanings it has to Japanese culture, primarily strength, resiliency and regrowth. I can’t think of a better time than now where that holds true.

You can purchase the deck at BC Surf & Sport locations for about $35 and proceeds will go to Japan Relief efforts.

Go skate an help the world!

Thanks to Jake Pedroza (Snakes) and BC Surf & Sport for helping with this project.

I keep having the conversation with colleagues about PNG’s and the bit formats available, why Photoshop and Fireworks seem to offer different options, and which format is the best to use. Although I know some of the answers and reasons, I wanted to make sure to clarify and explain as much as possible, so I did a little further research and tests.

First off, what is a PNG?

wikipedia’s definition:
A PNG is a bitmapped image format and video codec that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.

Now that we have a general definition of a PNG, let’s try to understand the various types. (8, 24, 32, FW)

Here is a PNG-Type matrix I created to help clarify and demonstrate the visual differences.
The subject is a light blue to dark blue gradient rounded rectangle.
I used an annoying red for the background and/or matte color for some of the tests.

“Download the full-size PNG Type Matrix Here

Now, what type of PNG’s are there?
1) PNG- 8
The 8 stands for 8 bit. It can handle up to 256 colors, similar to GIF, and uses a lossless compression method. You will receive a low file size similar to GIF, approximately 10-30% smaller than other bitmap formats like JPG.

It will also support background index & alpha transparency and matte.

PNG-8 is good for small graphics, line-art, logos, but may not be suitable for complex graphics with gradients or photos. You can see in my matrix, that all of the PNG-8′s have banding across the gradient. You can see the banding on the PNG-8 images in the matrix.

With PNG-8 index transparency, you can see that you will get jagged aliased rounded edges, but if you choose a matte color, then the matte color becomes jagged and will blend in with your true background that you will apply this graphic to and it will appear smooth.

2) PNG-24
PNG 24 is similar to 8, but has support for 16 million colors and will preserve color variations such as gradients better and help prevent “banding.” It does use the same lossless compression as PNG-8, but you will obtain a larger file size due to the amount of information that will be retained vs. PNG-8.

PNG-24 is great for basic graphics, line-art, logos, etc., but you will have an unnecessary larger file size then needed. If you have more complex graphics or photos which require more detail retention, PNG-24 is a great choice.

PNG-24 provides support for background index transparency and matte.

Since PNG-24 supports index transparency, you usually apply a matte color of the color of the background you will apply this graphic on top of. This will provide the illusion of a smooth transparency along the curves or anti-aliased parts of your graphic.

In 24-B and 24-B2, you can see around the corners on the none matte images that they are aliased and jagged. Also, you will notice the black, these were exported on a transparent background, but I did not select a matte color, so it defaulted to black.

This also means that if yo have a graphic like an overlay with a percentage opacity of 50%, it will become fully opaque, since index can only handle a single level of transparency. You will have to use Alpha Transparency to achieve this.

The issue using PNG-24 with index transparency, is if you are planning on using your graphic like a rounded rectangle on top of a gradient or multi-colored backgrounds, you can’t really apply a single matte color to accomplish the effect appropriately in all cases. (backgrounds with a subtle gradient could be accomplished with minimal conflict if you pick the median color of your gradient).

That’s when you have to use Alpha Transparency, which will entail, turn your PNG-24 into a PNG-32. Or you could say it is a PNG-24 with Alpha Transparency based on traditional definitions.

3) PNG-32
Whoa – there’s a PNG-32?
If you use Photoshop and Illustrator primarily, you’re probably only familiar with PNG-8 an PNG-24. However, Fireworks provides an option for a PNG-32.
Why?
Well, Photoshop and Illustrator produce PNG-32′s if you choose full alpha transparency option on a PNG-24. It just doesn’t really inform the user that it is creating a PNG-32. Why? I don’t know.

PNG-32 is the highest quality most of the time, but that also means high file sizes. Use this format only when necessary for those complex graphics that have gradients, varying colors, rounded edges and transparency.

PNG-32 will support full Alpha Transparency. You can technically make a PNG-32 with no transparency visually, but it would be somewhat overkill, because it still contains alpha meta data and you can achieve practically the same quality with a PNG-24.

Alpha transparency vs. Index Transparency?
Well, index transparency provides a single index color and level to be transparent. It’s either on or off.
Alpha Transparency provides multiple levels of transparency which in turn, provides a much smoother blend along curves or anti-aliased edges. This also means you can have varying percentages of transparency for your graphic/image, like a graphic that may be used as an overlay and it has 50% opacity on the whole image.

You can see in the matrix, that 8-C2 and 32-C2 show the graphic as intended, with a 50% opacity. But most other formats, such as index, reverted it to 100% opacity.

4) Fireworks layered PNG
Yes, there is technically one more format. Adobe Fireworks, formally Macromedia, uses PNG as it’s file format, but it is a “layered” PNG which means that it could potentially be large in file size, because it retains all of the raw, layered information of the Fireworks file.

This is NOT what you would want to use for your production web graphics. So, if you have an unusually large PNG, that might be the reason why.

Please correct me if I am incorrect about any of this

note:
IE5 and IE6 do not support alpha transparency (PNG-8 alpha, PNG-32 alpha), it may convert it to single index, or it may not display at all. There are some PNG fix libraries to help handle this for those browsers.

Additional Resources
If you want to further optimize your web graphics, then try http://www.smushit.com/ysmush.it/

This tool will help you compress your PNG’s even further, and provide feedback of any images that could be compressed and what your file size savings are after the additional compression.

references:
I did use some references that other have posted to help provide these defintions – thanks.
deepbluesky.com
bkwld.com
iit.bloomu.edu
en.wikipedia.org

Web Designer Magazine 179 is on sale now!

A few co workers/friends of mine (Michael Salamon & Jason Bowers) along with myself are featured in the Hot 100 predictions for web trends we’ll see in 2011.

The magazine has a lot of great content in addition to the shameless plug I just mentioned:

- Main Features
Web Designer HOT 100 2011

- Rounding up the top talent, tech and trends for the year ahead
Pro File with Firstborn

- Exclusive agency tour with one of NYC’s finest creative teams
Design diary: We Love

- Chronicling the build of a brand new agency website
Whatever happened to Augmented Reality?

- Discussing the state and potential of one of web designs fallen trends

Also inside… (full list of features/reviews/previews)
- The future of web fonts – news and views
- Cool products rounded up in Webkit
- Awesome site designs showcased in the latest Lightbox
- 3D transforms with CSS and HTML
- Create content for the HTML5 canvas tag
- Create an animated navigation menu
- Multilingual WordPress blogs with qTranslate
- Build a Twitter app with jQuery Mobile
- Facebook page design with 520 Grid System
- Free CD resources

Bold WordPress Theme from Organic Themes worth £40
XML 3D Google Map worth £15 from FlashReseller.com
30 music loops and sound FX from Soundsnap worth £18
Ultrashock Breeze Effect widget for Flash/AS3
Soft Grunge Patterns Vol 2 from WeGraphics
9 eCommerce vector icons from Snap2Objects.com
AS3 Basics par 4 from Cartoon Smart worth £35
Dreamweaver CS4 Basics video from Killersites

For more info, visit:
http://www.webdesignermag.co.uk/blog/web-designer-179-on-sale/

If you’re in Denver today, or for the next few days, be sure to roll down to Lisa Kowalski Gallery on 27th & Walnut for the 2010 Denver ArtCrank poster show.

Here is a preview of my new poster for ArtCrank:

The Big Wheel ‘o Death!

Event Info:
September 4 – 11
Lisa Kowalski Gallery
2762 Walnut St., Denver, CO

For more info visit:
http://www.artcrankpostershow.com

http://www.artcrankpostershow.com/denver/

http://www.facebook.com/event.php?eid=143447882348886&ref=ts

ArtCrank is back again in Denver.

This is a poster art show for bike people, featuring works from a lot of local artists and designers. The array of work you will see will span a wide spectrum and you will definitely find at least one piece that will surely please your eyes.

*All posters will be limited of 30 for $30 each. Arrive early because posters will sell out fast!

Aaron Ray • Alan Peters • Aaron Cohrs • Allyson Byerly • Andrew Carr • Andrew Hoffman • Andrew Price • Andi & Alex Todaro • Anthony Cozzi • Aron Dubois • Austin Weyer • Blue Beanie • Brian Oliva • Broox Pulford • Bryan Cavanagh • Chase Courington • Chris Huth • Chris Nguyen • Cole Sletten • Cristian Whitney • Cypher13 • Danyel Latour • David Schell • Drew Dahlman • Firelily • Debbie Clapper • Jake Theno • James Gardiner • Jason Bowers • Jason Shiskowsky • Jason Wedekind • Jenn & Tom Goodrich • Jeremy Graston • Jeremy Pruitt • Jerimy Brown • Josh Shively • Kris Fry • Andrea Gomes • Kyle Warfield • Manu Budant • Markham Maes • Matt Scobey • Miles Fenn • Nicki & Stuart Alden • Oscar Woodruff • Patrick Hansen • Paula Cuevas • Rafa Jenn • Rob Mack • Sam Turner • Kerntheword • Sandra Fettingis • Scot Lefavor • Sean Klassen • Shane Harris • Stephen Beneski • Vanessa Wilde • Nigel Penhale

The Event:

September 4 – 11
Lisa Kowalski Gallery
2762 Walnut St., Denver, CO

for more details, visit:
http://www.artcrankpostershow.com

http://www.artcrankpostershow.com/denver/

http://www.facebook.com/event.php?eid=143447882348886&ref=ts

It’s been a minute since I participated in an art show, but I’m going to have a new piece in this upcoming event. I also have a lot of friends with pieces going in too, from paintings (AJ McCormick, Jon Strieby, Chad Everhardt, Ryan Parker) to photography (Amanda Baker, Bridget Mahoney)!

Ink Monster is putting on a HUGE Art & Music Festival, Power of Free. Saturday August 21, 2010, from 2pm – 4am at Casselman’s Bar & Venue (2620 Walnut Street Denver) and it’s all FREE!

This will be an incredible experience from your ears with some awesome music and crews, to the art that will please your eye balls! I’m sure you can get our taste senses stimulated with a lil’ something from the bar too.

This is going to be an awesome event featuring:

• ART from over 30 LOCAL ARTISTS, including Me, Patrick Hansen.
• Body Painting by Dread.
• Ohh La La Burlesque Dancers.
• Snowboard Mag Release!

Featured Artists:
Sara Ford, Tom Bond, Axel Geittmann, Patrick Hansen, Scot Lefavor, Emily Ayers, Joe Triscari, Amanda Baker, Mike Graves, Ryan Parker, Matt Scobey, Mike Ortiz, Bridget Mahoney, Chad Everhart, David Jones, Atsu Saisho, Andrew Hoffman, Whittney Wells, Angel Lujan, Seth Lockard, Mike Hubert, Jared King, Jon-Paul Belongea, Sandra Fettingis, Pat Milbery, Andrew Heard, Jonathan Lamb, Jon Strieby, AJ McCormick, Henry Daniel Bell, Sarah Adams, Jimmy, Kelly Monico, Pedro Barrios, Libby Wann, Patrick Duffy….and many more.

A huge music line up featuring:

• BUS DRIVER
• WHYGEE
• BUKUE ONE
• The pirate Signal
• The Dendrites
• 200 Million Years
• Astra Moveo
• The Get Down Science
• Pillow Fight
• Mike Deez
• Stretch
• Musa
• Danial
• Chris Specht

sponsored by:

• Ink Monster
• Universal Herbs
• SnowBoard Mag
• Pabst Blue Ribbon
• Smith Optics
• Zumiez
• Spacecraft
• Lib Tech
• The Produce
• So Gnar
• and more

@:
Casselman’s Bar & Venue
Saturday – August 21, 2010
2pm – 4am at
2620 Walnut Street Denver
FREE!

Ink Monster

Now, I love Fireworks for UI design. Some people are shocked when I mentioned that I, and most of our team, use FW. Some thought it was extinct after the Adobe / Macromedia acquisition, but it’s still alive and kicking and I highly recommend evaluating it if you do UI design. It a very powerful tool for web and software design, with a lot of features catered to the work flow, including pages, states (frames), shared layers, symbols and rich symbols and many more. However, this is not why I’m writing this post unfortunately.

As with any design tool, there will be some pros and cons, bugs and inefficiencies, FW is not immune to any of these.

One major annoying bug is the pixel snapping issue. If you have worked with FW CS3 or CS4, you are probably well aware of this painful issue and will be unhappy to know that it is still happening in CS5.

The problem is that FW will at times, make an object not snap on a whole pixel and it will appear blurry. This usually occurs when you move an object, sometimes when you close and reopen a document, and frequently when creating symbols. Another frustrating aspect is that the values of x,y position inputs display whole numbers and make you think everything is correct, like 300, 400, when in actuality, it is at 300.5, 399.5 or something like that. A quick fix is to focus on the x,y input sand simply press “enter” on those values, but that’s not very efficient and more so, you shouldn’t have to do that, especially with a pricey app like FW.

I just installed CS5 and I wanted to see if that problem has been corrected, and within a few minutes, I was surprised to see that it is NOT corrected. I was able to recreate it easily by creating a symbol and simply moving and scaling the object. Another interesting thing is that it appears differently when viewing the symbol on stage vs. digging into the symbol and viewing it inside. Very strange and frustrating, and I wish Adobe would address this issue.

I have looked in the preferences to see if there was anyway to turn on “pixel snapping” or if there was any other parameter that might fix this, but had no luck.

Here is a screenshot of the object and the issue involved.

Don’t get me wrong, this issue does suck, but it is not enough to drive me away from using Fireworks. I constantly work with various other formats such as Photoshop and Illustrator, and those tools have their issues too. Especially designing for interfaces, since those tools were not intended for that purpose originally. This is a whole other post though, so I’m out.

*Update: June 01, 2010:
There was a great comment (Michel) with mention to “Snap to Pixel” feature which is under Modify>Snap to Pixel or command+k (mac), control+k (Windows). This is great for working with “raw” shapes on the stage, but once you start working with symbols, this feature is not available and does not resolve the issue. Michel also wrote a great review about FW CS5 on Smashing Magazine.

Here is a quick video screencast of the issue.

1. I have a symbol on stage and appears shifted and blurry and Snap to Pixel is not available.
2. I double click the symbol to go inside, you will notice it appears to shift as I go inside. I select the green square, and I can Snap to Pixel.
3. Once I exit the symbol and go back to the canvas, the symbol shifts again and becomes blurry.

I’ve been playing around with javascript and JQuery lately and was working with some image-based buttons. This is nothing new and there are hundreds of solutions out there for this approach including the popular CSS direction. I did find some javascript solutions, but I couldn’t find any examples that were scalable and/or didn’t require several dependencies or explicit references like requiring ID’s or exact image file names and paths, which can be a hassle if you are dealing with multiple image-based buttons on a page or site.

So for whatever reason you may need a JQuery controlled image-based button, here you go.

note:
My example here is just providing a JQuery approach for image-based buttons. This can also be done quite easily using only CSS and altering the background image for the state. You would have to create a selector for each button and provide explicit height/width attributes for each button in the CSS. I would recommend using the CSS approach over the JQuery one, as it is more scalable if you decide to change the appearance of your buttons, you only have to alter the CSS and don’t need to mess with the markup.

Back to the JQuery Image-based button example:
There were several reason why I wanted to make this as generic as possible:

• Versatile Usage: Need to re-use this script across a site, different pages, even in PHP include files, and these files/pages may reside in various directories which would alter any explicitly declared image paths in the script.
• Image Type: Uncertain what type of image the buttons may be comprised of across the site: gif, jpg, png, etc.
• Number of buttons: May have several button instances and types throughout the site.
• No CSS Buttons: For some reason, the site is not using CSS based buttons

This script addresses all of those concerns with only 3 minimal requirements:

1. The obvious, must have current JQuery lib file linked to your page, and this script either in the page or in external linked js file.
   Download JQuery Here
2. Must assign the class the script references to the anchor tag for your button.
   (example: <a class=”js_uniButton” …></a> ).
3. The up and over images MUST have the same file name and be the same file type, but the over image must be appended with “_hover“. (example: MyImage.gif and MyImage_hover.gif)

I’m a novice using JQuery with only a couple months experience, so if there is a better way, then feel free to let me know. A friend of mine helped me write the image URL caching function, which ensures the image URL only gets called once.

Below is an example of the script with detailed comments and extra line breaks for easier readability.

Click here to VIEW the demo

Click here to DOWNLOAD the demo

note:
This needs to be within a doc ready function either in the page or in external js file:
$(document).ready(function()
// insert script here
});

//*************** JQeury Universal Image Button ***************
function getHoverPath (imgPath) {
//split imgPath after each '/' and create array to path directories and file name
var srcPathArray = imgPath.split('/');
//find image file name get length of srcPathArray and retrieve last item which is the image file ex: "images/buttons/IMG.gif"
var imgFile = srcPathArray[srcPathArray.length-1];
//image file name array split at "." to get:[fileName, ext]
var imgArray = imgFile.split('.');
//img name (first item in imgArray)
var imgName = imgArray[0];
//image ext (second item in imgArray)
var imgExt = imgArray[1];
//image src path
var srcPath = imgPath.split(imgFile , 1);
// concatenate path and add "_hover" to image file name
return srcPath + imgName+'_hover.'+ imgExt;
};
// get hover button array
var hoveredButtons = new Array();
 
$('.js_uniButton').mouseover (function() {
$this = $(this);
//get image path of this instance
var imgPath = $this.children('img').attr('src');
//cache img path url on initial mouseover
if (typeof(hoveredButtons[ imgPath ]) == 'undefined') {
hoveredButtons[ imgPath ] = getHoverPath( imgPath );
//console.log('cache image path ' + imgPath + ' and hover path ' + hoveredButtons[ imgPath ]);
 }
$this.children('img').attr('src' , hoveredButtons[ imgPath ]);
 
//mouseout actions
$this.mouseout(function() {
//define this handler
var $this = $(this), handler = arguments.callee;
 
//unbind mouseout handler
$this.unbind('mouseout', handler);
 
// on mouseout, swap current image with original image path
$this.children('img').attr('src' , imgPath);
});
});