Creating Image Links


 www.blackeyedadmin.co.uk

So I’ve started using Black Eyed Admin to keep a personal record of the code that i regularly use to create the various links. A personal code library so to speak that saves time and effort for yours truly when i need whatever for a link, just copy and paste, amend as required, job done!

Off course you already know what to do! No Worries this is a code reminder / library for yours truly.

A while back i added a reminder for myself regards to adding text links, Black Eyed Admin HTML Text Links post, so, this time it’s the code for image links. As before this isn’t a how to guide, just a personal reminder for what I’ve used that will allow me to do whatever and keep doing what I do.

So here’s goes & just because … I’ll be using the following as a link: www.guerrillapodcasts.com

A Few things to remember:

  • The Image Source ~ The address where the image is stored
<img src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" />
  • The Title ~ Adding a title to the image becomes visible when the cursor is positioned over the image
<img title="Name your image or link in this space?" src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" />
  • Alternative Text ~ alternative text for the image if the image is not shown (old/slow browser)
<img src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" alt="Place your Alternative Text whatever here" />
  • Styling the Image ~ Add a coloured border, position the image, resize and position wherever on page
    • Add a Border ~ adds a space around the image, you decide on size & colour black / white or whatever
<img style="border=:10px solid white;" src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" />
  • Aligning the image
<img style="text-align: center;" src="Re Place image info In Here" />
  • Image Dimensions ~ Change the size of the image to suit what you want
    • width=”500″
    • height=”200″
<img src="Re Place image info In Here" width="500" height="200" />
  • Adding a Link ~ to a web page, image or wherever
<a href="http://www.guerrillapodcasts.com/"><img src="Re Place image info In Here" />
  • Targeting the Image Link ~ Decide if you wish the link to open a new browser page (_blank) or the same page(_self)
<a href="http://www.guerrillapodcasts.com/" target="_blank ><img src="Re Place image info In Here" />
<a href="http://www.guerrillapodcasts.com/" target="_self" ><img src="Re Place image info In Here" />

~ : : ~

~ : : ~

Do What You Do and change whatever to suit your needs for your space

The Following are examples one with style added and one without:

The Image

<img src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" />

The Image with style added (Title, Alternative Text, Border, Size, Link & Target)

 click here to visit www.guerrillapodcasts.com

<a title="Guerrilla Podcasts : www.guerrillapodcasts.com" href=" http://www.guerrillapodcasts.com/" target="_blank">
<img style="border: 10px solid white;" alt=" click here to visit www.guerrillapodcasts.com" src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" width="500" height="200" /></a>

The Image Repositioned & Resized


 click here to visit www.guerrillapodcasts.com

<p style="text-align: center;"><a title="Guerrilla Podcasts : www.guerrillapodcasts.com" href=" http://www.guerrillapodcasts.com/" target="_blank">
<img style="border: 5px solid yellow;" alt=" click here to visit www.guerrillapodcasts.com" src="http://www.guerrillapodcasts.com/photos/girls/thoughtshower/postheader.jpg" width="500" height="500" /></a></p>

~ Inabit ~