When using image replacement techniques on hover, many times there will be a flicker in between state changes. I’ve found a couple workaround for this. One is to use Javascript to preload the images. Another is to fake it by adding the hover image behind the normal state image and setting it’s visibility property to hidden using CSS. This way it loads the image into memory, but doesn’t display it. Or you can use a combination of the two techniques. For instance, create a Javascript function that uses styling to load the image and set it as the element background, then call the function on page load. Here’s an example:
Add the following Javascript function at the top of an HTML file.
<script type=”text/javascript”>
function preloadImages()
{
document.getElementById(‘elementID’).style.backgroundImage = ‘url(images/image-hover.png)’;
}
</script>
Call the function in the body tag of the HTML file using the onload event.
<body onload=”preloadImages();”>
I’ve spent the last couple weeks working on a project for a local design company and was amazed at how smoothly things were going at first…of course I should have known at that point it was just the calm before the storm. The project was to simply create a homepage and sub-page template based on a Photoshop design.
So, they sent me the PSD files and when I started thinking about how to create the website, there were a few things about the design that made me really want to shy away from a table based layout and just go with CSS….or a combination of the two. Then I started actually slicing up the images and putting the layout together. As smooth and as quickly as things were going at that point, I thought well … hey… let’s just go pure CSS because that’s the “new skool” way of doing things and it would be a great learning experience. Plus I really wanted to impress the client. Mine and theirs 
As it turned out, what was supposed to be a 10 hour max project turned into a “good lawd, am I ever gonna get this done” type project. It was mostly because I had to spend a lot of time researching and learning things that now that I already know them… it wouldn’t take nearly as much time to complete the project.
This was my first pure CSS layout though, and the main reason I wanted to use CSS vs. table based was because of the use of transparent images and overlapping visual components. So, in that sense I still feel like it was a good idea but now I’m starting to wonder if in some cases it’s just quicker and easier to go with more table based layouts rather than pushing the limits with technology. This is of course all a part of the learning experience that goes into working with new technologies but at the same time, there has to be a happy medium which would obviously require some compromise.
What took the most time and caused the most headache was getting the layout to display properly across all/most popular browsers. IE6 is the worst by far! There are some definite improvements in the standards compatibility with IE7 but it’s simply amazing how you can complete a layout, view it in Firefox and have it look exactly like the design…then open it up in any other browser and it looks completely wack!!! I do believe that is the technical term!
So basically, what I had to do was create a separate CSS file for each major browser then use Javascript to detect the user’s browser and select the proper CSS file. But that means, every time I have to make a change to the layout, I have to update every single CSS file….and it seems like every single little change throws something else off and I have to spend so much time tweaking the files to get them all to look just right. I can’t afford to spend that much time on what was supposed to be a fairly simple project.
It’s just that there has to be a better way. I know there are many ways to workaround the whole browser issue but this way seemed to be the most popular and efficient. I don’t know… I’m just going to have to do more research. If anyone has any other better ideas…please fill me in!
