Using Photoshop 5.5 and Imageready 2.0 to Create Image Tables - part 3 | WebReference

Using Photoshop 5.5 and Imageready 2.0 to Create Image Tables - part 3


Using Photoshop 5.5 and Imageready 2.0 to Create Image Tables

Part 3

With slice #1 still selected, next we set up attributes that will be translated to the final HTML file, which ImageReady will generate. The Slice dialog in Figure 4. demonstrates our options. We can indicate Type (in this case, an image), the Name of the image (nav_01), the file the button points to (product.html) and, if applicable, the target. As well, we can designate a message to appear in the browser status bar when the user rolls over the link. We can also set an Alt message.

It is important to note here that ImageReady allows us to set the optimization for one slice and apply it to other slices with likewise image attributes. This is done by using droplet icon on the Optimize palette, which is the downward pointing arrow in top right corner of the palette. To apply the image optimization of one slice to another, simply click on the slice you want to copy settings from and drag the droplet to a slice where you would like to apply the settings. Keep in mind that this method will apply the color palette of the first slice to others that the droplet is dragged on.

After you have set all your options and attributes for the slices, you are ready to save the file as HTML. To do this, choose File>Save Optimized As... from the File menu in ImageReady. This will bring up a the Save Optimized dialog where you can name the HTML file and also set other HTML-related preferences, such as HTML code formatting options. If, on the other hand, if you don't want to save your HTML as a separate file, but would rather copy the code to the clipboard so it may be dropped right into your HTML editor, you can choose Edit>Copy All Slices. The generated code is shown below in Figure 5:

<!-- ImageReady Slices (nav3.psd) -->
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="product.html" target="main"
			   onmouseover="window.status='See Our Products';  return true;"
			   onmouseout="window.status='';  return true;">
				<img src="images/nav2_01.gif" width="156" height="26" border="0" alt="Products"></a></td>
		<td>
			<img src="images/nav2_02.gif" width="16" height="26"></td>
	</tr>
	<tr>
		<td>
			<img src="images/nav2_03.gif" width="156" height="24"></td>
		<td>
			<img src="images/nav2_04.gif" width="16" height="24"></td>
	</tr>
	<tr>
		<td>
			<a href="order.html" target="main"
			   onmouseover="window.status='Order products here';  return true;"
			   onmouseout="window.status='';  return true;">
				<img src="images/nav2_05.gif" width="156" height="26" border="0" alt="Order Form"></a></td>
		<td>
			<img src="images/nav2_06.gif" width="16" height="26"></td>
	</tr>
	<tr>
		<td>
			<img src="images/nav2_07.gif" width="156" height="24"></td>
		<td>
			<img src="images/nav2_08.gif" width="16" height="24"></td>
	</tr>
	<tr>
		<td>
			<a href="contact.html" target="main"
			   onmouseover="window.status='Send us an email';  return true;"
			   onmouseout="window.status='';  return true;">
				<img src="images/nav2_09.gif" width="156" height="26" border="0" alt="contact"></a></td>
		<td>
			<img src="images/nav2_10.gif" width="16" height="26"></td>
	</tr>
	<tr>
		<td>
			<img src="images/nav2_11.gif" width="156" height="17"></td>
		<td>
			<img src="images/nav2_12.gif" width="16" height="17"></td>
	</tr>
</table>
<!-- End ImageReady Slices -->

Figure 5. Code generated by ImageReady

As you can see, ImageReady does a decent job of generating code, including the inline JavaScript that controls what is placed in the browser status bar when the user rolls over a link.

There is a range of other options available for slices, but these are beyond the scope of this article. The best way to discover the power and flexibility of the Photoshop-ImageReady duo is to play around with different settings and explore the various drop-downs of the Slices dialog.

Happy Web building!

Kurt Nimmo (nimmo@pcc.net) is a Web developer, designer, and HTML educator in Chicago.

To Return to Parts 1 and 2, Use Arrow Buttons

http://www.internet.com

Comments are welcome
and brought to you by webreference.com

Created: Dec. 7, 1999
Revised: Dec. 9, 1999

URL: http://webreference.com/authoring/graphics/imagetables/part3.html