Hover over button link |
Hover over button link |
gimpguy2000 |
Feb 10 2008, 03:45 AM
Post
#1
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Feb 10 2008, 05:06 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
CODE a { background: url(off-pic.gif) } a:hover { backgroumd: url(on-pic.gif) } |
gimpguy2000 |
Feb 10 2008, 02:06 PM
Post
#3
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
|
Christian J |
Feb 12 2008, 05:03 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Feb 12 2008, 10:45 PM
Post
#5
|
Advanced Member Group: Members Posts: 221 Joined: 23-August 06 Member No.: 11 |
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 |
Feb 12 2008, 10:59 PM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Mar 11 2008, 10:51 PM
Post
#7
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 12 2008, 12:59 AM
Post
#8
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 12 2008, 01:14 AM
Post
#9
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Mar 12 2008, 01:40 AM
Post
#10
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 12 2008, 03:37 AM
Post
#11
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Mar 12 2008, 03:49 AM
Post
#12
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Let's try this again...
CODE img.E This selects <img class="E" ...>{ position:absolute; left: 433px; top:141px; z-index:1 } CODE .E a { These all select <something class="E"><a ...>...</a></something>background: url(gimpimages/downtab.png) 0 0 no-repeat; ... } .E a:hover { background-position: -156px 0; ... } .E a:active { background-position: -156px 0; ... } 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 |
Mar 12 2008, 04:06 AM
Post
#13
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
In addition, you might want to read the article series (3 in total) about CSS selectors from 456bereastreet.com.
|
gimpguy2000 |
Mar 12 2008, 11:28 AM
Post
#14
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 12 2008, 01:14 PM
Post
#15
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Can you provide the URL (address) of a document that demonstrates the problem?
|
gimpguy2000 |
Mar 12 2008, 01:32 PM
Post
#16
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 12 2008, 03:07 PM
Post
#17
|
Novice Group: Members Posts: 25 Joined: 10-November 07 Member No.: 4,279 |
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 |
Mar 13 2008, 09:04 PM
Post
#18
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 03:14 AM |