Image link rolloever

Buttero · December 19, 2006

Hey all,

I want to make the logo in my website change when someone puts the cursor over it. Like a rollover image. Here is my CSS but it dosent seem to be working:

[code]/* Main Style */

body {
font-family: arial, trebuchet ms, verdana;
}
#header {}
#header #logo {
height: 55px;
width: 90px;
}
#header a:link {
background: url(img/logo.gif) no-repeat;
height: 55px;
width: 90px;
}
#header a:hover {
background: url(img/logo-over.gif) no-repeat;
height: 55px;
width: 90px;
}
#header a:active {
background: url(img/logo-over.gif) no-repeat;
height: 55px;
width: 90px;
}
#header a:visited {
background: url(img/logo-over.gif) no-repeat;
height: 55px;
width: 90px;
}
[/code]

[code]<body>

<div id="header">
<a href="/">
<div id="logo"><img src="img/logo.gif"></div>
</a>
</div>

</body>[/code]

ToonMariner · December 19, 2006

[code]
<body>
<div id="header">
<a href="/"><span>Your Site Title</span></a>
</div>
</body>
[/code]

[code]
body
{
font-family: arial, trebuchet ms, verdana;
}

#header a
{
display: block;
width: 90px;
height: 55px;
background: transparent url(img/logo.gif) no-repeat 0 0;
}

#header a:link ,
#header a:hover ,
#header a:active ,
#header a:visited
{
background: url(img/logo-over.gif) no-repeat;
}

#header a span
{
display: none;
}
[/code]

beauty of that is it shows your site title when css is off.

YOU could also speed thinsg up a bit by making ONE image that was 90 px wide and 110px high. The top half of the image being the one you want to show and the bottom half teh one you want on hover, visited etc.

Then all you woudl need is...

[code]
#header a
{
display: block;
width: 90px;
height: 55px;
background: transparent url(img/logo.gif) no-repeat 0 0;
}

#header a:link ,
#header a:hover ,
#header a:active ,
#header a:visited
{
background-position: -55px 0;
}

#header a span
{
display: none;
}
[/code]

YOU may have to play with the back gorund position numbers (I can't remeber which way around they shoudl go ;) )

Sign In

Image link rolloever

Recommended Posts

Buttero

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information