Home » Squidoo Community » Lensmaking Tips » Advanced Lensmaking Tips

Image Slicing Makes Menus Look Cool

Ranked #703 in Squidoo Community, #92,287 overall

How to Make a Navigation Menu with Image Slices

Example of Image Slicing:

Sightseeing AthensMuseums of AthensTemple of Apollo at DelphiPalace of MycenaePalace of TirynsSanctuary of EpidaurosCity of Nauplion (Nafplio), GreeceIsland of Mykonos, Greece

This is a web 1.0 technique for creating a graphics-based navigation menu:

  • Slice an image into pieces in a graphics program
  • Save the pieces as separate graphics
  • Reassemble them on your webpage
  • Make each graphic a clickable link
Update June 2011: On Squidoo, we can no longer post images in our bio boxes. However, this image slicing demo DOES still work. Use it in an Introduction module or text module to create a fancy navigation menu.

Image Credit: Phre3a on SXC

Before Image Slicing, We Had Image Maps

1993: This Was the Size of a Computer Screen

I've been using this technique since 1993, when I created the original image map for the Perseus Project webpage. (The Wayback Machine archived it in 1996).

dahboard of Original Perseus project Webpage


I called this graphic the "Dashboard." DId I start a trend?

My design was ugly as BLINK, since I drew the gifs. (Geek note: my inspiration was the Star Trek: Next Generation computer interface.) But at least it was above the fold... something that neither Squidoo nor Perseus can seem to keep in their heads.
Important!

Above the Fold Is Gold

This is a fundamental tenet of web design. The phrase comes from newspapers, which try to get killer content above the fold to draw in readers.

On the web, visitors won't look below the fold, or first screen, unless the "above the fold" content gives them an idea of what's on the page and whether they want to read it.

An attractive table of contents is one way to satisfy this need.

Image Maps Then And Now

Different Ways to Do Image Maps

Image maps are basically a table of contents using a large image divided into sections. We use them because they're more eye-catching than plain text.

HTML Image Maps, Web 0.5: In fact, my "dashboard" image above was not sliced into pieces. In the early days, we used non-standard HTML codes called Image Maps, defining zones on a single image as "areas" which were clickable links.

Image Slicing, Web 1.0: Then people realized that we could cut a graphic into pieces and make each piece a clickable link. This is the method I've used on Squidoo (see next section).

CSS Image Maps, Web 2.0: With CSS, image slicing has fallen out of favor because (a) search engines can only read text, not a picture of text on a graphic (b) Visually impaired web users depend on text links and (c) we can then do semantic markup. So we've returned to using plain text with HTML links. Then we use CSS to apply background images and define the rectangular shapes of each link.

Unfortunately, we can't do CSS Image Maps on Squidoo, because it requires CSS classes, which we can't access. So for those who are NOT on Squidoo, here are good tutorials on CSS image maps:
CSS Image Map Demo
This is a simple, clear demonstration of the technique, but it's so simple you may need a more in-depth tutorial to understand what he did.
CSS Image Maps: A Beginner’s Guide | Noobcube
Good introduction to making image maps using CSS.
Image Map Tool - On-line Image Map Creator - HTML & CSS
Basic online html image mapper tool. No software to download. Use images from the web or your PC. Load image, map out your links, click "get code," then the "CSS Code" tab at top to get the CSS version.

Image Slicing Adapted For Squidoo

Did I Mention Above the Fold?!

Squidoo Bio Box Navigation MenuA few years ago, Squidoo added an obnoxious Greet Box (now defunct) along the top of every lens which directed visitors to visit OTHER lenses as soon as they arrived.

In response, I created a slick-looking navigation menu / table of contents above the fold to direct visitors back to my content. The bio box was about the only place I could do it, but it truncated text with "More..." after 135 characters. So I turned to a graphics-only menu.

Here's what the graphic looks like in Photoshop, and here's the code I put in my bio box.

<p style="width: 274px; padding: 2px; padding-top: 0px; margin-top: 0px; margin-bottom: 20px;"><a href=http://www.squidoo.com/odyssey title="Part I: Arrival"><img src=http://www.istad.org/odyssey/tour-athens.jpg alt="Sightseeing Athens"></a><a href=http://www.squidoo.com/odyssey2 title="Part II: Acropolis of Athens"><img src=http://www.istad.org/odyssey/acropolis-athens.jpg title="Part II: Acropolis of Athens"></a>
...
[etc, etc, etc for each different link + image]</p>

Part One: Prepare the Graphics

