Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Optimizing Design: Slicing : Page 3

Dividing a larger graphic into smaller pieces is called slicing. It increases your perceived bandwidith.


advertisement
Pseudo Imagemaps

Pseudo imagemaps are a way of increasing perceived bandwidth and offering the features of an imagemap at the same time.

One of the inherent problems of using imagemaps is that the graphics are often large and feel slow to download, especially over a modem. Solution? Try a pseudo imagemap.



With the pseudo imagemap technique, you break the image into sections and include links around the different sections. Pieces start appearing on your reader's screen quickly, proving immediate feedback. Think of a pseudo imagemap as being slices with links.

To create a pseudo imagemap, start with the graphic. Pick the image you want to use as your imagemap and figure out where it breaks into logical (and preferably square or rectangular) shapes. Then, use your graphics tools to divide the image into individual files, optimizing each for the fastest download.

In this example, we are creating a menu over an asteroid image. These are the four slices used to create a temporary Coolest on the Web menu page.

The first gif, obviously...



The second gif...

The third...

And the last gif, just spacer really. We could even use a table cell with a black background instead of the gif, but with the gif (which is very small) we know that our colors will match the other slices exactly.

Once you have created your graphic and split it into pieces, it's time to create the HTML code. To produce a graphic that appears seamless on a page, you have to bunch all the tags together with no spaces or line feeds in-between. This can make your code difficult to read, but if you add returns, some browsers will treat the returns as individual spaces and place a little sliver of white space in between the pieces of your pseudo imagemap.

The HTML for this pseudo imagemap menu is:

<a href="about.html"><img src="images/menu1.gif" border=0 width=400 height=168></a><br><a href="categories.html"><img src="images/menu2.gif" width=400 height=41 border=0></a><br><a href="nominate.html"><img src="images/menu3.gif" width=400 height=40 border=0></a><br><img src="images/menu4.gif" width=400 height=151>

Look at the code carefully and notice that:

  • All of the <>'s are flush against one another.

  • Anchor tags within the image tags create links between sections of the imagemap and specific URLs.

  • In the img tags we set the border equal to zero. This tells the browser to show no link border around the graphic. By avoiding the link border, the pieces of the graphic touch each other when they are displayed and no annoying purple active link line breaks up our graphic.

It's really quite a simple trick. A bit confusing to look at the HTML code perhaps, but the results are well worth the effort.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date