My apologies for the name of the post. "Image Test" is a good example of post title drift. This started out as an attempt to see if I could
upload a picture, then I added examples and more points.
Now, it's a tutorial, for one of the easiest, yet sometimes least obvious, way to make your blog user friendly. Using images in your blog is easy, but using them effectively takes a bit of thinking. Maybe this article will make you think.
What I'll include here is several examples of simple but effective uses of images in a blog. After each example, I'll include the code, character for character (with exception to
the note, below) used to create that example.
- A URL.
- A Hyperlink.
- A Hyperlink, With A Hidden URL.
- A Hyperlink, With A Visible URL.
- A Hyperlink, With The Target Opening In A New Window.
- A Picture, Embedded In The Post.
- A Picture, Displayed Externally.
- A Picture, Displayed Externally, Opening In A New Window.
- A Button.
- A Button, With The Target Opening In A New Window.
- A Picture, with Text.
- A Button, with Text.
- A Picture, with no border.
- An Enlargeable Picture.
- An Enlargeable Picture, with A MouseOver Popup.
- An Enlargeable Picture, Opening In A New Window.
Now, since I have your attention, be advised that all example code below has been liberally seeded with gratuitous line breaks and spaces, to break up long lines of text, and thus prevent the usual
post / sidebar alignment problems. The gratuitous line breaks make the code easier to read - human eyes can only absorb so much information in one stream, which is why we break text into lines. But when you embed the code in your blog, those extra line breaks will break the code. Be sure to
remove all gratuitous line breaks from your code, before publishing. And if you're in any way curious about how I setup this page, and showed the HTML so neatly, with links from section to section, see my tutorial on
anchors and HTML. And you can always
examine the code for any specific page element, if you're using Firefox.
>> Top
A URL
Here is a URL. See how simple it is? http://blogging.nitecruzr.net/2006/07/image-test.html
http://blogging.nitecruzr.net/ 2006/07/image-test.html
A URL is simply the address of a file, somewhere on the web. In this example, it's the address of this web page.
>> Top
A Hyperlink, With A Hidden URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is hidden, unlike a
hyperlink with a visible URL. The hyperlink points to another example in this post. Click on the link, and see for yourself.
Check This Out <a href="#Picture"> Check This Out</a>
A hyperlink is simply any object (here, a caption, "Check This Out"), surrounded by a clickable URL. A hyperlink with a hidden URL is cleaner, and easier to read, than a
hyperlink with a visible URL. Plain text is easier on the eyes. Replace the caption with a picture, and you have
a button. Note that I used an
internal anchor ("#Picture") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between
how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With A Visible URL
Here is a hyperlink, that is, a phrase (text) with a URL attached, as a link. This URL is visible, unlike a
hyperlink with a hidden URL. The hyperlink points to another example in this post. Click on the link, and see for yourself.
http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture <a href="#Picture">a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture</a>
A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. A visible URL might be used in articles that you would plan to copy into a text document. When you copy text containing a visible URL, the copy target will contain useful information, unlike a
hyperlink with a hidden URL. Note that I used an
internal anchor ("http://blogging.nitecruzr.net/ 2006/07/image-test.html#Picture") in this example, rather than a simple URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html). Also note the difference between
how you create a hyperlink in the Blogger post editor, as opposed to many forums and other web site creators.
>> Top
A Hyperlink, With The Target Opening In A New Window
Here is a hyperlink, with the target opening in a new window. The hyperlink points to another example in this post. Click on the link, and see for yourself.
<a href="#Picture" target="_blank"><img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A hyperlink is simply any object (here, a visible URL), surrounded by a clickable URL. Adding '
target="_blank"' (note the preceding extra space!) makes the target contents open in a new window (or tab, depending upon your browser).
>> Top
An Embedded Picture
Here is a picture, embedded in the post. See how simple it is? You can't click on this picture. Try it and see. See the difference between this, and
an external picture?
<img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">
An embedded picture is simply a URL of a file containing an image, specified as an image. Surround it with
a hidden URL, and you have
a button. If you like, you can add
text beside and / or below, the picture.
>> Top
An External Picture Here is a link to a picture, displayed externally. See the difference between this, and
an embedded picture?
Check This Out <a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif">Check This Out</a>
An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL.
>> Top
An External Picture, Opening In A New Window
Here is a link to a picture, displayed externally. This will open a new window, to save the reader from having to use the Back button, or allow to compare the original display with the resulting display.
Check This Out <a href="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" target="_blank">Check This Out</a>
An external picture is simply a URL of a file containing an image, specified as a hyperlink. Or it's a caption ("Check This Out"), surrounded by a clickable URL. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any
anchor tag, with this result.
>> Top
A Button
Here is a button, that is, a picture with a URL attached, as a link. The button, as with
the hyperlink above, links to another example in this post. Click on the picture, and see for yourself.
<a href="#PictureText"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A button is simply
an embedded picture, surrounded by
a hidden URL. If you like, you can add
text beside and / or below, the picture. Making the button image isn't complicated. You can use any graphics or word processing program, that produces image files. Or, the right CSS / HTML code can be used to
make a simple button image. Note that I used an
internal anchor ("#PictureText") to another section in this tutorial, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html#PictureText). You can read about Anchors, which let you jump to a specific section of a post rather than to the top of the post, in
Putting Anchors, and HTML, In Your Posts
>> Top
A Button, With The Target Opening In A New Window
Here is a button, that is, a picture with a URL attached, as a link. The button, as with
the hyperlink above, links to another example in this post, and the target opens in a new window (or tab). Click on the picture, and see for yourself.
<a href="#PictureText" target="_blank"> <img src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif"></a>
A button is simply
an embedded picture, surrounded by
a hidden URL. If you like, you can add
text beside and / or below, the picture. Adding " target="_blank"" to the anchor tag makes the picture open in a new window. You can add " target="_blank"" to any
anchor tag, with this result. Note that I used an
internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With Text
Here is a picture, following text, with text beside it, and text below it. You can't click on this picture. Try it and see.
Here is text, beside the first picture.
Here is text, below the first picture.
Here is text, beside the second picture.
Here is text, below the second picture.
<img alt="Here is a first picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the first picture. <br clear="left" /> Here is text, below the first picture. <br /> <img alt="Here is a second picture" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;">Here is text, beside the second picture. <br clear="left" /> Here is text, below the second picture.
The break record (
"<br clear="left" />") is a key element here. You need the break, clearing on the left after that, to force text below the picture. As noted, this is a nonclickable picture. You could do the same, though, with a
clickable Blogger hosted photo. You may find additional ideas for positioning images and text together, in this
W3Schools Tutorial Exercise.
>> Top
A Button, With Text
Here is a button, following text, with text beside it, and text below it. A button is a clickable picture, that links to a post somewhere. This button, as with
the hyperlink above, links to another example in this post. Click on the button, and see for yourself.
Here is text, beside the button.
Here is text, below the button.
<a href="#PictureText"><img alt="Here is a button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"></a> Here is text, beside the button. <br clear="left" /> Here is text, below the button.
The break record (
"<br clear="left" />") is a key element here. Since the picture floats on the left, you need the break, clearing on the left after that, to force text below the picture.
Here is text, beside a second button.
Here is text, below the button.
<a href="#PictureText"><img alt="Here is a second button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> Here is text, beside a second button. <br clear="right" /> Here is text, below the button.
The break record (
"<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture.
Here is text, beside a third button. Here is text, below the button. <a href="#PictureText"><img alt="Here is a third button" border="0" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:right;"></a> <span style="float:right; text-align:right;">Here is text, beside a third button.</span> <br clear="right" /> <span style="float:right; text-align:right;">Here is text, below the button.</span>
The break record (
"<br clear="right" />") is a key element here. Since the picture floats on the right, you need the break, clearing on the right after that, to force text below the picture. Click on the buttons, and you'll see that they take you to another portion of this article. You could, just as easily, have them
take you to another picture. Note that I used an
internal anchor ("#PictureText") in this example, rather than a complete URL (http://blogging.nitecruzr.net/ 2006/07/image-test.html).
>> Top
A Picture, With No Border
Here are two pictures, the first has default style, with a border surrounding it. The second has no border.
Here is a picture, with a border.
Here is a picture, with no border.
<img alt="Here is a picture, with a border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="float:left;"> Here is a picture, with a border. <br clear="left" /><img alt="Here is a picture, with no border" src="http://bp3.blogger.com/_pzC_7PLtN-0/ SE1ocS9z0KI/AAAAAAAABJw/j794h4vOfYQ/s320/Check+This+Out.gif" style="border-width:0px; float:left;"> Here is a picture, with no border.
>> Top
An Enlargeable Picture
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
- A thumbnail copy of the picture.
- A full size copy of the picture.
The thumbnail copy is displayed in the post, with the full size copy linked to the thumbnail (instead of a jump to another post, you jump to the full size copy). If you upload your picture, but don't want it clickable, you simply edit the code, and you end up with
an embedded picture. Or you could link to another post, and use the picture as
a button. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out
the recipes.
Chuck's
Cabbage / Shrimp Salad And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's
Potato / Leek Soup This is totally healthy too. I picked this recipe up, while enjoying
my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "
<br clear="left" />" following the caption for each picture? As indicated in
A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
An Enlargeable Picture, With A MouseOver Popup
Now the above examples, when they include a URL embedded in a picture, create a jump to some web page (in my example above, simply to another example in this article). This is how most of my posts, that include pictures, link from post to post. And this is how most web articles link from article to article. If you ever examine the code created when you upload a picture to Blogger, though, you'll see something entirely different. When you upload a picture, Blogger creates two files.
- A thumbnail copy of the picture.
- A full size copy of the picture.
The thumbnail copy is displayed in the post, with the full size copy linked to the thumbnail (instead of a jump to another post, you jump to the full size copy). And to that, we can add a popup, with the title of the picture. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out
the recipes.
Chuck's
Cabbage / Shrimp Salad And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's
Potato / Leek Soup This is totally healthy too. I picked this recipe up, while enjoying
my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0048%201280.1.jpg" title="Chuck's Cabbage / Shrimp Salad"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/ 5304/92/1600/DSCF0018.jpg" title="Chuck's Potato / Leek Soup"><img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/ 5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/ 2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "
<br clear="left" />" following the caption for each picture? As indicated in
A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
An Enlargeable Picture, Opening In A New Window
The immediately above example,
An Enlargeable Picture, gives you two images to look at:
- A thumbnail copy, which you can see in the post, with the text.
- A full sized copy, which you can see by clicking on the thumbnail.
Maybe you would like the reader to examine the full sized picture, while reading the text. Most browsers have a context menu, generally accessed by right clicking the mouse on the object of interest - in this case the thumbnail picture. In the context menu, they'll probably have, among other selections
- Open Link In New Tab
- Open Link In New Window
Any time the reader wishes to see the linked picture in a new window or tab, he / she simply selects the appropriate context menu entry. If you wish to make it easier for the reader, you can add
target="_blank"
to the anchor link, and automatically open the full sized picture in a new tab or window. This is similar to the above example
A Picture, Displayed Externally, Opening In A New Window. Here are a couple recipe pictures, so I can demonstrate this. Click on the pictures, and see the full size photos. Then, check out
the recipes. Note that the final result, whether the picture opens in a new tab or window, will be according to the Tabbed Browsing settings in each readers browser. If the user elects to open new windows in a new tab, that's where the new picture will open.
Chuck's
Cabbage / Shrimp Salad And the best thing is, this is totally healthy (if you use low carb Cannola oil).
Chuck's
Potato / Leek Soup This is totally healthy too. I picked this recipe up, while enjoying
my current church. Other folks have liked it too.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0048%201280.1.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0048%201280.1.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2005/07/cabbage-shrimp-salad.html">Cabbage / Shrimp Salad</a> <br clear="left" /> And the best thing is, this is totally healthy (if you use low carb Cannola oil). <br> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/5304/92/1600/DSCF0018.jpg" target="_blank"> <img style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;"
src="http://photos1.blogger.com/blogger/5304/92/320/DSCF0018.jpg" border="0" alt="" /></a> <br /> Chuck's <a href="http://nitecruzrrecipes.blogspot.com/2006/03/potato-leek-soup.html">Potato / Leek Soup</a> <br clear="left" /> This is totally healthy too. I picked this recipe up, while enjoying <a href="http://martinezumc.blogspot.com/">my current church</a>. Other folks have liked it too. <br>
See the "
<br clear="left" />" following the caption for each picture? As indicated in
A Picture, With Text, it forces all subsequent pictures and text to start below the picture.
>> Top
For additional advice about using pictures in your posts, see
Arranging Pictures In Your Posts, and
Arranging Pictures In Your Posts, Side By Side. If you're in any way curious about how I setup this page, and showed the HTML so neatly, see my tutorial on
anchors and HTML. And you can always
examine the code for any specific page element, if you're using Firefox. Or check out the
W3 Schools tutorials, that tell you all about each HTML tag, as used above.
>> Top
