Design & Publishing . / . WEB . / . PixelSmith . / .Slicing Graphics
Mr. Pixelsmith Slices JPG files

a reader asks us to now explain the difference between MAPS and SLICES..
Slicing images for tables,
or making image maps...


So we thought it would be easier just to show you than to talk a lot about it.

Maps: are described as coordinates of areas within a graphic on the page "map" which react to clicks, then deliver an "action" to the browser. Go ahead ... try it.

Red

Normal

Green

MAP

Text

Slice

Here is the actual code for the MAP at left above.

<MAP Name="Map">
<AREA Shape="Rect" coords = "0,0,107,22"  HREF="RResult.html">
<AREA Shape="Rect" coords = "0,23,107,53"  HREF="NResult.html">
<AREA Shape="Rect" coords = "0,54,107,82"  HREF="GResult.html">
</MAP>

You see the area, the coordinates, and the HREF "action" to be taken.
This block of code is at the BOTTOM of the html page. (Peek at the source and you'll see.)

The image link itself is:

<IMG SRC="Map.jpg" BORDER="0" USEMAP="#Map" ISMAP>

Note that the tag "USEMAP" has the attributes of an anchor "#Map" which tells the browser to go and find the MAP code (above), then decipher the coordinates, and perform the request.
ISMAP tells the browser that this is really a Map and should be handled as such.

Slices on the other hand are THREE individual JPG files, carefully cut apart out of the original art so that when put into a table with ZERO attributes (0=border, 0=padding, 0=spacing) they will appear to be a seamless picture. (Peek at that source too and you'll see.)
These "Slices" are then linked with traditional html tags.

<A HREF="Gresult.html"><IMG SRC="slice3.jpg" WIDTH="108" HEIGHT="29" BORDER="0"></A>

__ Generally, a SLICE will take more code, and be more problematic, yet be easier for the coder to build the html for. While MAPS are more streamlined, with less code (and some say load faster) they are much harder to build unless your software program does it for you. Ours does. (LOL)

Back to the Slicing article
.
.
.



Design & Publishing . / . WEB . / . Pixelsmith . / . Letters


Graphic Design .com The Design Center is a spam free website.Thank you for visiting today...
This is the Web Design & Review Web site at: http://www.graphic-design.com/Web/
Copyright 1997, 1998, 1999 WebDesign & Review, all rights reserved.

Thank you for visiting WebDesign & Review at http://www.graphic-design.com/web/ Notes: The screen shots herein represent the copyrighted works of their respective owners, and are used here for editorial demonstration purposes. Permission has been granted to display and review all sites in WebDesign & Review by the website owners. Not all areas of the online environment allow special characters such as the registration and trademark marks. This file will alert you to proprietary works that cannot be duplicated or distributed. Copyright 1996, 1997, 1998, 1999 Showker Graphic Arts, for the The Design & Publishing Center, ALL RIGHTS RESERVED. WebDesign & Review, Pixelsmith, WebEye are all trademarks for The Design & Publishing Center. Other products mentioned in these pages are the registered trademarks of their respective owners.
The Design & Publishing Center and WebDesign & Review are Affiliates of The
Graphic Design Network. Other Affiliates include: 60 Second Windows, News - Serve Network, The DTP Jumpstation, Photo Warehouse dot com, The Designers' Bookshelf, The User Group Network, The User Group Academy, Office Products, Furniture Systems dot com, Solace, Harrisonburg.org/">Harrisonburg.org, Shenandoah.org, SVTA.org, Guitar Picks Online, all of which are hosted at RICA.net -- copyright 1994 - 2000, The Graphic Design Network, Showker Graphic Arts & Design, Harrisonburg, VA. Trademarks and Legal Properties Statement