Comments on: “I have a quick question about image rollovers in the navigation” http://dev.thekarchergroup.com/archives/22 Design, Markup, Usability, Accessibility Mon, 28 Dec 2009 18:11:44 -0500 http://wordpress.org/?v=2.8.4 hourly 1 By: Nate Klaiber http://dev.thekarchergroup.com/archives/22/comment-page-1#comment-1941 Nate Klaiber Mon, 30 Apr 2007 19:34:04 +0000 http://dev.thekarchergroup.com/archives/22#comment-1941 I tend to favor the navigation matrix versus separate images. I think it will always depend on the need (some matrices could get quite large). I don't think it is as much of an issue with filesize as it is request to the server. You can eliminate the multiple requests, and if you use one matrix you can eliminate the flash of content that you get with 2 images (mostly found in IE). This is due to the fact that it doesn't preload the images, so the over state is loaded on hover. With the matrix, the image has already been loaded - you are simply changing its position. I think it helps managing both your files and your CSS, as you don't have to have multiple instances of both on the fileserver or CSS file. Not to mention editing/working with other designers makes it easier as you are just editing one file and exporting one file Personally, I would use PNG versus GIF - but that is a personal preference (The support for IE is hindered when you want to use alpha transparency, but there are even fixes for that). I tend to favor the navigation matrix versus separate images. I think it will always depend on the need (some matrices could get quite large). I don’t think it is as much of an issue with filesize as it is request to the server. You can eliminate the multiple requests, and if you use one matrix you can eliminate the flash of content that you get with 2 images (mostly found in IE). This is due to the fact that it doesn’t preload the images, so the over state is loaded on hover. With the matrix, the image has already been loaded – you are simply changing its position.

I think it helps managing both your files and your CSS, as you don’t have to have multiple instances of both on the fileserver or CSS file. Not to mention editing/working with other designers makes it easier as you are just editing one file and exporting one file

Personally, I would use PNG versus GIF – but that is a personal preference (The support for IE is hindered when you want to use alpha transparency, but there are even fixes for that).

]]>