image rollover button

Forum Moderators: not2easy

Message Too Old, No Replies

image rollover button

html and css for rollover buttons...

Greencrystal

10:46 pm on Feb 3, 2010 (gmt 0)

Hi again :)

I have a problem...(naturally...will that day ever come when Im here to help! (please note no question mark) :)

Anyway, Im trying to have a image that works as a link but changes into another image when you hover over it and which I imagine is also a link . I did try to figure this one out and found code on you tube:

css:
html

<a class="homebutton" href="$">home</a>

css

a.homebutton
{
display:block;
width:123px;
height:11px;
text-indent:-5000px;
background:url(images/homebutton.jpg);

}

a:hover.homebutton
{
background-position: -124px 0;
}

Hence the image itself is of the two images togeather the total dimensions being 247 x 11px

Problem being its not working for me....any help really appreciated also is the above the best way to do roll overs in principle?

Any advise sincerely appreciated.

rocknbil

1:02 am on Feb 4, 2010 (gmt 0)

You almost got it. But you may want to change it a little now, while you're still early in it.

Change this

a:hover.homebutton

to this

a.homebutton:hover

And it should work. However, guessing that this is just for the home button/link. A class selector is for items used in multiple locations on a page, but an id selector is for items unique to every page. Since the home button is likely to be just that button, you are better served by using ID's - with a couple exceptions. :-)

Let's say you do this: (see note about semantics below)

<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Since we are using text for the button itself, the background images and mouseovers are all the same two images (or one, using your background-position approach.) In this case, you could assign a class to each anchor, but it's better served by this:

#nav a { background:url(/pathto/nav-button.gif); }
#nav a:hover { background:url(/pathto/nav-button-over.gif); }

If you move the text into the graphic for each button, you will want an id:

<ul>
<li><a id="nav-home" href="/">home</a></li>
<li><a id="nav-about" href="about.html">about</a></li>
<li><a id="nav-contact" href="contact.html">contact</a></li>
</ul>

css

#nav-home,#nav-about,#nav-contact {
display:block;
width:123px;
height:11px;
text-indent:-5000px;
}

#nav-home {
background:url(images/homebutton.jpg);
}
#nav-about {
background:url(images/aboutbutton.jpg);
}
#nav-contact {
background:url(images/contactbutton.jpg);
}

#nav-home:hover,#nav-about:hover,#nav-contact:hover {
background-position: -124px 0;
}

Now, one could take the multiple selectors there and apply a class to those, using only the ID for the specific buttons, but then you have

<li><a id="nav-home" class="nav-class" href="/">home</a></li>

But given the choice between more code in CSS or more code in the HTML, I choose the CSS. Your call.

Semantics: Note I'm using a ul and li, as a navigation is really a list of links, making it more semantically correct. Style appropriately. Most implementations you will see apply float or display:inline to the li's to get a horizontal nav.

Greencrystal

10:05 pm on Feb 4, 2010 (gmt 0)

Rocknbil, Many thanks for the above code and explaining the difference between IDs and classes - its very helpful and will be more so in the future... ....my weekend seems to be cut out for me :)

Thanks again.

Greencrystal

10:22 pm on Feb 9, 2010 (gmt 0)

Ive used the code given and I must be doing something wrong at a basic level because its plainly not working (ie not a good weekend :)

Below is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title>testrollover</title>

<link rel="stylesheet" type="text/css" href="crollovertest.css"/>

</head>

<body>

<ul>
<li><a id="nav-home" href="about.html">home</a></li>
<li><a id="nav-about" href="about.html">about</a></li>
<li><a id="nav-contact" href="contact.html">contact</a></li>
</ul>
</body>

</html>

Below is the css:

#nav-home,#nav-about,#nav-contact {
display:block;
width:123px;
height:11px;
text-indent:-5000px;
}

#nav-home {
background:url(dreamerscode/homebutton.jpg);
}
#nav-about {
background:url(dreamerscode/homebutton2.jpg);
}
#nav-contact {
background:url(dreamerscode/homebutton3.jpg);
}

#nav-home:hover,#nav-about:hover,#nav-contact:hover {
background-position: -124px 0;
}

Again the total image size is : 247 x 11px

