Test Index · Photo Borders · Table of sliced images - Rounded corners · Sliced images and manually linked · Overlap Images · Create a Watermark · Gif Png Transparency · Buttons-Image Links · Image Names · Image Theft · Lake Applet · Other applets · Slideshow1 · Slideshow2 · Slideshow3 · Galleries · DD Thumbnail Viewer · image map · xara thumbnail · Random Image · LOGO BRANDING · Animated Image · photo with sound

Slice and manually link photos

To create a curved edge for presenting images, etc, use a sliced image to create the look you want.

Start with 1 image and use a photo program to slice it into pieces.

(Technique is similar to image mapping but this is done manually instead of by the photo program)

This sample has 9 pieces to the image.

All samples shown are JPG but could be GIF or PNG.

All images placed into the same row of a table.

Cursor is placed at end of each line and image inserted.

In the design window, you will see spaces between images.

But when published, all the images are tight together.

After inserting the images in the table I chose a couple of the images to link.

Click VIDEOS or EXTRAS on the Ipod.

You will be taken to a different part of the page.

Video - anchor for link above - click a link, end up here!

Extras - anchor for link above - click a link, end up here!

This is what I see in my CSB design window:

To make your links:

In CSB/Trellix:

Right click an image, choose link (to page, file, etc)

I used URL style link so I could make a rollover TITLE tag.

My sample lined to an anchor on the same page.

If you put a TITLE or ALT tag into your link, do NOT put in the final "

This is the code for that table, images and links:

Note that my font size is set very small so the spacing is minimal.

All images are put into the SAME table row!

Linked images are shown in purple for emphasis. You would change your image names and sizes.

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="392" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0"

<tR>

<A HREF="#video" TITLE="Click here for Videos!"><IMG SRC="66a820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>

<A HREF="#extras" TITLE="Click here for Extras!"><IMG SRC="66f820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>

</tD>

</tR>

</TABLE>