Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file

Image Rollovers for your Links!

Submitted by shaun on Mon, 04/21/2008 - 19:02

Image Rollovers for your Links!

Now it's getting fun. Here is how you get image roll overs for your buttons and links fast and easy.

Here is the .psd file used in the tutorial:
http://psd2cssonline.com/tutorials/rollovers/PhotoshopRoll.psd

Here is what psd2css Online generates from that .psd file:
http://psd2cssonline.com/tutorials/rollovers/index.html

Update! psd2css Online has undergone many updates since this video was made. The functionality is still there, but the generated code, and the psd2css Online website look much better now. Note too that now the code generator will create a target for your href tags for you based on the name of your _link or _linkover layers. A layer named index_link will generated an href tag pointing to index.html for example.

Doesn't work on apple mobile touch products

Submitted by tehmadpaki on Mon, 08/29/2011 - 02:16.

With the coding that is executed how it is currently set up, the user will have to click three times if this feature is applied to a link. I do believe that for this to work, the coding that is set up for _linkover has to change to CSS or have some code to alleviate the issue.

Patch?

Submitted by tehmadpaki on Tue, 08/30/2011 - 03:14.

Is there a patch to stop .hover for the ipad/iphone devices?

link_overs displayed with _links when two objects/layers have...

Submitted by geraldtrepy on Mon, 02/28/2011 - 18:00.

Hi everybody!

I've got an issue with the linkover feature.

When I have two layers/objects with the same name_link for them to redirect to that corresponding link, PSD2CSSonline displays both the objects' _links and _linkovers at a time.

What's wrong. I might as well change the name of the layers but what if two of my layers are expected to redirect to one of the other site's pages. Let's say one of the link is on the nav bar and the other is on the footer bar as you see in many sites (i.e for the contact_page)

Cheers

same problem

Submitted by saasha on Sat, 09/10/2011 - 14:41.

Did you ever get an answer to this problem? My header linkovers work but if I try to make a footer link over for the same pages no linkover will work?

Text rollovers that remain as text vs an image

Submitted by tef88 on Wed, 09/29/2010 - 17:44.

This is fantastic thank you! But what if you want text links that roll over and remain scrollable rather then the text as an image? Is this possible? Or if you want a button that rolls over and has scrollable text as well. If this is somewhere already then I apologize. I haven't seen it yet.

can you keep layer styles?

Submitted by iamsolazy3 on Sun, 04/11/2010 - 15:11.

when you do the linkovers, can you keep the layer styles, or do you have to fully rasterize?

Hi - Both :) You can keep

Submitted by shaun on Mon, 05/10/2010 - 14:25.

Hi -

Both :)
You can keep the layer styles _by_ rasterizing. When you rasterize, all the styles get baked into the rasterized layer.

--
Shaun

hey buddy, yours alot stuff come handy but one problem

Submitted by antoniomschjang on Tue, 01/26/2010 - 00:03.

Its like rollover links don't work on my PC and even when i tried your demo. Please help me... THANX

Joomla

Submitted by Timos on Wed, 10/14/2009 - 07:46.

Hi,

Does this work also for Joomla template, in fact are all tutorials also usable for Joomla templates? If so, it is great! If not, it's still great ;0)

links that stay in an other color

Submitted by steijversd on Sat, 04/25/2009 - 00:30.

Hi,

Very handy stuff, but is it somehow possible to give a link an other color, to indicate on witch page you are?

btw, thx for this great site!

Davy

BUTTON STATES

Submitted by psyp on Fri, 08/05/2011 - 16:19.

Similar question: Is it possible to have something like '_pressed' state of button?
Sorry if that is already answered elsewhere, i'm still going through tutorials. If i find it i'll post it here.