<a name="1005700"> </a>Rollovers are interactive objects that can change in appearance when you click or point to them. They are often used as navigation tools on the Web. For example, you can make a button change color when it is clicked or display text when you point to it.
</p>
<p id="1005703" class="Body">
<a name="1005703"> </a>The rollover effect is accomplished in the Web browser using JavaScript image swapping. The idea is simple: each rollover area uses two or more separate images of the same dimensions. In response to a user action (like moving the pointer over the image), one image is quickly replaced by another.
<a name="1005517"> </a><i>A rollover in the Mouse out state (top) and the Mouse over state (bottom).
</i></p>
<p id="1005518" class="Body">
<a name="1005518"> </a>In effect, this creates a simple animation, and each of the separate images can be thought of as frames in that animation. For our purposes, we refer to each frame as a "state." Corel Painter supports three possible states for each rollover:
</p>
<ul>
<li class="SmartList1"><a name="1005522"> </a><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Mouse out</span><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline"> - </span>This is the default image. Corel Painter displays it when the page first loads, and also when the pointer moves off the rollover. If the Web browser doesn't support JavaScript image swapping, this image is the only one that will be displayed.</li>
<li class="SmartList1"><a name="1005526"> </a><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Mouse over </span><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">- </span>This image displays when the pointer moves over the rollover.</li>
<li class="SmartList1"><a name="1005527"> </a><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Mouse click</span><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline"> -</span> This image displays when the user clicks the rollover. When the user releases the mouse button, the Mouse out image is displayed again.</li>
</ul>
<p id="1005528" class="Body">
<a name="1005528"> </a>Not all browser versions support these states. The Mouse over and Mouse out states display in browsers that support JavaScript 1.1 (Netscape Navigator 3.0 and higher and Microsoft Internet Explorer 4.0 and higher).
</p>
<p id="1005529" class="Body">
<a name="1005529"> </a>The Mouse click state displays in browsers that support JavaScript 1.2 (Netscape Navigator 4.0 and higher and Microsoft Internet Explorer 4.0 and higher). Browsers that do not support these versions of JavaScript (like Netscape Navigator 2.0 and Microsoft Internet Explorer 3.0), or that don't implement JavaScript at all, do not display rollover effects.
</p>
<h3 id="1008100" class="Heading2">
<a name="1008100"> </a>Creating Rollovers from Image Slices
</h3>
<p id="1005530" class="Body">
<a name="1005530"> </a>Using the Image Slicer, you can divide your image into rectangular areas called slices. Each slice can have one of the following rollover state combinations:
<li class="SmartList1"><a name="1005532"> </a><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Mouse over-out </span><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">-</span> The slice has two states: Mouse over and Mouse out.</li>
<li class="SmartList1"><a name="1005533"> </a><span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Mouse over-out-click </span>- The slice has three states: Mouse over, Mouse out, and Mouse click. </li>
</ul>
<p id="1005534" class="Body">
<a name="1005534"> </a>A single image can contain different slices with different rollover combinations. This means that one slice can be set to Mouse over - out, another slice can be set to Mouse over - out - click, another slice can be set to No rollover, and so on.
</p>
<p id="1008152" class="Body">
<a name="1008152"> </a>For more information about the Image Slicer, refer to <a href="21-Web6.html#1008411">"Using the Image Slicer"</a>. For more information about setting the number of rollover states, refer to the procedure <a href="21-Web6.html#1008549">"To set slice options:"</a>.
</p>
<p id="1005538" class="Body">
<a name="1005538"> </a>Before using the Image Slicer, you must carefully analyze your image.
</p>
<ul>
<li class="SmartList1"><a name="1005539"> </a>Which image areas should have rollover effects?</li>
<li class="SmartList1"><a name="1005540"> </a>Which rollover state combinations (see above) will be used for each area?</li>
<li class="SmartList1"><a name="1005541"> </a>How will you create the rollover states for each of these areas?</li>
</ul>
<p id="1005542" class="Body">
<a name="1005542"> </a>The third item in this list deserves special note. Since each rollover area must have two or three separate states, you must decide how you will represent each of these states.
</p>
<p id="1005543" class="Body">
<a name="1005543"> </a>The most common method of representing states is to use multiple layers (one for each state), then hide and show them, as necessary. Another option is to use Shapes or Dynamic Text, then redefine their attributes (color, opacity, size, and so on) for each state.
</p>
<p id="1005544" class="Body">
<a name="1005544"> </a>Whatever method you choose, make sure you can easily move between states for each slice. This is necessary when exporting states using the Image Slicer.
</p>
<p id="1005545" class="Body">
<a name="1005545"> </a>Press <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Option</span>+click (Mac OS) or <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">Alt</span>+click (Windows) to control alignment when duplicating layers for use in rollovers. If in doubt, check layer alignment by double-clicking each layer and verifying the Position > Top and Position > Left fields. Make any necessary adjustments in alignment by typing numbers into these fields.
</p>
<p id="1005549" class="Body">
<a name="1005549"> </a>To define rollovers with the Image Slicer, follow the general steps below. For detailed information, refer to the procedures in <a href="21-Web6.html#1008479">"Working with Image Slices"</a>.
</p>
<h5 id="1005550" class="ToDoHead">
<a name="1005550"> </a>To define rollovers
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1005551"> </a>Set up your image so you can easily move between states for each rollover area or slice. </li>
<li class="SmartList1" value="2"><a name="1005552"> </a>Use the Image Slicer's slice tools to divide the image. Each rollover area in the image should occupy its own slice. </li>
<li class="SmartList1" value="3"><a name="1005553"> </a>For each rollover slice, specify the supported rollover states (Mouse over - out or Mouse over - out - click). You do this by choosing an option from the Rollover State pop-up menu in the Image Slicer dialog box. For more information, refer to the procedure, <a href="21-Web6.html#1008549">"To set slice options:"</a>.</li>
</ol>
<h3 id="1005555" class="Heading2">
<a name="1005555"> </a>Exporting Rollover Slices
</h3>
<p id="1005556" class="Body">
<a name="1005556"> </a>Once you have defined slices, you are ready to export the slices and the associated HTML file. You must do a separate export operation for each rollover state.
</p>
<p id="1005557" class="Body">
<a name="1005557"> </a>Because there are two or three possible states, you must do two or three separate export operations. All the Mouse out (default) images are exported together, all the Mouse over images are exported together, and all the Mouse click images (if any) are exported together.
</p>
<h5 id="1005558" class="ToDoHead">
<a name="1005558"> </a>To export rollover slices
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1005559"> </a>Set up your image so that all slices display their Mouse out (default) state. </li>
<p id="1005560" class="ToDoBody">
<a name="1005560"> </a>This is how you want slices to appear when the Web page first loads. As mentioned in <a href="21-Web7.html#1008100">"Creating Rollovers from Image Slices"</a>, this is often done by hiding or showing layers, or by changing the attributes of Shapes or Dynamic Text.
</p>
<li class="SmartList1" value="2"><a name="1005570"> </a>On the Layers palette, double-click the Image Slicing layer in the Layer list.</li>
<li class="SmartList1" value="3"><a name="1008661"> </a>In the Image Slicer dialog box, click Export Settings for Current Image State.</li>
<li class="SmartList1" value="4"><a name="1005571"> </a>In the Export Settings dialog box, enter the HTML and image export locations. </li>
<li class="SmartList1" value="5"><a name="1005572"> </a>Enable the Include JavaScript check box, and enable the Mouse out (default) option.</li>
<a name="1005577"> </a>Corel Painter exports the slices and the HTML file.
</p>
<li class="SmartList1" value="7"><a name="1005578"> </a>Click OK in the Image Slicer dialog to return to the image.</li>
<li class="SmartList1" value="8"><a name="1005579"> </a>Set up the image so that all slices with rollovers display their Mouse over state. </li>
<p id="1005580" class="ToDoBody">
<a name="1005580"> </a>This is how you want slices to look when the user's cursor passes over them. You can choose to do this by manipulating layers in your image.
</p>
<li class="SmartList1" value="9"><a name="1005581"> </a>On the Layers palette, double-click the Image Slicing layer in the Layer list.</li>
<li class="SmartList1" value="10"><a name="1008676"> </a>In the Image Slicer dialog box, click Export Settings for Current Image State.</li>
<li class="SmartList1" value="11"><a name="1005582"> </a>In the Export Settings dialog box, enable the Include JavaScript check box, and enable the Mouse over option.</li>
<a name="1005587"> </a>Corel Painter exports the Mouse over slices and displays a confirmation message.
</p>
<li class="SmartList1" value="13"><a name="1008705"> </a>Click OK in the Image Slicer dialog to return to the image.</li>
<p id="1005588" class="ToDoBody">
<a name="1005588"> </a>If slices in your image have a Mouse click state, repeat steps 8 through 13 for this state.
</p>
<li class="SmartList1" value="14"><a name="1018114"> </a>Load the exported HTML file into your Web browser and test the rollover effects to make sure they work as you intended.</li>
<li class="SmartList1"><a name="1018116"> </a>You must exit the Image Slicer dialog to manipulate the image. </li>
<li class="SmartList1"><a name="1005590"> </a>It's important not to modify the image slice settings in any way between each of these export operations (for example, do not change any slice name or resize/add slices). Any changes you make may result in a nonfunctional HTML file. If you decide to modify one or more slice settings, you must repeat the export process from the beginning.</li>