The complete URL of the images are

C:/Documents and Settings/myname/My Documents/dreamerscode/rollover/homebutton

Ive done basics of checking that the css file name is the same as the css href in html / Ive validated the documents...

All I'm getting is three vertical dots on the upper left hand side of the webpage and a headache...thanking any advise in advance.

rocknbil

12:53 am on Feb 10, 2010 (gmt 0)

Well, I don't have your images, so I did this:

background:#ff0000;
/*background:url(dreamerscode/homebutton.jpg);*/

With diff. colors for each, and it's working fine (but a skinny little nav you have there!)

I did notice the a's were overlapping because the default size of the text actually exceeds 11px high, so set it for 2px below - if it's not going to be visible, it doesn't matter.

To get rid of the dots, I added only this. The line height is only needed by IE.

#blah,#bla li { margin:0; padding:0; font-size:2px; list-style:none; line-height:2px; }

...

<ul id="blah">

So, try that, comment out your images, fill the a's with colors, or even put a border on them to see what's going on . . . looks like it's working here.

birdbrain

9:41 am on Feb 10, 2010 (gmt 0)

Hi there Greencrystal,

you say that...

The complete URL of the images is

C:/Documents and Settings/myname/My Documents/dreamerscode/rollover/homebutton.

...but it does not match with this...


#nav-home {
background:url([red]dreamerscode/homebutton.jpg[/red]);
}
#nav-about {
background:url([red]dreamerscode/homebutton2.jpg[/red]);
}
#nav-contact {
background:url([red]dreamerscode/homebutton3.jpg[/red]);
}

The rollover appears to have rolled off. :)

birdbrain

rocknbil

8:27 pm on Feb 10, 2010 (gmt 0)

<smacks head> Note to self: obvious first, over-analyze last. Thanks again birdbrain. :-)

Greencrystal

11:10 pm on Feb 10, 2010 (gmt 0)

Thanks again Rocknbil - I will try with colours and then images and see what happens...thanks for the tip around the dots...

Birdbrain...thanks rollover did indeed rollover...

Will experiment and hope for the best :)

Thanks again

Greencrystal

10:20 pm on Feb 22, 2010 (gmt 0)

:)
Hello Ive figured out how to do a rollover! Thanks for the help on it.

Unfortunately, I made the mistake of not thinking about where I wanted the text....

The problem now is this: I have the graphic which is meant to work as a underline ...the rollover affect is that it changes colour at the command hover.

Above the underline is the word 'information' - which I would also like to be part of the link

I imagine that I could add the text to the graphic and all of it would be a link put I prefer not to do that as Id rather use text....

....So in essence what Im asking is this:
1) I have a horizontal graphic which is a link
2) on top of that link goes the text - as a text and not a image
3) as the graphic shows up that it is a link I would like the text to also show up - can I do that?

Please also see below the code I am using, at the moment Ive a different ID to both graphic link and text:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title>testrollover</title>

<link rel="stylesheet" type="text/css" href="crollovertest.css"/>

</head>

<body>

<a id="button1" href="#"></a>
<p class="information">Information</p>

</body>

</html>

css:

html, body
{
margin: 0;
padding: 0;
font-size: 100%;
color:#FFFFCC
}

a#button1 {
display: block;
width: 122px;
height: 7px;
background-image: url(bluelink1.jpg);
margin-left:28px;
margin-top:87px;
text-decoration:none;
outline:none
}

a#button1:hover {
background-image: url(pinklink1.jpg);}

.information
{position:absolute;
font-family: arial, helvetica, sans-serif;
font-weight:lighter;
font-size: 22px;
left:37px;
margin-top:-30px;
color: #151b8d}

Please advise whether text can be manipulated to show as part of a link and whether the above code is ok?

As always I cant thank enough in advance.... :)

Greencrystal

7:34 pm on Feb 28, 2010 (gmt 0)

Got it :)

ul li {
margin: 60px 24px 100px 50px;
padding-top: -10px;
font-weight: bold;
line-height: 50px; /* height of icon */
background-repeat: no-repeat;
background-position: 0% 80%;
}

For anyone struggling with the same thing....Its all in the back ground position! But please feel free to correct if theres a better way :)