SiteGrinder text buttons are Photoshop type layers where the entire contents of the text field have a hyperlink. But often you need to place one or more links within text that is otherwise unlinked. SiteGrinder gives you two ways to do this.

1. Lazy: using the "-haslinks" hint on a type layer and simply typing the links directly into the text for people to click on
2. Less lazy : using the "-haslinks" hint on a type layer containing your text in conjunction with a matching type layer using the "-links" hint and containing the links and information to allow SiteGrinder to match the links to the text.

See instructions below for each.

Lazy: Using A Single Type Layer With The "-haslinks" Hint

You can add URLs directly into a type layer and if it has the "-haslinks" hint then SiteGrinder will make those URLs clickable on the page, but won't apply the link to other text. If a type layer contains the text "Check out great products here: http://www.medialab.com", and the layer is named "cool stuff-haslinks" then SiteGrinder will make the included link "live" and clickable, as such:

Check out great products here: www.medialab.com

This technique does support SiteGrinder's link shorthand, so you can add web links without the "http://" prefix and email links without the "mailto:" prefix.

Less Lazy: Using Two Type Layers With The "-haslinks" And "links" Hints

Often you will want to apply links to parts of text instead of showing the URL in the text the way we did in the previous example.

This sentence, containing this link to a discussion of text buttons, is a perfect example.

SiteGrinder allows this using two text layers with two different hints, "-haslinks" and "-links". You place the "-haslinks" hint at the end of the layer name of the text layer containing the text that will appear on the web page. That's all you need to do to that layer.

For the links, create a new text layer that will contain the URLs you will be using as well as the copies of the parts of the text you want to to apply them to. Name this layer the same as the layer containing the text, but use the "-links" hint instead of the "-haslinks" hint.

Thus if you have a text layer named "sightseeing-haslinks" it will match to a text layer named "sightseeing-links".

The text in the "-links" layer consists of words and phrases from the "-haslinks" layer that you want to add URLs to. Each word or phrase appears on a line in the "-links" layer followed by the URL itself on the next line. You can have as many of these as you like, each separated from the previous URL by one or more empty lines. It sounds complex, but the example below will show you how easy it is.

Example:

Below is a line of text with multiple links:

I found an awesome waikiki whip recipe at this website! If you want to discuss it, email me.

The preceding sentence contains three different links on three different phrases in the text. To achieve this in Photoshop we'll create two layers, one for the text and one for the links. The type layer containing just the plain text with no styles or URLs we'll call "recipe idea-haslinks". The "-haslinks" hint tells SiteGrinder to look for links by examining the layer along with a second layer with the same but with the "-links" hint.

Thus we'll create a text layer called "recipe idea-links" containing the following text (without the quotes):

"waikiki whip recipe
http://www.medialab.com/sitegrinder/screenmovietutorials.html

this website
www.medialab.com

email me
recipe-help@medialab.com"

SiteGrinder uses this as a key to apply links to the text in the source layer. Each pair of lines contains text to find, and a link to apply to that text. The pairs must be separated by at least one blank line.

Types of links supported:

Any valid full URL can be entered as a link. This means you can have ftp links (with usernames and passwords) or http links that pass arguments.

There are a few shorthand techniques for common link types. Email addresses should be entered without the "mailto:" label, as in the example above. This allows SiteGrinder to create a true email link that will open in the user's email software. Web page links can start with the simpler "www" instead of the full "http://www". This makes the "-links" field more readable.

You can link to pages you are generating with SiteGrinder by just entering the name of the page followed by the "-page" hint, as in "Home-page". This will match to a layer comp or Page Definition of the same name.

If you want to put in a placeholder empty link that you will enter later in another package you can enter "#" as the link. It will show up as a link, but won't go anywhere.

If you enter an email or http link directly into the "-haslinks" field they will automatically become clickable links.

Limitations:

• Linked text cannot spread across multiple lines or have different text styles within it.
• If a linked word or phrase appears multiple times in the field, each occurrence will be linked, not just the first one.

Click here for a tutorial about links, buttons, and menus that demonstrates the "-haslinks" hint