Rollover Effect

DOS · 01-03-2005, 07:48 PM

I was wondering if you could use Photoshop to create a rollover effect for links. I want to do something along the lines of what this site has at the left side. See how the item goes from white to red when you hover over it? How can I make that?

Pimpen 2010 · 01-03-2005, 08:17 PM

That's done via CSS.

*Moved to Coding*

Jazzee · 01-03-2005, 08:24 PM

You can view source on that page to see how they did it.

<div id="myMenu"><a href="index.php"> ¤ News</a></div>

Then look at the stylesheet to see the css for "myMenu" - abandonia.com/fonts.css

Just look at the three sections of the stylesheet for "#myMenu".

seonewbee · 01-03-2005, 09:28 PM

You need this code to make the rollover like they did. You will have to
specify your own padding, font, etc

a {

text-decoration: none; /* This turns off underlining */
display: block; /* This makes the rectangle color area */
width: 100%; /* This tell it to be all the width */
}
a:hover { /* This is the rollover effect. */
background-color: #AD0000; /* This changes background color */
color: white; /* Changes the text color */
}

DragonEye · 01-04-2005, 12:48 AM

well,

you can if you have photoshop with imageready. You should click the imageready button in photoshop and the image will be transferred to IR where you can add those rollovers. I would not recommend it though, the code is quite messy.

DragonEye

DOS · 01-04-2005, 04:52 PM

Quote:

Originally Posted by seonewbee

You need this code to make the rollover like they did. You will have to
specify your own padding, font, etc

a {

text-decoration: none; /* This turns off underlining */
display: block; /* This makes the rectangle color area */
width: 100%; /* This tell it to be all the width */
}
a:hover { /* This is the rollover effect. */
background-color: #AD0000; /* This changes background color */
color: white; /* Changes the text color */
}

This looks good. It is css? There will be no other css on the page so do i have to wrap that in <css> or something?

Pimpen 2010 · 01-04-2005, 05:59 PM

Yah, that's CSS. There is a way to do it besides the adding a new file, but I highly recommend that, cause then when you change one thing it'll be good for all pages.

Then when you make a new page, add this to every page of the site to make it good for the stuff on the page:
<link rel="stylesheet" href="filenameandlocationhere.css" type="text/css">

evilregis · 01-05-2005, 08:41 AM

There is no <css> tag, but you can either add the css into the document using (inside the <head> tag):

Code:

<style type="text/css">
a {
   text-decoration: none; /* This turns off underlining */
   display: block; /* This makes the rectangle color area */
   width: 100%; /* This tell it to be all the width */
}
a:hover { /* This is the rollover effect. */
   background-color: #AD0000; /* This changes background color */
   color: white; /* Changes the text color */
}
</style>

Or, as Pimpen said, link to an external stylesheet, which is preferred. It's easier to maintain, and it gets cached that way. So you would save everything between the <style> tags in a file and use the code that Pimp noted in your <head> tag of every page.

Jazzee · 01-05-2005, 06:12 PM

FYI: Just using this code that seonewbee posted will make all links on the page have this effect. You need to use classes if you only want this on the nav links.

DOS · 01-05-2005, 06:17 PM

Quote:

Originally Posted by Jazzee

FYI: Just using this code that seonewbee posted will make all links on the page have this effect. You need to use classes if you only want this on the nav links.

Yes, I want classes. Seems css is something I should spend some time reading about.

Thanks for the help.

Jazzee · 01-05-2005, 06:23 PM

Instead of using

a {..stuff here..
and
a:hover {..stuff here..

use

a.nav {..stuff here..
and
a.nav:hover {..stuff here..

Then on your links in the page use

<a class="nav" href="..

seonewbee · 01-05-2005, 07:28 PM

Has anybody tried targeting?

div.menu a. {
....
}

div.menu a.hover{
....
}
This way you do not have to put a class on every link. You could replace "div" with "td"

What the above means is that a div with the class of menu that contains an anchor / link will look the way you specified. Anchors in other parts of the document will not look this way.

You might want to put your menu in a list
<ul>
<li><a .....>text</a>
<li><a ....>text2</a>
....
</ul>

Have fun

DragonEye · 01-05-2005, 11:46 PM

You might also consider doing it using XML behaviours

It's a very nice way of doing rollovers, I haven't used the system myself but I have done some tests and I'm definately going to use it on my future sites.

Here is a URL where you can find out:

http://www.w3schools.com/xml/xml_behaviors.asp

DragonEye

seonewbee · 01-06-2005, 09:05 PM

Doesn't that require javascript? Won't work if javascript is turned off. CSS is better.

DragonEye · 01-07-2005, 12:31 AM

Sorry, post removed, already posted it