PDA

View Full Version : Image cache for preventing hover image delay.


johnMoss
02-22-2011, 02:22 PM
Researching another recent thread, there are several ways to handle the issue of secondary image delay. My question is which, if any, is preferable to another, i.e. Go javascript or CSS transparency? Though one might preclude javascript for speed & space, what about users who have heightened browser security? Is that still a consideration to be dealt with or has W3 perhaps set some standard to circumvent pop-up blocking for critical function content? (I just invented that, I think:) )

gentleone
02-22-2011, 03:07 PM
Do you mean with 'hover image delay' if you use the DW build-in roll-over javascript behavior?

johnMoss
02-22-2011, 03:30 PM
I haven't gotten that far along yet in the manual, so haven't even looked at that yet. I was browsing the net. Still though, even with that tool, what is the likelihood, if any, of a high security browser preventing the JS from executing?

gentleone
02-22-2011, 04:03 PM
Still though, even with that tool, what is the likelihood, if any, of a high security browser preventing the JS from executing?
If you use javascript for whatever reason, you must be sure that if users with javascript disabled in their browser still can navigate the site or read the content. The site has to be still accessible for them, so always create fallback solutions.

gentleone
02-22-2011, 04:07 PM
oh... and about that roll-over image DW behavior I was referring to you'll have a delay on hover. It's by the way an ancient way of doing it, you should now use CSS.

DWcourse
02-22-2011, 05:03 PM
The DW image swap behavior also has an option to preload the second image so that it's available for the hover. It's attached as an onload event to the body tag.

However using CSS background images with the position changing on hover is a much more elegant solution.

This video might be helpful: http://www.dwcourse.com/css-image-rollovers

domedia
02-22-2011, 05:09 PM
John, you just want to change an image when the mouse goes over it. Correct?

johnMoss
02-22-2011, 05:32 PM
John, you just want to change an image when the mouse goes over it. Correct?

Yes. I've got that just fine, but of course if improperly coded means the first instance (uncached) is going to have that milliseconds delay. I do have the secondary image as a CSS hover, so just needs to be more professionally addressed. The site in question is an intentionally simplified design and is days from first draft completion. I'll post it soon, if not tonight, and come back with a second reply here.
The DW image swap behavior
[quote]This video might be helpful: http://www.dwcourse.com/css-image-rollovers (http://www.dwcourse.com/css-image-rollovers)
[quote]

I stopped about halfway though the manual to dive deeper into CSS, and will continue the DW manual after that. Obviously the functionality is there and I need to get to that point where I can pose these questions in a more intelligent manner. JC thank you (!) for the video, I'll dive into that tonight, which will be a great precursor to relative written materials. Thanks a bunch guys:grin:

domedia
02-22-2011, 06:52 PM
It should be preloaded and instant, doesn't matter if you do it with JS or CSS.

It's really simple actually. Where are you stuck?

johnMoss
02-22-2011, 08:47 PM
Not so much stuck, just haven't done my due diligence yet. Here's the link:
http://www.californiareversemortgageguide.org/

"Click to receive guide button"

Do please disregard the messy css, I took over a template site & haven't prioritzed cleaning it up.:oops:

johnMoss
02-22-2011, 08:49 PM
Ya know also I kept thinking I had one more clean-up on that site I mentioned further above. No problems with buttons on that one, so actually my bad here; I'm mixing questions on two different sites. The hyperlinked site posted above is the one with the button error...

gentleone
02-22-2011, 09:18 PM
that flickering is because you use two separate images for that button.. one for the regular and one for the hover, so it will load the image for the hover state once you mouse over the button... and this take time.
The solution is to use one image for both states and position the image with the background-image property. This method is what they call the CSS sprites technique.

http://webhole.net/2010/03/16/css-button-sprites-tutorial/

johnMoss
02-23-2011, 04:16 AM
I will go back in and do just that... Disclaimer: My client is disinterested in matching out the theme of the site, notice the lack of a topside menu. The objective is to get people to fill out the form. Clicking on the lower menu will take you to a redo I did on the original site. The "Reverse Mortgage Basics" button on the left is a -176px sprite. I'll fix one up for that button...

domedia
02-23-2011, 01:19 PM
that flickering is because you use two separate images for that button.. one for the regular and one for the hover, so it will load the image for the hover state once you mouse over the button... and this take time.
The solution is to use one image for both states and position the image with the background-image property. This method is what they call the CSS sprites technique.

http://webhole.net/2010/03/16/css-button-sprites-tutorial/

The issue is only preloading the image. This was done years before CSS sprites were invented. I think even DW 2 automatically made sure the mouseover image was preloaded.

johnMoss
02-23-2011, 02:03 PM
The issue is only preloading the image. This was done years before CSS sprites were invented. I think even DW 2 automatically made sure the mouseover image was preloaded.

Here comes a lack of due diligence question again, but if I may take advantage of you bringing it up, what or where is the sequence upon which DW provides this functionality, I haven't seen it yet..

gentleone
02-23-2011, 04:55 PM
The issue is only preloading the image.
Yes, that's indeed the issue in the first place... I should have mentioned that.

Here comes a lack of due diligence question again, but if I may take advantage of you bringing it up, what or where is the sequence upon which DW provides this functionality, I haven't seen it yet..
Insert > Image Objects > Rollover Image

But like I said this DW functionality is ancient and was handy back in time when IE5 and Netscape 4 didn't support the CSS2 :hover pseudo class.

domedia
02-24-2011, 02:40 PM
Remember too that a background image and an image are two different things semantically. One is the pretty stuff (the design) the other one is content.

The best test for this is to disable CSS in your browser and see if you get the images you need, and nothing more.

johnMoss
02-25-2011, 02:30 AM
Remember too that a background image and an image are two different things semantically.
Granted... In this particular case they are running major google ad campaigns and hence SEO is pretty much out the window. It's more about me presenting a lesser professional standard that need be addressed and improved... Newbie-itus....

johnMoss
02-25-2011, 03:30 AM
The best test for this is to disable CSS in your browser and see if you get the images you need, and nothing more.


My first answer is… long toke… Hwhattt?
…..
I gotta stop for a sec and profess what a pleasure it is to have chanced upon this outfit... The cavalier manner in which such a profundity of professional expertise is espoused is a privilege to be a part of; and I thank you also for tolerating my attempts and input on investigating new gripes as they arise... An educational opportunity and format such as does not exist elsewhere.

Now, (gratuitous patronization out of the way), this check you refer to smacks of a systems’ check. I searched it but didn’t learn much. Clearing CSS… That's the first I've heard of that. Purpose beyond troubleshooting, i.e. part of your regimen in site proofing, et al? Just curious...

gentleone
02-25-2011, 06:40 AM
It's part of accessibility testing and it's easy to disable CSS or JS with a web developer toolbar. I've read in another thread of yours that you we're playing with the one of Safari, it says 'disable styles' and 'disable javascript' in the develop tab. Once disabled, hit refresh... and you will see if the page structure makes sense to screen readers and search engines, and for the javascript thing if the page is still functional without javascript.

johnMoss
02-25-2011, 01:45 PM
Is there a definition standard to 'makes sense' or is simple readability and site navigation a pass or fail test? I'm coming for example to understand the implications of the use of headers and get the impression one has to be judicious in the layout of these tags, among other things... Structurally speaking, is there an optimum tag guideline to enhance accessability?

domedia
02-25-2011, 02:28 PM
Structurally speaking, is there an optimum tag guideline to enhance accessability?
Yes, the HTML protocol is the optimal standard, and is available on the W3C website. http://www.w3c.org