CorelDRAW X5 The Official Guide part 94 ppsx

Creating Rollover Buttons
Almost any object you draw can be made into a rollover that reacts to cursor actions, so you
can liven up your published document with simple animated effects and hyperlinks. Cursor
actions are events such as when a user holds or passes a cursor over the object, or clicks the
object by using a mouse.
When you’re creating rollovers, three basic states can be defined: Normal, Over, and
Down. The Normal state sets how an object appears in its “static” state—when the cursor is
not over or clicked on the object on the web page. The Over state sets the appearance of the
object whenever a cursor is over it. The Down state reveals the object in the rollover group
when the user’s cursor is above the object and has clicked their mouse button. By varying
what the graphic looks like in these states, you can create interesting visual effects and give
your users meaningful feedback related to their cursor movement.
This is fun stuff and deserves a tutorial. The following steps show how to make a region
interactive when an object (or group of objects) is displayed on a web page. Although the
button will react to cursor actions when you’ve completed the tutorial, the actions will not
link to anything; linking a button is covered later in this chapter—let’s concentrate on the art
for the button first. Let’s suppose you want a button that tells the visitor that something is for
sale: a button with a $ symbol plays in several countries, or use a currency symbol of your
preference in this example. To continue the concept here, the action a visitor would take
would be to click to buy the item; therefore, when visitors hover their cursor over and/or
click the button, the button should change to a different look. In this example the button will
change its text from a $ symbol to an official-looking “SOLD” message. Yep, as ambitious
as this might sound, all you need to do is to follow these steps…
Creating Different Looks for Rollover States
1. Create a button object, make it as fancy as you like (Effects | Emboss works well),
but keep the size of the button to approximately the size you’d want it on your web
page—under an inch is fine for this example. Then with the Text tool, type $ and
give the symbol a fill color that contrasts with the button color.
2. Select all the objects (CTRL+A), and then click the Create Rollover button on the
toolbar to let CorelDRAW know this is going to be a rollover button once you’ve
finished, as shown here.

Ill 28-2
894 CorelDRAW X5 The Official Guide
Several objects selected
Less than 1"
3. With the object now defined as a rollover object, all the states on the Active Rollover
State selector display the same group of objects you selected…and it’s time to create
a change now. Click the Edit Rollover button to enter the editing state, as shown
here, and then choose Over from the selector list.
Ill 28-3
4. Edit your button; in the next illustration the embossed circle has actually been
replaced with a polygon object. You can replace objects, change the fill, do just
about anything you like because this editing state is not a “normal” page view in
CorelDRAW’s drawing window. Some tricky stuff is going on behind the scenes,
and if you choose to delete a shape and replace it now, you haven’t really deleted it.
You remove an object from a state’s view, in this case from the Over state, but in the
Normal state all your original objects are still there. Similarly, delete the $ and then
with the Text tool, type SOLD in an interesting font.
Ill 28-4
5. For the sake of testing all these features, let’s suppose that the Over state, the SOLD
button, is also good for the Down state, the state that occurs when the visitor clicks
the button. By default, the Normal state was assigned to all three available states
when you first made the collection of objects a rollover button. First, click the Active
Rollover State selector and choose Down; a view of the Normal state objects appears.
6. Trash the contents of the Down state by clicking the Deletes Rollover State trashcan
button.
7. Choose Over from the selector, and then click the Duplicates State button. The Over
state now duplicates the following unassigned state (Down).
CHAPTER 28: Basic HTML Page Layout and Publishing 895
28
Choose state

Replacement objects
8. Mission accomplished! Click the Finish Editing Rollover button (shown here), and
save this file to CDR file format.
Ill 28-5
9. Oh, yeah, you want to see your creation in action! CorelDRAW will preview your
interactive button right on the drawing page. Click the Live Preview Of Rollovers
button; before you move your cursor over the button, it should look like it did when
you set it to Normal—your original group of objects. Move your cursor over the
button, and it should show the Over state, as it will in the Down state (when you
click the button) because you duplicated Over to Down in the tutorial. After
previewing the effect, click the Live Preview Of Rollovers icon again to deactivate
the live preview, because live drawings can get a little disconcerting.
Look at rollover.cdr and take it apart to better see the wealth of creative possibilities
in your own work. This setup has three different states, and when you click the button, it
changes shape and sort of squishes away from you. Just about any edit you can perform
on objects, including totally replacing them, can be used in a Rollover button.
The Internet toolbar also has other rollover-related commands to objects, as follows:
●
Edit Rollover This was covered earlier, but you should know that even after you
think you’re finished, rollovers can be edited a week or a year from now.
●
Extract All Objects From Rollover This is a destructive edit! Think about this
command twice before you undo all your rollover work. Depending on the
replacement objects you’ve built into a rollover, use this button to view and edit
everything CorelDRAW has hidden while the document was a rollover. The objects
will be stacked on top of each other, so you will have to change the stack order or
drag them apart to see them.
Rollover buttons can't be edited while the Live Preview Of Rollovers option is on.
To edit any button, first disable this option by clicking the button. You can turn on
Live Preview again when you finish editing the button.

