webspot

how to link an image or a word





Linking allows your users to be transported into another window with the click of a button.  Anchor links allow you to send your users to another section of a page.  Either way, you need to direct them to where they need to go.  Here's how it's done...




Linking An Image
Linking An Image in the WYSIWYG Editor
Linking A Word
Anchor Links


Linking An Image

1.  Find an image you want to link and go to that page in editspot.

2.  To link a feature image or a body image, simply click the “link image” button under the image:  

Picture_1


3.  You will be prompted to put in the web address in the URL Link box or link an e-mail.

link_a_feature_or_body_image

4.  To link a URL, choose your target:

link_a_URL


Same Window: When selected, the current page will be replaced with the linked page.
New Window:  When selected, the linked page will show up in a new window (or tab, depending on browser settings).

You can also choose to link within your site itself.  To the left of the hand side of the link window is a map of your site:

link___site_map

As you can see, all of the page groups are represented (in this case, "/about", "/interests', and "/contact").  The "/contact" page group has no sub-pages underneath it, which is why it is shown as a 'page" and not a "folder."  By clicking the "folder" icon, you can see the sub-pages listed within that particular page group.

For example, if we click the "/interests" page group, we'll see the "/new_article" page listed underneath it:
 

site_map___new_article


By clicking on the "/new_article" page, that page will automatically be selected for the URL Link:

URL___new_article

This allows you the ability to link to any other page in your site without having to memorize each and every URL listed for each page of your site.


5.  To link an e-mail, choose "Email Link":

link_an_e_mail


E-mail Address:  Add the e-mail address you would like the clicked link sent to.
Subject: This subject line will be used for every linked e-mail.
Message Template:  This Template will be used in every linked e-mail.

When you are done, the resulting clicked link will show your e-mail, with a template and an address already attached (if you choose to input a template and subject line):

e_mail 



Linking An Image in the WYSIWYG Editor

1.  To link an image from the WYSIWYG Editor, select the image:

image_in_WYSIWYG 


2. Click the link icon in the WYSIWYG Toolbar: link_icon

3.  For the most part, you can follow steps 3 through 5 from the Linking An Image instructions, but there are a few more URL linking options in the linking window found in the WYSIWYG Editor than the feature image/body image linking window:

WYSIWYG_link_box


Ordinary Link/Same Window (jump out of frames): When selected, the current page will be replaced with the linked page.
New Window:  When selected, the linked page will show up in a new window (or tab, depending on browser settings).
Pop-up Window: When selected, the linked page will show up in a new window.  You may then select what parameters you would like with the new window:

link_editor_2

Size:  Choose the size of your Pop-Up Window by placing the pixel size in each box (eg 500 pixels by 900 pixels).
Name:  The name your Pop-Up Window will appear in the browser's heading.
Menu Bar:  Choose whether or not you want the menu bar visible.       
Toolbar:  Choose whether or not you want the toolbar visible.         
Location Bar:  Choose whether or not you want the location bar visible.    
Status Bar:  Choose whether or not you want the status bar visible.    
Scrollbars:  Choose whether or not you want scrollbars visible.             
Resizeable:  Choose whether or not you want the Pop-Up Window's size to be adjustable.



Linking a Word

1.  To link a word, highlight the word in the WYSIWYG Editor: 

linking_a_word_highlight


2. Click the link icon in the WYSIWYG Toolbar: link_icon

3.  Follow steps 3 through 5 from from the Linking An Image instructions.   When linked properly, the linked word will be highlighted:

linking_a_word_linked



Anchor Links

An Anchor Link allows you to link within a page.  The links at the top of this page, for example, are all anchor links.  They allow you to put a lot of information on a page without having to scroll down to find what you're looking for. 

1.  First, find the area within the page you want linked:

anchor_link___1


In the above example, when "Link" is clicked, I want the user to be sent to where "Anchor Link" is located on the page. 

2.  Place the cursor behind the text or image you want linked.

3.  Click the anchor link icon: anchor_link_icon
 
This will bring up a new anchor link window:

insert_anchor_


Here, you can name an anchor link.  This allows you to manage multiple anchor links throughout a page, so that you don't get confused as to what link goes where.  You should see a dashed blue line indicating where the anchor link is:

anchor_link___2


Note: The anchor link may appear to shift your text's or image's placement within the WYSIWYG Editor, but don't fret: the shift does not occur on the user's end.

4.  Once your anchor link has been named, save the document in order to access the link via the link window:

save_changes


5.  Go back into editing the body of the page and highlight the text or select the image you want to link:

anchor_link___3


5.  Click the insert link icon: link_icon
 
At the bottom of the link window is "Anchor-Link":

link_box___anchor


Select "Anchor-Link":

link_box___anchor_link_selected


Your list of named anchors will appear in the box underneath.  Select which anchor applies to the link you want and click "OK".

6.  Your anchor link is now set:

anchor_link___4


As you can see, your link is now highlighted (if it was a text link) and the dashed line of the anchor link ending point shows you where, when clicked, the link will take the user.

simple template