🔒 Locked

[web] Rollover Buttons

Started by Geometrian May 16, 2010 at 12:21 AM 6 replies 1.7k views

Original Post

May 16, 2010 at 12:21 AM

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.php The 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:

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

Nik02

May 16, 2010 at 1:47 AM

"image preloading"

Geometrian

May 16, 2010 at 2:26 AM

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):

 <img src="graphics/button_home.png">

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

Nik02

May 16, 2010 at 2:53 AM

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.

syntax13

May 16, 2010 at 7:05 AM

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.

Wan

May 16, 2010 at 8:24 AM

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.

jbadams

May 16, 2010 at 9:08 AM

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.

Geometrian

May 16, 2010 at 10:18 AM

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. <br><br>It's working now. Thanks everyone!

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.