Need Help with Photoshop 7 page design-Rollover buttons

G

gumspitter

New Member
I am designing a page in Photoshop then I will move it to Dreamweaver for further editing. I am trying to create rollover buttons along with this site. I need a little help with the finished product. The buttons each have a copy layer (with a satin effect) that I will use for the rollover. I have placed them in place on the page so I will not have to edit them in dreamweaver. How do I get the rollover to work once I have sliced the site, saved for web and moved to Dreamweaver? I guess what I am asking is how can I get the rollover to work before everything is moved to Dreamweaver?
I have tried to use the basic site layout from Photoshop, slice, the move to Dreamweaver then create the rollover affect But it creates a button with too much space between each button. This seems like the easier method but I cannot get the button to format correctly.

Here is a link to my site http://www.applingpiratesbaseball.com/

As you can see , none of the buttons have links. I wanted to get this issue fixed before I go any further.

Please Help!!!
 
PixelPusher

PixelPusher

Super Moderator
Staff member
In the Past...
Photoshop 7, legacy version now, was paired with a program called ImageReady. ImageReady will handle all of the psd to html conversion and output it for you.

Using ImageReady: when you have your psd file open and guides for your slices, there will be a large button at the bottom of the Toolbar (long vertical strip of tools on left). If you hover over the large button at the bottom of the Toolbar, a text block should say something like "View in ImageReady". That is where you will make your rollover and all other slices. In IR there is a panel/window called "Slices". At the bottom of that panel are little icons that allow you to add states to a slice (making a rollover).

Creating Rollovers in Today's Web Standards
Save your slices using Save for Web in PS, then build the rollover with CSS. Now in the days of IR, the program would create the rollover using a javascript function, however that is overkill, there is no need for that--plus CSS is simpler and more widely accepted method.

FYI - If you download a trial of the lastest version of PS (CS4 - free at Adobe.com) you will see that IR is no longer there.

Sample Rollover Using CSS
If you are familiar with CSS then this should be a breeze for you. If you are not...then I suggest you take a look at W3 Schools. They provide a great intro to CSS (something you need to know if you are to be building websites today).

Here is an example of how to use CSS for a button. There are several ways of creating it, this utilizes the pseudo classes (link, visited, hover, and focus).

Code: 
a.yourBtn:link,  a.yourBtn:visited {
background:url(images/btnImage.png) no-reapeat;  /* btn image */
font:normal 8pt Arial, sans-serif;
color:#fff;
text-decoration:none;
display:block;
width:150px;
height:35px;
line-height:35px;
text-align:center;
}
a:yourBtn:hover, a.yourBtn:focus {
text-decoration:underline;
background:url(images/yourHoverImage.png) no-repeat; /* btn rollover */
outline:0;
}
 
G

gumspitter

New Member
Now I have another problem. The sliced images are put into a table. As you can see from my site layout I have deleted the main area's slice and replaced it with a background of the same pattern. I did this to allow for text to be placed in this area. My problem is that when I try to put another table in this area and add content the navigation bar on the left loses its structure. I need my content area to be seperate from the other parts of my page. How can I accomplish this?
 
You must log in or register to reply here.
Top