Creating a hyperlink can be a bit tricky, because we need to:
-Add the image into a text box
-Create a link 'from' that image when it is clicked.
-Tell the link the destination to go to (the ID of where you want people to land). For this we need to go into the HTML.
Here are the detailed steps in 3 sections:
1. Creating Text Images
2. Finding the links in HTML
3. Making the link
1. Creating Text Images
Create your button/header/banner in Word, Publisher or Powerpoint or any programme that preferably enables you to enlarge/reduce the ‘image’. (Word doesn’t) Powerpoint is recommended because of its selection of shapes, shades, shadows and fills.
1. Home tab
2. Insert – Shapes – click to select and shape to size
3. SHAPE fill (colour)
4. SHAPE fix (round corners?)
5. SHADOW fix (drop lower right)
6. SHAPE (no outline)
7. Save your image as j.peg (see next note *)
Also save it as a Powerpoint.ppt
Another way with Powerpoint is to go to Smart Shapes or Quick Styles
When you’re satisfied with your result – note the on-screen size, the font and size used so that should you need to reduce or enlarge your image you alter your boundaries/font size to improve your image.
You alter your image saved at stage 8.
You will need to experiment to gauge the size you wish it to appear on your website from the dimensions created in Powerpoint e.g. the image below was 6cms x 2 cms on screen.(160 x 47 pixels).
Also you need to select a type size in the 24 to 36 pt range. When uploaded to Webweka it can be enlarged or reduced, but too small an image may not enlarge adequately.
In Webweka you can see the exact pixel size by studying the HTML code (see below under Finding the Link HTML) *The result in Powerpoint is an image on a full page (because Powerpoint is a slide show programme) so needs to be cropped. Open an editing programme like Irfanview or Picasa and crop it to your images limits. Save your cropped image.(7 above)
Your “word picture” is uploaded to Webweka through the IMAGE button.
Linking an Image to Text
– Navigation buttons
Webweka is based on the popular ‘endless page’ – no need for navigation - and SEARCH-CTRL F will get your visitor to the part they wish to view. However you may wish to establish traditional navigation buttons, or link content within the site --- so here’s how !
2. Finding the Link HTML
· for the image
We need to find the code line for both the image and the text before we can link. Viewing the code will not corrupt your site in any way – you will just be viewing and taking a note of both identifying numbers #text_.... and #image_....
To find the code for your image, RIGHT click on it. The menu that appears will show, at the bottom, Inspect Element or Source.
You will be switched to the HTML.(Developer Tools, the header says). Scroll down until you find a highlighted line.
In the case of our header, Letterpress in NZ this is the code
<img src=”../../system/draft_images/2104/original/LP_in_NZ_200x51.jpg?1373260619” alt=””>
This button is image 2104 – write it down as #image_2104
Close the HTML page and you’ll be back on your site page.
· for the text
Highlight the words you wish to link – e.g. Letterpress is alive in New Zealand
To find the code for your text, RIGHT click on it. The menu that appears will show, at the bottom, Inspect Element or Source.
You will be switched to the HTML.(Developer Tools, the header says). Scroll down until you find the highlighted line.
The words “Letterpress is alive in New Zealand” are highlighted and the TEXT number precedes this code – see below - “text_1473” which you would enter in your link as #text_1473. Write it down.
The same procedure applies if you wish to link text to text
3. Making the link
1. In EDIT mod
2. Click IMAGE box in CREATE
3. Upload your prepared button image from your file
4. When it appears in the IMAGE box RIGHT click, and select COPY IMAGE (this will “lift” it from the Image box)
5. Click TEXT box in CREATE
6. Click the pencil
7. RIGHT click
8. PASTE the button
9. LEFT Click the button TWICE – the image will go blue and the link/unlink chains will show above your image
10. In the Insert/Edit Link box enter the text or image number (Where you are pointing to) e.g. #text_1473
11. Click INSERT
12. Save in this Edit box (right bottom corner)
What you have done is pointed your image towards your selected text.
Close open boxes as you have now completed and saved your linkages.
Test your link by clicking on the button.
I suggest you don't Publish until you are happy that it all works ok.
Then you can get back to your current version if you need to.