Mouseover Question on iPads and iPhone

User 2093747 Photo


Registered User
69 posts

It seems when I use menu mouseovers on my websites, iPads and iPhones flash a quick blue question mark box (like a broken image) on the bottons. The menus work and once the mouseover images are loaded, the blue boxes don't show again. It only stays for a second or two, but it doesn't look clean. I realize that the mouseover effect don't work on touch based systems, but when a user clicks them they do still show just before the link initiates.

Is there any fix for this issue? Is there any html code we can use in the header to tell the mouseovers to pre-load when the website comes up. I'd prefer the mouseovers have a clean look on mobile devices.

Bill
WHC
Quick Biz Websites
www.quickbizwebsites.com
User 187934 Photo


Senior Advisor
20,181 posts

Hi Bill,
Can you share a link so we can see the issue?:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2093747 Photo


Registered User
69 posts

Eric Rohloff wrote:
Hi Bill,
Can you share a link so we can see the issue?:)


Yes, here are a couple. You have to access via a mobile device or tablet like an iPad. Watch the buttons when you click them. They will flash the blue question mark (broken image). Once you have clicked on each menu it caches the mouseover images and doesn't show. To me, it just doesn't look clean.

http://attorneysheliamccoy.com/
http://www.oraclebuildingcontractors.com/

Bill
WHC
Quick Biz Websites
www.quickbizwebsites.com
User 2147626 Photo


Ambassador
2,958 posts

I'm not really a coder but I'll jump in here anyway. First off, your web sites work great on an Android phone/tablet.:cool:
The reason you see the flash you have already discovered. The images do not preload and it takes a second (or two) to grab them after the selection. From what I've seen on the web there are several ways to get around this. The first is to preload your images, which will take time and slow the loading of your web page I'm sure. The second is to use a 'sprite sheet' to load your images. Basically a sprite sheet will load as a single image yet contain all of your menu and mouseover images. Here is an article explaining what I'm talking about. This may or may not be a solution for you. I'm sure Eric (jquery guru) can show you how to preload the images using jquery and you may want to go that way. Your choice, just my thoughts...
http://alistapart.com/article/sprites
http://spritegen.website-performance.org/
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 187934 Photo


Senior Advisor
20,181 posts

It's not a image loading problem it's a hover vs touch problem.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2147626 Photo


Ambassador
2,958 posts

There is no 'hover' on idevices. I thought the problem was that when a menu option was selected, the button flickered and/or displayed a ? before the mouseover image showed. I've seen that a number of times with VSD sites. There is a small delay while the image is loaded. Preloading the image, or using sprites, cures it. My bad if that isn't the problem. :P
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2093747 Photo


Registered User
69 posts

You are correct, its the split second where the mouseover image is being loaded that causes the blue question mark. iDevices don't support mouseover, but they do seem to load them once clicked.

How to you preload a VSD generated mouseover? VSD numbers its graphics and I'm not sure how to preload just the MO images. I know how to create my own HTML for mouseover, but its easier to use the VSD versions.

Thanks,
Bill
WHC
Quick Biz Websites
www.quickbizwebsites.com
User 2147626 Photo


Ambassador
2,958 posts

Well my battery is going dead on the laptop so I'm not going to be staying on long. Seems the more research I do, the more suggestions I'm running across that say 'sprites' are the way to go. Try reading over this and see if any of it makes sense to you... http://css-tricks.com/css-sprites/

Another... http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites

I don't use photoshop, but another graphics program to create my sprite sheet. Whatever works for you I guess.

Let us know if you still need help, but it will be a while before I can get back on. :P
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.