How I Created the Image Slice Navigation Menu

Preparation: Measure the size of the webpage where you'll be placing the image. Usually you'll just need to worry about the width; the page contents below the image can be pushed farther down by the image as needed.

On Squidoo, the width of a text module is 590 pixels, so your background image must be 590 pixels wide or less. If it's in the introduction module, subtract the width of the lens logo from 590 pixels to find the width of the available space.

The hardest part is dividing the picture neatly into slices that all fit together without overlapping or leaving out parts of the picture.

Here's how:
  • 1Upload the background image into Photoshop or Imageready. You need some program that lets you slice an image.
  • 2Crop/scale the image to the desired width. Make a note of this width somewhere (in pixels).
  • 3Slice Tool in PhotoshopPick the Slice Tool (right).

    Using the slice tool, divide the entire image into rectangular zones.

    I recommend keeping it as simple as possible, cutting the picture into horizontal strips the whole width of the picture as I did here. It's possible to chop up a picture in more complicated layouts, but reassembling them can be squirrelly.

    Switch to the Slice Selection tool if you need to move or resize a "slice" rectangle.
  • 4With the slice selection tool, double-click to select each graphic and give it a name. Don't end the name with .jpg since Photoshop does that when it saves all the slices. Ignore the other parameters; you don't need them.
  • 5Make sure the slices TOUCH but do not overlap. Make sure you've completely covered the photo: don't leave gaps at the edges.
  • 6Once you're happy with the slices, Save your work as a regular Photoshop document. That way, you'll be able to edit/add slices later. (Tip: you can show/hide Slices outlines under the "View" menu, waaaaay down under "Extras").
  • 7Pick "Save for Web..." and save Images Only. Photoshop will save ALL the slices as individual graphics in a folder.
  • 8Upload all those graphics into a folder (not necessary, but it's easier to find them later) on your image host. See how to upload images if you don't have an image host.

    Leave this browser window open, showing the images you uploaded. You'll need their URLs below, in step 3.

Part Two: Position The Image Slices in HTML

What to Put in a Squidoo Text Module

I recommend using a text editing program before copying everything over.
  • 1Now you start your image map. To make sure there's nothing to the left that's going to screw up our layout, we use clear.

    <p style="clear: left; width: [width of your graphic]px;">
  • 2Without skipping a line, start the HTML for the first link in your navigation menu:

    <a href="http://www.squidoo.com/linkname" title="Text You Want to Pop Up">

    The title is optional. That's the text that pops up when your cursor hovers over the graphic.
  • 3Copy and paste the URL of the first image in the set:

    <a href="http://www.imagehost.com/folder/imagename.jpg" style="padding:0px;margin:0px;" alt="Name of the link if it were a text link">

    The alternate name for the graphic is optional. It helps search engines identify what links are, since they can't read pictures of text.
  • 4Without skipping a line, put this after the image to close the link you started in step 2: </a>
  • 5Repeat steps 2-4 for each graphic.
  • 6Now close off the paragraph you started earlier with: </p>
  • 7All done! Now EDIT your lens, click "Lens Bio" in the sidebar, and paste this whole mess of codes into your "custom bio" for that lens. SAVE it.
  • 8Publish the lens and view it to see if it worked.

Poll Module: Are You Going to Try It?

Now that you know how it works...

Loading poll. Please Wait...

Some Of My Other (Easier) Squidoo Tutorials

Hopefully Some of These Are Helpful

Loading

Guestbook

Thank For Stopping By

Twitter Share on Facebook Digg Stumbleupon Delicious Email It

Like it? Please share it! Or just like it (below).

  • MSchindel May 23, 2012 @ 4:20 pm | delete
    Great tutorial - thanks so much!
  • ChapelHillFiddler Jan 31, 2012 @ 7:16 am | delete
    I only just made my first imagemap yesterday (I am a hand coder). What I wish this lens included: why is image slicing better than an image map? Thanks for the ideas.
  • Greekgeek Mar 29, 2012 @ 2:29 pm | delete
    Image slicing works on Squidoo, image maps don't. ;)

    I think actually CSS image maps may be better out in the real world, but I tend not to explain things on Squidoo that don't work on Squidoo.
  • nyfamily5 Mar 13, 2011 @ 8:09 am | delete
    Wonderful information. Blessed
Show All

by

Greekgeek

Storyteller, former Latin teacher, student of mythology and the ancient world: I've worn many hats, but always I've dabbled in computers and the web.

Until... more »

Feeling creative? Create a Lens!

Explore related pages

Related Tags