Hover over button link Options

[gimpguy2000]

Hi ,

I was wondering if this was possible with CSS...and I have read many methods but none have even come close to working or have simply made my button disappear. As well, the code for it was longer than my whole CSS\HTML page.

What I need to do is this..

I have a button on my Web page called "News". Now, when I hover the mouse over it, I would like it to change to a button I made with blue highlight showing eg. hover status. The original News button is a LINK to the news page, so it's not just a dead button. I have tried many ways as stated but none have worked.

Thanks,

Paul

[pandy]

CODE

a               { background: url(off-pic.gif) }
a:hover         { backgroumd: url(on-pic.gif) }

[gimpguy2000]

CODE

a               { background: url(off-pic.gif) }
a:hover         { backgroumd: url(on-pic.gif) }

Thanks Pandy. I'll give it a go and see how it works

Cheers,

Paul

[Christian J]

You should use some preloading of the hover image, otherwise the use will experience a delay before it loads. Here's one way: http://www.wellstyled.com/css-nopreload-rollovers.html

[Dr Z]

IMO the size (in px) and the type of image (i.e. jpg vs gif) would make a considerable difference in the loading time.

[Darin McGrew]

FWIW, there's also the approach of Fast Rollovers Without Preload.

IMO the size (in px) and the type of image (i.e. jpg vs gif) would make a considerable difference in the loading time.

Why would the image format (JPEG, GIF, PNG, BMP, whatever) have any effect, other than its influence on the file size?

[gimpguy2000]

FWIW, there's also the approach of Fast Rollovers Without Preload.

IMO the size (in px) and the type of image (i.e. jpg vs gif) would make a considerable difference in the loading time.

Why would the image format (JPEG, GIF, PNG, BMP, whatever) have any effect, other than its influence on the file size?

Thanks all for the advice and apologize for my late response, lot's going on since I asked this but am going to give it a try right now.


Cheers,

Paul

[gimpguy2000]

Ok, I am still having trouble with rollover and not sure why. I'm using the method from http://www.wellstyled.com/css-nopreload-rollovers.html

Also, the image is one solid image, side by side button, 312 px wide by 41 high. The image is downtab.png


CSS

CODE

img.E
        {
            position:absolute;
            left: 433px;
            top:141px;
            z-index:1
        }
.E a {
   background: url(gimpimages/downtab.png) 0 0 no-repeat;
   ...
   }
.E a:hover {
   background-position: -156px 0;
   ...
   }
.E a:active {
   background-position: -156px 0;
   ...
   }

HTML

CODE

<a href="Downloads.html"><img class="E" src="gimpimages/downtab.png" alt="Downloadstab" border="0"/></a>

If anyone can have a look see it would be appreciated.

Cheers,

Paul

[Darin McGrew]

CODE

.E a {

This selects an a element inside an element with class="E".

CODE

<a href="Downloads.html"><img class="E" src="gimpimages/downtab.png" alt="Downloadstab" border="0"/></a>

This is an element with class="E" inside an a element.

[gimpguy2000]

CODE

.E a {

This selects an a element inside an element with class="E".

CODE

<a href="Downloads.html"><img class="E" src="gimpimages/downtab.png" alt="Downloadstab" border="0"/></a>

This is an element with class="E" inside an a element.

Thanks for the reply. Unfortunately I am still extremely confused here. I do think you are close to where my confusion is, which is the correct relation between the CSS and HTML image here, but I still have no idea why. I slightly understand what you are saying but I would be a liar if I said I completely knew.

Thanks,

Paul

EDIT: Unless you mean I have to set up a div class="" ? Well, I'll try that first.


EDIT2: Ok, didn't work. I obviously get that I have an a element inside E and E inside a . But how else do I link unless doing this? Yes, I am thinking on this, lol. unless the .E has to be a .E { ?



Last EDIT: Anything I've tried to switch simply causes everything to go out of whack. It has taken me longer to get this rollover stuff than it did to create the whole page so far. I just don't understand the rollover thing.

This post has been edited by gimpguy2000: Mar 12 2008, 02:23 AM

[Frederiek]

Read the article from wellstyled.com, which explains the method well and take a close look at the source of the example page and the image used there.
Only one (background) image is used for the link, hover and active status. Depending on the status, the position of that background image is changed.

But I wonder if you really tried to use wellstyled's method. Can you post the url (address) of a page that demonstrates your problem and attempts?

[Darin McGrew]

Let's try this again...

CODE

img.E
        {
            position:absolute;
            left: 433px;
            top:141px;
            z-index:1
        }

This selects <img class="E" ...>

CODE

.E a {
   background: url(gimpimages/downtab.png) 0 0 no-repeat;
   ...
   }
.E a:hover {
   background-position: -156px 0;
   ...
   }
.E a:active {
   background-position: -156px 0;
   ...
   }

These all select <something class="E"><a ...>...</a></something>

Notice that the a is inside the <something class="E">.

CODE

<a href="Downloads.html"><img class="E" src="gimpimages/downtab.png" alt="Downloadstab" border="0"/></a>

Notice how you've got the <img class="E" ...> inside the a in your HTML, but your CSS is trying to select an a that is inside the <something class="E">.

To select your HTML, you need

CODE

a .E { ... }
a:hover .E { ... }
a:active .E { ... }

Changing the order of the parts of the selectors changes their meaning.

[Frederiek]

In addition, you might want to read the article series (3 in total) about CSS selectors from 456bereastreet.com.

[gimpguy2000]

Thanks Darin,

I did change the selectors like that as shown below, but it didn't do any good it seems. The first .E I did try with a .E and without block; tried img.E or a img.E , and of course tried many things....etc... It displays the image "button" but won't display only a portion at a time. The button as a link still works,just not the rollover.

CODE

.E
        { display: block;
          position: absolute;
            left: 433px;
            top:141px;
            z-index:1
        }
a  .E {
   background: url(gimpimages/downtab.png) 0 0 no-repeat;
   ...
   }
a:hover .E {
   background-position: -156px 0;
   ...
   }
a:active .E{
   background-position: 156px 0;
   ...
   }

Sorry for being a pest about this, but I simply don't know where this is going wrong.

Thanks


Paul

[Darin McGrew]

Can you provide the URL (address) of a document that demonstrates the problem?

[gimpguy2000]

I think I found the issue, I'll find out after I test it.

Thanks!

Paul

This post has been edited by gimpguy2000: Mar 12 2008, 02:19 PM

[gimpguy2000]

Ok, I found that I had /> after the image which isn't supposed to be and had that on a couple which led to me fixing a good portion of my page.

Unfortunately, the buttons had the purple like my link color set around them, so I inserted border="none" again to get rid of that.

Now, I am still not getting the correct rollover effect. The button shows the whole image instead of just a portion until active or hovered. Although, the rollover still isn't working anyway.

Thanks,

Paul

[pandy]

Can you provide the URL (address) of a document that demonstrates the problem?

Well, can you? We aren't second-sighted.