Creating a Clickable Image or Banner Ad in HTML

Buy from Melissa!Let's say that you are an Isagenix Independant Dealer and you want to add a clickable image to your website or Facebook page that will take people to your site to buy products.

In the case of Isagenix, they don't provide code, just images. So, let me show you how to get those images on your page and linking to your site.

You will need 2 things:

  • The URL that you want people to go to when they click.
  • The URL of the image that you want to display (and be clickable).

Example #1: A Clickable Logo

In our first example, we want an I logo graphic to be clickable and redirect to the web page of an Isagenix Dealer. In this case, my friend Melissa. These are the 2 URLs we will use:

The HTML Code for this would be:

<a href="http://melstephenson.isagenix.com" target="_blank"><img src="http://www.isagenix.com/us/en/file.ashx?id=0fb6969e-afaf-4cd6-8ba5-34d9d61c3973"></a>

It's simpler than it looks.  We are basically using and image tag <img> inside an anchor tag <a> along with some parameters.  So, <a><img></a> is the abbreviated version.

  • The URL with the destination goes in the anchor tag (in quotes) after the href=
  • The target="_blank" in the anchor tag tells the browser to open it in a new browser window.
  • The URL with the logo image goes in the image tag, also in quotes, and after the src=

Example #2: A Product Picture Linking To a Product Page

Let say we wanted to promote Isagenix 9-Day Cleanse.  This would be the code:

<a href="http://melstephenson.isagenix.com/us/en/nineday.dhtml" target="_blank"><img src="http://www.isagenix.com/us/en/file.ashx?id=f00f053e-109d-4709-85ee-bb963e6d577b"></a>

The problem is that this is a big image (576 pixels x 414 pixels).  Yikes!  We probably want it about 1/2 the size, or 288 pixels x 207.  To do that we add height and width parameters to the image tag and the browser will resize it.  It's up to you to provide the correct dimensions so that the proportions stay the same and it doesn't look squished or stretched.  Here's the updated code:

<a href="http://melstephenson.isagenix.com/us/en/nineday.dhtml" target="_blank"><img src="http://www.isagenix.com/us/en/file.ashx?id=f00f053e-109d-4709-85ee-bb963e6d577b" width="288" height="207"></a>

It will look like this:

Isagenix 9-Day Cleanse

If you are an Isagenix rep and haven't figured out where the images are:

  • Login to your webpage and go to: http://www.isagenix.com/us/en/marketingmaterials.dhtml
  • Click on Print and Web which will take you here (after you agree to the terms).
  • Click on Web
  • Pick the image you like (note the size in the description / preview)
  • Click download and it will open in the new window.
  • Copy the URL in the address bar of the new window with only the image.  That will be the URL you use in the image <img> tag.

Good Luck!