eBay technique: JavaScript thumbnails
Intermediate | Rating: 10.00 Votes: 6
Views: 5510 | By: hakoMike  |
| Category: General Subcategory: Misc | Date: 2006-11-16 07:44:31 |
|
1 2 3 4 Next |
Since many CMON'ers sell painted minis on eBay, I would lile to share my technique for embedding your own photo set into your auctions, including thumbnails that can be clicked to change a larger photo. Since eBay charges per photo that you place in your auction and limits the size of the photos included, this technique is helpful is presenting many detailed photos in an attractive and cost effective manner.
Prerequisites:
- Image Processing tool (I recommend GIMP, and it's free.)
- Photobucket account (again, free. We will use Photobucket in this tutorial to store the images.)
- the ability to copy/paste a url from one place to another
- Bravery in the face of simple HTML
- an eBay account with which to list auctions (optional, I suppose)
This tutorial does not require knowledge of html, but a basic knowledge will help.
First off, here is an example of what we are talking about: http://hakosoftware.com/pages/jsthumbs/
As you click on each of the thumbnails on the left of the large image, the large image changes to show a larger version of the thumbnail you clicked. The HTML to create this example page is the exact HTML I use to create auction listings, copied and pasted into the Item Description area.
Part 1: Basic HTML Overview
Again, you don't need to know HTML to use this technique, but a basic understanding of how HTML tags work will help you make better auction listings. If this part is too scary, or if you already know HTML, skip on to part 2.
HTML (HyperText Markup Language) is made up of tags and text. Tags are wrappers that tell the browser (Internet Explorer, Safari, Firefox, etc.) how to show the page.
Example:
This HTML: This text is <b>bold</b>.
Shows this: This text is bold.
The <b> and </b> are the bold tag. When the browser reads <b> it know it should start showing text in bold, and when it read </b> is knows it should stop showing text in bold. Most of HTML is in the <tag>something</tag> format. Some tags do not require ending tags, like the tag to show an image, but most do.
(Side note: the <b> tag is outdated but still usable at this point, but it makes a good example of an HTML tag. The current standard for changing text is to use a <span> tag, with a style attribute in it. <b>my bold text</b> is now <span style="font-weight:bold">my bold text</span>
In this technique, we will display images using the <img> tag, and then make them do something by adding an "OnClick" attribute to each image. OnClick does just what it says; when the viewer clicks on the image, do something. We'll talk more about this in a minute.
The <img> tag
To embed an image on a web page, use the <img> tag. <img> required no closing </img> tag. The simplest format is this:
<img src="http://coolminiornot.com/CMONlogoblack200607.jpg">
When the browser reads this tag, it fetches the image at the address in the "src" attribute and displays the image.
Before we go on, here's a preview of what the tags will look like that produces thumbnails that update the larget image when clicked:
<img onClick="change_pic('http://i3.photobuecket.com/albums/y57/hakoMike/Warmachine/Mercenaries/Ashlynn%2-dElyse/final4.jpg')" src="http://i3.photobucket.com/albums/y57/hakoMike/Warmachine/Mercenaries/Ashlynn%20dElyse/th_final4.jpg">
Now, so you get too freaked out, I'll put it in more simplified terms:
<img onClick='change_pic(bigpic_1)' src='thumbnail_1'>
|
|
1 2 3 4 Next |
JesterzUSMC
02 April 09 |  |
Rating: 10
Sweet!
|
mickc22
21 November 06 |  |
Rating: 10
nice one Mike, really handy, I've been playing about with some older pics, works a treat!-Mick
|
hakoMike
20 November 06 | |
Great addition, TobiWan. I have updated the source on the example page to add that style element.
|
TobiWan
20 November 06 |  |
Rating: 10
Nice idea! The thumbnail image tags still need the style="cursor:pointer;" attribute - makes it easier to understand that you can actually click on them! 
|
|
You are not logged in. |
If you would like to leave a comment and don't have an account, please signup.
You'll get access to Vote tracking so you will never see the same miniature twice (unless you want to) and many other enhancements to your browsing experience.
|
|
|
