How to make a clickable image

Visit www.allpestcherished.com (Owned by the author of this tutorial) for all your custom illustrated invitations for baby showers, birthday parties, and much more!

How to make a clickable image in HTML and add to your ZenCart website
by Jessie Schueler  

Zencart is a great shopping cart with a lot of functionality, however at some point you may want to offer free items or images that a customer can click on. This tutorial will show you how I to make clickable HTML images and insert them into your Zencart page. 

Difficulty: Beginner, with basic understanding of resizing images and FTP

I will be showing step-by-step how I created a free coloring sheet for my website, http://www.allpetscherished.com/. These free sheets are for personal use only, but they are great for making crafts, keeping the kids busy and you can print out as many as you want.

Step one: Image Preparation

Start with the image that you want to click to. Make sure that it is the size you want it, and save it to your folder. Now open it again and resize your image into a thumbnail size using an image resizing program (like Photoshop). I have reduced my image to 120 x 161 with a 72 dpi resolution.

In Photoshop, it’s Image > Image Size – then type 120 in the width. Click OK, then save for web. You can save this as a jpeg or gif image, whichever you prefer. Make sure you save this file in the folder with the bigger image.
 

Locate both files in your FTP program and upload to your server. We will be coding these next!

Step 2: HTML coding – let’s link it up!  

The basic HTML for a clickable picture (picture hyperlink) is:

<a href="URL of target site"><img src="photo URL">alt=”description here”</a>

So let’s break this down a bit further so you can see my example.

My thumbnail (smaller image) is called b_coloring_page2.jpg
When this is clicked I want it to go to b_coloring_page.jpg
So using textpad  or even a word document, I would write it like this: 
 

<a>href=”http://www.allpetscherished.com/coloringpages/b_coloring_page.jpg”><img src=http://www.allpetscherished.com/coloringpages/b_coloring_page2.jpg></a>

Step 3: Adding that Code to Zen 

Copy the code (CTRL C) and open up your Admin Panel. Create a new category if you haven’t done this already. Mine is called “Free Coloring Pages”. Click on the green circle  “e” to edit the category. Make sure you can edit in Text mode.

Then, paste your code (CTRL V) into the categories description box and click Save.

Open a browser and go to your site to test. Mine works perfect!

http://allpetscherished.com/my_online_store/index.php?main_page=index&cPath=81