Buttero Posted December 19, 2006 Share Posted 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] Quote Link to comment https://forums.phpfreaks.com/topic/31265-image-link-rolloever/ Share on other sites More sharing options...
ToonMariner Posted December 19, 2006 Share Posted 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 ;) ) Quote Link to comment https://forums.phpfreaks.com/topic/31265-image-link-rolloever/#findComment-144779 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.