Css Rollovers? |
 Aug 9 2009, 08:05 PM
Post
#1
|
|
|
Member  Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528  |
How can i do that?
|
|
|
|
 |
Replies
(1 - 14)
|
Aug 9 2009, 08:09 PM
Post
#2
|
|
 Treasure Pleasure Group: Head Staff Posts: 11,193 Joined: Oct 2005 Member No: 281,127 |
Follow this tutorial then use this code whenever you want to have a link with rollovers:
CODE <a href="URL" class="NAME">LINK</a> Replace URL with the url of the page that you want to link, NAME with the name of your designated rollover's class, and LINK with what you want to set as a link (ie. an image, text, etc). |
|
|
|
|
Aug 9 2009, 08:12 PM
Post
#3
|
|
|
Blazed Group: Member Posts: 294 Joined: Jun 2009 Member No: 732,840 |
maynne was just about to post that ahahaha
|
|
|
|
|
Aug 9 2009, 10:25 PM
Post
#4
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
Can I put these in DIV's?
|
|
|
|
|
Aug 9 2009, 11:15 PM
Post
#5
|
|
|
Blazed Group: Member Posts: 294 Joined: Jun 2009 Member No: 732,840 |
Yes
|
|
|
|
|
Aug 10 2009, 01:56 AM
Post
#6
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
Okay. Followed the tutorial. Set my images, classes, everything, up.
What exactly do I put in the DIV to make it the image rollover? |
|
|
|
|
Aug 10 2009, 01:35 PM
Post
#7
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
I'm being really dumb about this. haha.
So for LINK do I actually add an image there? Because I did. and It just linked that image but didn't rollover. |
|
|
|
|
Aug 10 2009, 01:37 PM
Post
#8
|
|
|
Treasure Pleasure Group: Head Staff Posts: 11,193 Joined: Oct 2005 Member No: 281,127 |
Do you mind posting all your codes and a link to the page you're testing this on?
|
|
|
|
|
Aug 10 2009, 03:56 PM
Post
#9
|
|
 Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
You should try using this tutorial. It can prevent the blink effect too.
|
|
|
|
|
Aug 10 2009, 04:30 PM
Post
#10
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
CODE <style>
a.twitter {float:left;background:url(http://i25.tinypic.com/xdecno.jpg)repeat;width:30px;height:40px;display:block;} a.twitter:hover {float:left;background:url(http://i30.tinypic.com/25hq36f.jpg)repeat;} </style> <div class="codytwitter" style=" position: absolute; top: 1540px; width: 30px; height: 40px; left: 50%; margin-left: -404px ! important; background-color: transparent;"><a href="http://www.twitter.com" class="twitter"><img src="http://i25.tinypic.com/xdecno.jpg" /></a> </div> |
|
|
|
|
Aug 10 2009, 06:25 PM
Post
#11
|
|
|
Treasure Pleasure Group: Head Staff Posts: 11,193 Joined: Oct 2005 Member No: 281,127 |
Replace your codes with this:
CODE <style> a.twitter {float:left;background:url("http://i25.tinypic.com/xdecno.jpg")repeat;width:30px;height:40px;display:block;} a.twitter:hover {float:left;background:url("http://i30.tinypic.com/25hq36f.jpg")repeat;} </style> <div class="codytwitter" style="position: absolute; top: 1540px; width: 30px; height: 40px; left: 50%; margin-left: -404px!important; background-color: transparent;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t" class="twitter"></a> </div> Then next time you want to put up a rollover link, leave the image out like this: CODE <a href="URL" class="NAME"></a> That should do the trick. Sorry about that. |
|
|
|
|
Aug 10 2009, 06:33 PM
Post
#12
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
Perfect man!
It doesn't work in IE though. There's no images. |
|
|
|
|
Aug 10 2009, 06:40 PM
Post
#13
|
|
|
Treasure Pleasure Group: Head Staff Posts: 11,193 Joined: Oct 2005 Member No: 281,127 |
Right, replace it with this:
CODE <style> a.twitter {float:left; background-image:url("http://i25.tinypic.com/xdecno.jpg"); background-repeat:repeat; width:30px; height:40px; display:block;} a.twitter:hover {float:left; background-image:url("http://i30.tinypic.com/25hq36f.jpg"); background-repeat:repeat;} </style> <div class="codytwitter" style="position: absolute; top: 1540px; width: 30px; height: 40px; left: 50%; margin-left: -404px!important; background-color: transparent;"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t" class="twitter"></a> </div> Just duplicate that stylesheet and edit it if you need more rollovers. |
|
|
|
|
Aug 10 2009, 07:36 PM
Post
#14
|
|
|
Member Group: Member Posts: 12 Joined: Aug 2009 Member No: 741,528 |
Beautiful.
Thanks man :) |
|
|
|
|
Aug 10 2009, 07:45 PM
Post
#15
|
|
 Senior Member Group: Administrator Posts: 8,629 Joined: Jan 2007 Member No: 498,468 |
Topic Closed and Moved
|
|
|
|
 |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: