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:
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.
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:
If you are an Isagenix rep and haven't figured out where the images are:
Good Luck!