Hyper-Linking your pictures
Hi all,
I've now deleted the previous couple of blogs in favour of this one, in which English at least, seems to prevail in the main.
The following, although I specifically used it to get a live donation link running on this site, is perfectly applicable to any picture that you wish to create a clickable link from, just like anywhere else on the web. This could be a piccy of your favourite meal, linked to the URL of the resaurant that you eat it in.. or something else even.. :) But I digress..
Here we go, a little class in html for you all.
Above is the text string for the linkable image in my sidebar. I've put it in a text box, so you can copy, paste it straight into your own blog template.
The above text box shows where you should place the image, ideally so that it can be seen as soon as you have a visitor. Scroll down your template (on the Scribe template that I use, this is around 3/4 of the way down the template) until you get to the div id="sidebar" tag, as seen in the above text box. Enter the string as a copy and paste, immediately after that tag, click preview and check it out. Don't worry about the preview showing being a bit out of kilter, it seems to be a regular thing for me. You want to see it in real life.. open up your blog from your favourites. You may have to refresh a couple of times, but it'll turn up eventually.
If my piccie doesn't work on your site then you can upload your own picture to a new post, and create the link around the picture as follows, and this goes for any image that you want to link from.
..is similar to how the html text for your picture will look, once you've uploaded it, as seen when you click Edit HTML in the compose section of your blog. The bit you need to replace is the URL string, between " and ", not forgetting to include the full URL, including http://, or (https:// in the case of a secure site, such as in this example). You can see precisely what I mean if you go back to the first text box in this post. Once published it will link to the URL you want it to. Before publishing, click on preview, and just hold the mouse over the image in your post. You should, all being well, see the URL you have linked to, in the status bar of your browser.. (look just above the Start button)
This is the original image..
.. and how it behaves with nothing further done to it. (hold the mouse over the image and check the status bar at the bottom of your browser..)
..while this is the correctly linked image, as will be confirmed by checking out the status bar this time
Check back occasionally for more handy stuff like this. I'm no expert but if I find out how to do something useful, I'll always pass it on.. and if you have any questions about this, feel free to ask. If I don't know the answer, I'll try and find out for you.
Cheers
Liam
NB. Please only use this script, containing my picture if you are posting it via.. http://www.blogger.com ..as it's linked from their server. If you choose to try using this script on your non-blogger site, the chances are you will be graced with the presence of an image placeholder containing a red X. Not very aesthetically pleasing really :)
I've now deleted the previous couple of blogs in favour of this one, in which English at least, seems to prevail in the main.
The following, although I specifically used it to get a live donation link running on this site, is perfectly applicable to any picture that you wish to create a clickable link from, just like anywhere else on the web. This could be a piccy of your favourite meal, linked to the URL of the resaurant that you eat it in.. or something else even.. :) But I digress..
Here we go, a little class in html for you all.
Above is the text string for the linkable image in my sidebar. I've put it in a text box, so you can copy, paste it straight into your own blog template.
The above text box shows where you should place the image, ideally so that it can be seen as soon as you have a visitor. Scroll down your template (on the Scribe template that I use, this is around 3/4 of the way down the template) until you get to the div id="sidebar" tag, as seen in the above text box. Enter the string as a copy and paste, immediately after that tag, click preview and check it out. Don't worry about the preview showing being a bit out of kilter, it seems to be a regular thing for me. You want to see it in real life.. open up your blog from your favourites. You may have to refresh a couple of times, but it'll turn up eventually.
If my piccie doesn't work on your site then you can upload your own picture to a new post, and create the link around the picture as follows, and this goes for any image that you want to link from.
..is similar to how the html text for your picture will look, once you've uploaded it, as seen when you click Edit HTML in the compose section of your blog. The bit you need to replace is the URL string, between " and ", not forgetting to include the full URL, including http://, or (https:// in the case of a secure site, such as in this example). You can see precisely what I mean if you go back to the first text box in this post. Once published it will link to the URL you want it to. Before publishing, click on preview, and just hold the mouse over the image in your post. You should, all being well, see the URL you have linked to, in the status bar of your browser.. (look just above the Start button)
This is the original image..
.. and how it behaves with nothing further done to it. (hold the mouse over the image and check the status bar at the bottom of your browser..)
..while this is the correctly linked image, as will be confirmed by checking out the status bar this time
Check back occasionally for more handy stuff like this. I'm no expert but if I find out how to do something useful, I'll always pass it on.. and if you have any questions about this, feel free to ask. If I don't know the answer, I'll try and find out for you.
Cheers
Liam
NB. Please only use this script, containing my picture if you are posting it via.. http://www.blogger.com ..as it's linked from their server. If you choose to try using this script on your non-blogger site, the chances are you will be graced with the presence of an image placeholder containing a red X. Not very aesthetically pleasing really :)
posted by Liam | 6:09 PM
<< Home