473,322 Members | 1,778 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Problem with a:hover images disappearing

10
I have recently built and uploaded online my first website for a client. I have one slight problem, when you hover over the bottom three buttons on the index page, the images disappear momentarily until hovered over again. This also happens on the gallery page. I have no clue as to why it is doing this. I have declared a background image for a then a different one for the a:hover.

The website is: www.shadesofjade.co.nz

If someone could please help it would be appreciated. Any other feedback is most welcome.
Feb 25 '10 #1

✓ answered by Ashwani Sharma

There is a very simple solution for this problem. You can use sprite for this means just make both of your images is a single image horizontally or vertically and change background position according to image on hover. In this case you won't face any disappearing problem with image.

4 7372
drhowarddrfine
7,435 Expert 4TB
This occurs because you are using a different image for hover than you have in the link alone or you are using a different name for the same image. When one hovers, that image is fetched from the web which is causing the previous image to disappear and re-render with the new one.
Feb 25 '10 #2
L3SH
10
Ok so at the moment I don't specify an <img> within the <a> instead I specify the images in the CSS. Would it be better if I put an <img> within the <a> and then specify the a:hover in the CSS?
Feb 25 '10 #3
There is a very simple solution for this problem. You can use sprite for this means just make both of your images is a single image horizontally or vertically and change background position according to image on hover. In this case you won't face any disappearing problem with image.
Feb 25 '10 #4
L3SH
10
Thanks, I have changed them to a sprite. It work really well. New technique for me to use.
Feb 25 '10 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Alex Hopson | last post by:
I'm using the code below to loop through some images and resize each image twice, once to create a thumbnail and once to create a small image. The page stops loading around the 38th image out of...
7
by: Warren Post | last post by:
I´m trying to implement a:hover popup images like Eric Meyer did at <http://meyerweb.com/eric/css/edge/popups/demo2.html>. My latest take is at...
2
by: A. Solomon | last post by:
Hi, I have a ImageList containing 4 bitmaps attached to a UserControl which acts as a Open/Close panel. This panel, upon click, switches the image in a PictureBox control to indicate the...
5
by: IkBenHet | last post by:
Hello, I use this script to upload image files to a folder on a IIS6 server: ******************* START UPLOAD.ASPX FILE ********************** <%@ Page Language="VB" Debug="true" %>
0
by: SBelzile | last post by:
Hi, We are working on a vb.net WinForms project based on the Composite UI Application Block (VS2005). I have a strange problem. At first, I thought 10 minutes would be fairly enough for me to...
1
by: TomT | last post by:
I am having a difficult time solving a problem. Whenever I use :hover in a certain <div> the page shrinks in IE6. Of course, this problem does not exist with other browsers. It is even more vexing...
1
by: mlikesit | last post by:
I am trying to get the following code to pre-load some images before re-dirrecting the user. The problem is that the onError event gets called for all of the images immediately. I've tripple...
1
by: davidson1 | last post by:
Hai, I have no problem of inserting images to sql server 2000 from ASP.NET , but while retreiving it retrieves one image only, but i have 3 images in the table , i have the used the following...
3
by: Hataf | last post by:
Hi! I am having a problem in displaying images from database. This the code gallery.php <?php session_start(); if(isset($_SESSION)){} //die('ERROR:'.mysql_error());
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.