Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template,
Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials,
SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator

Javascript: Image Swap

This easy to follow inline Javascript is a great way to create click-to-enlarge image galleries. Or to display several pictures without loading your Web page full of images.

Besides the main image, you will want to create a second image to represent the main image. This can either be a graphic, or a thumbnail of the original image as we have done in the example below. You can also use tables to help format the positioning of the main image and thumbnails. If using this technique for a click-to-enlarge gallery, it works best to have all the photos the same size so the copy under the photos does not jump.

« CLICK TO ENLARGE »
     

<div align="center" style=" width: 224px; margin-top: 12px; padding: 12px; border: 1px solid #cccccc; margin-left: auto; margin-right: auto;">
<img src="img/img_swap_1.gif" width="200" height="225" border="0" alt="Image Swap Sample" name="swap" style="padding: 12px; border: 1px solid #cccccc; margin-bottom: 4px;"><br>
&laquo;&nbsp;CLICK TO ENLARGE&nbsp;&raquo;<br>
<img src="img/img_swap_1_s.gif" width="50" height="56" alt="Thumbnail" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_1.gif';">&nbsp;
<img src="img/img_swap_2_s.gif" width="50" height="56" alt="Thumbnail" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_2.gif';">&nbsp;
<img src="img/img_swap_3_s.gif" width="50" height="56" alt="Thumbnail" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_3.gif';">&nbsp;
<img src="img/img_swap_4_s.gif" width="50" height="56" alt="Thumbnail" style="margin-top: 4px;" onClick="document.swap.src='img/img_swap_4.gif';">
</div>

HTMLTutorials

• HTML/CSS Tutorials
• Introduction to HTML
• What is an URL?
• Browser Safe Fonts
• Formatting Your Text
• <p>, <br>, <hr>
• The Marquee Tag
• Adding/Sizing Images
• Text/Image Links
• Making Lists
• Tables: The Basics
• Table Backgrounds
• Colspan, Rowspan
• Sample Tables
• Color Values

CSSTutorials

• Introduction to CSS
• Backgrounds/Color
• <div>, <span>
• Formatting Text
• Formatting Lists
• Images
• Style Your Links
• Tables and CSS
• Fun with CSS

JavascriptTutorials

• Rollover Buttons
• Image Swap
• Easy Popup Windows

eBayTutorials

• eBay Related Questions
• Your eBay Store
• Self Hosting Photos

OtherTutorials

• Photo Size/Compression
• Using Irfanview
• Using TagBot
• Speaking Geek

Create Your Auction Listing FREE

Use our FREE online Auction template creator. Choose from many backgrounds or use or own. We host all images except your photos and logo. Easy to use! Try now!

Web Safe Fonts

Building your own Web Site or Auction Listing and not sure what the best fonts to use are? Find out now!