   [web] Rollover Buttons
  Hi,So I'm working on updating my website.  After a great deal of deliberation, I've successfully gotten rollover images to work properly (the website, which is obviously under heavy construction) can be viewed here: http://geometrian.com/Last%20Light%20Productions/index.phpThe present four links on the toolbar in the header are each images.  When the mouse moves over them, the image ought to change to show that the buttons are being hovered over (in this case, a "dent" in the metal's appearance on either side of the text).  I'm doing this with a CSS stylesheet:a.button_home { width: 129px; height: 25px; background-image: url(graphics/button_home.png); }a.button_home_hover:hover { background-image: url(graphics/button_home_selected.png); }a.button_projects { width: 163px; height: 25px; background-image: url(graphics/button_projects.png); }a.button_projects_hover:hover { background-image: url(graphics/button_projects_selected.png); }a.button_tutorials { width: 170px; height: 25px; background-image: url(graphics/button_tutorials.png); }a.button_tutorials_hover:hover { background-image: url(graphics/button_tutorials_selected.png); }a.button_messageboard { width: 214px; height: 25px; background-image: url(graphics/button_messageboard.png); }a.button_messageboard_hover:hover { background-image: url(graphics/button_messageboard_selected.png); }In the main .php file, to draw the image-buttons:<a href="index.php" class="button_home    button_home_hover   " style="position:absolute; left: 30px; top:220px;"></a><a href="index.php" class="button_projectsbutton_projects_hover    " style="position:absolute; left:169px; top:220px;"></a><a href="index.php" class="button_tutorials    button_tutorials_hover   " style="position:absolute; left:342px; top:220px;"></a><a href="index.php" class="button_messageboard button_messageboard_hover" style="position:absolute; left:522px; top:220px;"></a>My problem is this: when the page first loads, when the buttons are first hovered over, the buttons temporarily disappear (presumably while the selected-button-images are loading).  Is there any way I can avoid this?Thanks,G   
  "image preloading"   ;  Hi,Seems reasonable.  The relevant section of the head:<script language="JavaScript"><!--if (document.images) {button_home   = new Image(129,25); button_home.src   = "graphics/button_home.png";button_home_selected    = new Image(129,25); button_home_selected.src    = "graphics/button_home_selected.png";button_projects    = new Image(163,25); button_projects.src    = "graphics/button_projects.png";button_projects_selected= new Image(163,25); button_projects_selected.src= "graphics/button_projects_selected.png";button_tutorials   = new Image(170,25); button_tutorials.src   = "graphics/button_tutorials.png";button_tutorials_selected    = new Image(170,25); button_tutorials_selected.src    = "graphics/button_tutorials_selected.png";button_messageboard= new Image(214,25); button_messageboard.src= "graphics/button_messageboard.png";button_messageboard_selected = new Image(214,25); button_messageboard_selected.src = "graphics/button_messageboard_selected.png";}function select_button(ImageName) {if (document.images) {document[ImageName].src=eval(ImageName+"_selected.src");}}function deselect_button(ImageName) {if (document.images) {document[ImageName].src = eval(ImageName+".src");}}//--></script>In the main file (I've edited only first button for testing):<a href="index.php" onmouseover="select_button('button_home')" onmouseout="deselect_button('button_home')" style="position:absolute; left: 30px; top:220px;"> <img src="graphics/button_home.png"></a>As you can see on the page (here once again: link), the image does not change to the selected image, and there's a weird border around the image?Thanks,-G   ;  Your stylesheet sets the background-image property of the style of the A element to display the images; if this is your intended result, you shouldn't put any content (such as the IMG tag) inside it. Any content of the A tag is rendered on top of the background, effectively obscuring the A element background contents.The rest of the images seem to preload correctly for me (IE9, Firefox 3.6.3).As a separate issue, if an image is inside a hyperlink, it gets a border automatically. You can suppress the border by setting the IMG element's border property to 0 (or setting the style's border attribute to nothing). Note that you shouldn't use the img tag in this context in the first place, though.As a side note, you don't have to use explicit width and height parameters in the Image constructor. When you set the src property to a valid image url, the width and height properties of the Image instance are determined automatically.   ;  The simplest solution I've found for this problem is to make the hover and non-hover images part of the same file stacked on top of each other. Then in the css, do something like this:a.button{width: 57px; height: 58px; background: url(../images/header_menu_home.png) top;}a.button:hover{background: url(../images/header_menu_home.png) bottom;}It simply moves around where it is taking from the source image that is already loaded.   ;  Another alternative is to combine the default and rollover picture into a single image, and use the background-position property to dynamically change the image by changing the offset.   ;  There's a good reference for this sort of thing on A List Apart: CSS Sprites: Image Slicing's Kiss of Death.  Combing the normal and hover graphics into a single image handles the pre-loading problem for you, and simple positioning moves the graphics into place on mouse-over.   ;  Despite all the coolness of &#106avascript, I'm going to have to go with the two-images-per-file approach, because it's so elegant.  It's working now.  Thanks everyone!   