00:00
00:00
Newgrounds Background Image Theme
Upgrade Your Account!

Newgrounds made a lot of infrastructure upgrades this week and needs your help!

Become a Supporter for just $3 a month or $25 for the year.

Shout out to @travsaus for megaphone tankman!

Link background changing color.

740 Views | 7 Replies
New Topic Respond to this Topic

Link background changing color. 2007-12-10 15:57:59


Hey,

Does anyone know how i get the link background to change colour on mouse over, like it does on the Newgrounds website?

Thanks for your time,

Max

Response to Link background changing color. 2007-12-10 16:02:56


I think the menu links were done in flash but this can also be done with css and javascript.

Response to Link background changing color. 2007-12-10 16:24:43


It's done with pure CSS, just use the background-position: CSS property to move the background image up and down depending on the a:status. Give each link it's own class and you can have multiple links using the same background image.


BBS Signature

Response to Link background changing color. 2007-12-10 16:27:28


True.. although you can replace the image altogether with a new one. :-)


> twitter.

Response to Link background changing color. 2007-12-10 17:04:26


is there a way of doing so that you can change the background color of the div layer the link is in, or would i have to do it with images?

Max

Response to Link background changing color. 2007-12-10 19:18:46


At 12/10/07 05:04 PM, maxxist wrote: is there a way of doing so that you can change the background color of the div layer the link is in, or would i have to do it with images?

Max
.menu {
background-color: #FFFFFF;
}
.menu:hover {
background-color: #FF0000;
}
<div class="menu"></div>

I need to got to bed.


hello

Response to Link background changing color. 2007-12-11 14:10:56


Problem with a link in html is that it is an inline element. This can make it unfriendly to work with sometimes, and is also the only tag that older version of internet explorer will support the css :hover pseudo class.

Let's say for example that you wanted a button that would change colour when you rolled your mouse over it that's 200 pixels wide. You would assume the css:

a{
width:200px;
background-color:#ff00ff;
}
a:hover{
background-color:#ffff00;
}

...would do the job, but you can't set the width of an inline element, like our link here. So you would end up with a button that's just as wide as our text.

Standards compliant browsers like firefox, opera and safari would let you put the hover on a div tag (which is a block element, and the width and height can be set on these) but this has 2 drawbacks. Firstly, it won't work in none-standard browsers like internet explorer and secondly you could still only click the text to follow the link.

However, if you set the link to be a block element, with the css display:block; then the link will be treated as a div. I commonly use this method to create rollover buttons, but you either have to float them or put them inside a table to make them line up horizontally.

You can also use this little trick to create rollover buttons that use images. It's the same principle, just use background-image instead of background-color. You then use this css...

a{
background-image:url('whatever.jpg');
background-position:top left;
height:50px;
width:200px;
display:block;
}
a:hover {
background-position:bottom left;
}

Just make sure that whatever.jpg is twice as high as the height of the rollover button. (In this case 100 pixels) Then have the top 50 pixels displaying the normal button and the bottom 50 pixels display the rollover image.

Hope that helps.


Sufficiently advanced incompetence is indistinguishable from malice.

Response to Link background changing color. 2007-12-11 14:39:57


Thanks alot thats absolutley fantastic!

Max