Creating a clickable picture

Pete and I ran the first AIM Digital Day recently, which is a day of training and instruction on digital marketing and retail for independent labels and artists in the UK.

One of the most often asked question during the day was ‘How exactly do we do that?’ especially in relation to embedding and html in general. So here’s a quick guide to embedding a picture as a clickable link into any site which allows you to input html.

The basic html is:

<a href=”X”><img src=”Y”></a>

Where X is the URL you want to link to, for example http://www.ticketmaster.com/brixtonacademy/myband.html or http://www.myspace.com/myband

This must include the http:// at the start of the URL as above.

And Y is the hosted image file that you want to use, for example:

http://www.photobucket.com/myband/flyer1.jpg

This gives you a piece of html that looks like this:

<a href=“http://www.ticketmaster.com/brixtonacademy/myband.html”><img src=“http://www.photobucket.com/myband/flyer1.jpg”></a>

This is very basically how to make a clickable image.

But if you want to go a little further you could enable your fans to put this onto their own Myspace profile or website etc, to really start virally pushing out the image and link.

By using another little piece of html code you can make, for example, a gig flyer that you have put onto your Myspace also display the html that fans need to embed it on their own page, right underneath the flyer.

This may look complicated but it is in fact fairly straight forward once you try it a few times:

<a href=“http://www.myspace.com/myband”><img src=“http://www.photobucket.com/myband/flyer1.jpg”></a><input type=”text” style=”width:290px;border:1px solid #fff;background-color:#000;color:#fff;margin-top:5px;” value=&quot;&lt; a href=&quot;http://www.myspace.com/myband.html&quot; &gt; &lt; img src=&quot;http://www.photobucket.com/myband/flyer1.jpg&quot; &gt;&lt ;/a&gt; &quot; />

This will produce you an eflyer plus a text box with a white background and black text containing the html that fans need to embed it onto their own page.

Here’s how it works:

This is your original eflyer:

<a href=“http://www.ticketmaster.com/brixtonacademy/myband.html”><img src=“http://www.photobucket.com/myband/flyer1.jpg”></a>

Then add in the following at the end of the flyer html code:

<input style=”width:290px;border:1px solid #fff;background-color:#000;color:#fff;margin-top:5px;” value= “X”/>

First change “290” as this sets the width of the box. This should be the same as the width of the flyer. To find out the width (in pixels) find the wherever the image is stored on your computer and either right-click (windows only) the file or hover your mouse over it to see the dimensions which will be something like 300 x 400, where 300 is the width and 400 the height.

You then replace 290 with 300 to set the width of the box. Then we need to replace the X at the end of the piece of code with the embed code for the flyer. This is what the fan will be able to copy and then embed onto their own site/social network.

We need to make sure that the code we put in underneath doesn’t just show as the flyer again, as if we were just to paste the same code in again for the eflyer it would just end up showing twice.

So take the eflyer embed code,

<a href=“http://www.myspace.com/myband”><img src=“http://www.photobucket.com/myband/flyer1.jpg”></a>

and replace all occurrences of the following characters:

<             replace with &lt;

>             replace with &gt;

“              replace with &quot;

&lt;a href=&quot;http://www.myspace.com/myband&quot; &lt; &gt;img src=&quot;http://www.photobucket.com/myband/flyer1.jpg&quot; &gt; &lt;/a&gt;

Then simply replace the X with this modified text

Then copy and paste the whole thing into wherever you like, Myspace or Website etc.