●
Duplicates State Covered briefly in the tutorial, this button is used to copy the
Normal state to Over and Down states if you have deleted them using the command
button, discussed next.
896 CorelDRAW X5 The Official Guide
●
Deletes Rollover State This deserves a little more quality time: while editing any
rollover state, you can delete the object(s) representing it by clicking this button.
After a state has been deleted, there will be no object to represent it, so the rollover
state will appear blank. If needed, use the Duplicates State button to create an exact
copy of the Normal state back into a blank state to avoid the need to re-create the
object(s) used for this state. If you’ve deleted a state, be sure to set the Active
Rollover State list back to Normal, or your button will be blank during an action
when it’s put up on a web page.
You’ve just created a three-step rollover button! It is an interesting graphic effect, and
sometimes you might want to use it just the way it is—a sort of graphic hide-and-seek game.
Most of the time, however, you’ll want something additional to happen; you want the action
of clicking the link to activate a hyperlink, and the user to be taken to the link’s destination.
The destination can be a bookmark location on the current page, like the top or bottom of
the page, or the destination might be another web page or URL location altogether. How to
make the rollover or any other element do something is presented in the following section.
Setting Internet Object Behavior
While any individual object or rollover state is selected, you can set its behavior as a web
object to either a URL or an Internet bookmark using options in the Behavior selector on the
Internet toolbar, shown here.
Ill 28-6
Adding URL Behavior
You can apply hyperlinks to any object using this option. For example, Corel’s URL is http://
www.corel.com. Internet addresses must be preceded with the correct Internet protocol
prefix (such as http://, https://, or ftp://). For example, if you’re linking to www.corel.com,

the format must be . You can also use a “mailto” protocol to link to an
email address, such as by entering mailto: This is a great way
to get, for example, a potential client to write to you. By default, the http:// protocol is
automatically added to precede your URL, but you can edit it as needed.
To set a URL as the behavior for your web object, click to select the object, and use the
Behavior selector on the Internet toolbar to specify the URL. With this option selected, type
the actual URL in the Internet Address box, pressing
ENTER to apply the address link. Once a
CHAPTER 28: Basic HTML Page Layout and Publishing 897
28
URL has been applied, the Internet toolbar displays other options. Here are the URL-specific
things you can define:
●
Target Frame Use this option to specify an optional browser window location for
the new page to open into. Unless you specify differently using this drop-down, the
page that is called by the assigned URL address will open in the current browser
window, replacing the page that contained the link. This produces the same results as
the Default [None] setting in the Target Frame list. Choosing the _blank option from
the list causes a new web browser window to open to display the linked page.
If your web page uses frames for its display, you can specify where in the frameset the
new content will open. Choosing _self opens the new URL to the same frame where the web
object is located. The _top option opens the new URL in the full body of the window, and all
frames are replaced with a single frame containing the new document. The _parent option
opens the new document in the current frame’s Parent frameset. You can also enter custom
frame names by typing them in the Target Frame combo box.
Frame-based web pages cannot be searched by most search engines such as Google,
and onscreen readers for the visually impaired cannot read the contents of frames.
Think very carefully if you choose a frame-based web document, and consider the
audience you might lose and annoy.
●

ALT Comments This option is covered in more detail later in this chapter. Briefly,
use the comments. If you don’t, your visitors who have graphics turned off in their
browser won’t know what your message is.
●
Hotspots A hotspot in a graphic can be a great way to create one graphic and yet
tag several different areas to different links. Once you’ve entered a link for an object,
click this icon to choose whether an object’s shape or its bounding box will define
the clickable area. Choose either Object Shape or Bounding Box Of Object in the
selector, as shown. You can choose the Cross-hatch and Background colors if the
currently set colors are difficult to distinguish from other colors in your document.
These don’t show on your published web page; they’re only a visual convenience
while you work in CorelDRAW.
Ill 28-7
898 CorelDRAW X5 The Official Guide
●
Show Hotspot This option in the middle of the toolbar can be toggled on or off,
and it can activate or deactivate the display of the crosshatch pattern, which indicates
hotspots applied to web objects, shown here.
Ill 28-8
Adding Bookmark Behavior
Assigning a bookmark to a graphic object is a method you can use to provide a convenient
way for users to navigate between web pages on your site. For example, you could use a
bookmark if you wanted your audience to be able to click a button or other link and return to
the first page of your site from another page in your site. This is a two-step process. In the
first part of the process, you define a fixed location to which one or more URL links can
point. The fixed location is an anchor or bookmarked object. The second step in the process
would be to create a button or text link elsewhere that points to the object’s bookmark. Let’s
walk through the process.
Creating Bookmark Links
1. Select an object that you want to serve as the anchor or bookmark, for example, a

graphic at the top of the page. The object that is bookmarked must be a graphic, not
text.
2. From the Behavior drop-down list in the Internet toolbar choose Bookmark.
3. In the Internet Bookmark box enter a descriptive name for the bookmark, such as
“home_page” or “page_4_bottom” and press
ENTER, as shown in Figure 28-1.
4. Select another object or button or piece of paragraph text on the same page or on
another page in your document. This is the object that when clicked will take your
user to the object you previously bookmarked.
5. From the Behavior drop-down list in the Internet toolbar, choose Link.
6. From the Internet Address drop-down list, choose the Bookmark name you gave to
the object in step 3. For example, if “Home page” was the bookmark name you used,
you would see an entry like this: _PAGE1#Home page, as shown in Figure 28-2.
CHAPTER 28: Basic HTML Page Layout and Publishing 899
28
900 CorelDRAW X5 The Official Guide
FIGURE 28-1 A bookmark object can be on any page of a multi-page document you want to
publish as a website.
FIGURE 28-2 Use the target for the Bookmark you find on the Internet Address drop-down
selector.
You can also enter a fully qualified URL in the Internet Address field to link to the
bookmark. The URL would take the form of the web page’s address, followed by a pound
(#) sign and then the bookmark name. For example, a website’s home page is usually named
index.html. So a bookmark named “picture” on the index.html page would be typed in as
ite/index.html#picture.
If you are not familiar with how to write valid HTML hyperlinks and link anchor
names or IDs (called bookmarks in CorelDRAW), consult your favorite HTML
manual or the World Wide Web Consortium (W3C) page on Links and Anchors at
/>Web Properties and the Object Properties Docker
You can use the Object Properties docker, shown in Figure 28-3, as an alternative to using

the Internet toolbar. While you can apply many of the same settings from here, rollovers
cannot be created from this docker. To open the Object Properties docker to display web
object properties for a selected object, choose Window | Dockers | Properties, or more
simply press
ALT+ENTER. With the Object Properties docker open, click the Internet (globe
icon) tab.
CHAPTER 28: Basic HTML Page Layout and Publishing 901
28
FIGURE 28-3 The Object Properties docker provides an alternative way of applying common
Internet properties to objects.
Behavior
Internet Address (URL)
Target Frame
ALT Comments
Hotspot Shape
Hotspot Options
Using the Links and Bookmarks Docker
Use the Links and Bookmarks docker to view, name, and apply preexisting bookmarks to
objects. To open the docker, shown in Figure 28-4, choose Window | Dockers | Links and
Bookmarks.
Purely for convenience, this docker automatically lists the currently applied bookmarks
and includes commands for linking, selecting, and deleting existing bookmark links. The
bookmarks can be created only by using the Bookmarks option from the Behavior selector
in the Internet toolbar. You will find this docker most useful if you are trying to find a particular
bookmarked graphic in a multi-page document that contains a lot of bookmarked items.
To find a bookmark in your document, open the Links and Bookmarks docker, and then
double-click an entry in the Name column. You’re automatically taken to the page, and the
bookmarked object is selected.
To create a link to a bookmark, first select the object to which you want to link a bookmark,
click the New Link button, and then type the name in the open field on the Name list.

902 CorelDRAW X5 The Official Guide
FIGURE 28-4 The Links and Bookmarks docker provides a convenient way for you to manage
bookmarks applied to objects.
Refresh List
New Link
New Bookmark
New Linked Image
Delete
Update Linked Image
Open Link
Break Link
Applying a Page Background
If the background of your web page design calls for something other than white, you’ll need
to apply a unique background color or tiling background pattern. Page background is applied
using the Page Setup pane of the Options dialog (
CTRL+J), shown in Figure 28-5. To access
this dialog quickly, click to expand the listing under Document, and then click Background
in the tree directory to view the available options.
Although it might seem logical to create a separate background object for your page and
to apply your background properties to it, this can cause problems when it comes time to
export your page. The Background should be chosen in this dialog as No Background (the
default), a Solid color, or a saved Bitmap.
Choose Solid to access the color selector for choosing a uniform color. Choose Bitmap
and click the Browse button to select a bitmap image as the tiling background.
While Bitmap is selected and a bitmap file has been specified, the Source and Bitmap
Size options in the dialog become available. The Source option lets you link to and embed
the bitmap with your document, but it has no bearing on how exported web pages are
created. The Bitmap Size options let you use either Default Size (the inherent size of the
original bitmap) or a Custom Size as the size. By default, the Print And Export Background
option is selected, which should remain so to be included as one of your web page elements.

CHAPTER 28: Basic HTML Page Layout and Publishing 903
28
FIGURE 28-5 Use these options to apply color or tiling bitmap backgrounds to your web
document pages.