|
A rollover image is an image that changes when the mouse moves over it. Dreamweaver has a wizard that makes it simple to create a rollover image. This wizard can be accessed by going to the Insert Menu and selecting 'Rollover Image'.
Before you insert your rollover onto the page, you must first create the original image as well as the mouseover image. Use your graphics program of choice and create two images at the same size. It's a good idea to name the images so that you can easily find them and know their purpose. Here is a sample:
The first image was 100 x 20 pixels. It was named 'image'. The second image had the same pixel dimensions, used the same font (with a different color), and was named 'imageover.'
After you have created the images, you are ready to insert them into the wizard. Select Rollover Image from the Insert Menu and you will see a dialog box that looks like this:
You must first assign the Rollover a name in the 'Name' field. This is helpful if you plan on modifying the rollover later. You must then find the Original Image. You can browse for it on your local computer. Dreamweaver will link to it as it would if you inserted an image in the normal fashion. Once you have the path to your original image, you must do the same with the 'Rollover' image. It is recommended that you leave the 'Preload Rollover Image' checked. This way the browser will download the image when the page loads. If this is unchecked, the browser will download the image when the mouse is moved over it. This could cause a delay until the image is downloaded which would usually lose the effect.
You can also have your rollover go to a certain URL by entering the URL in the last field of the dialog box. In the example above, we used '#' as the url.
Click on OK and you should see the original image on your page. From there you can move it to wherever you would like and can further modify it. You can select the image and have all the standard image options in the Properties Toolbar. You can change the 'Link' field to a new URL. You can add Alt text, a border, change the alignment, assign a target value, etc.
This is not the only way or the best way to insert a rollover into Dreamweaver, but it is the easiest way. We will be looking at a more advanced means of inserting Rollovers when we talk about Behaviors later in the tutorial.
- Articles In This Category
- More from this CategoryTutorials > Dreamweaver HTML Editor TutorialsNow I will share some techniques on turning your newfound table knowledge into quality page designs. Before you begin designing your page, you must d...Tutorials > Dreamweaver HTML Editor TutorialsNested tables means placing (nesting) a table within another table. Doing this can give the designer even more control over positioning with a table d...Tutorials > Dreamweaver HTML Editor TutorialsUnless you are familiar with HTML, you are probably not familiar with Column and Row Spanning. It can be a difficult concept for some, but is well wor...Tutorials > Dreamweaver HTML Editor TutorialsOne of the advantages of using Dreamweaver is the simple fact that it is a WYSIWYG program. While designing you can see how changes will look in the b...Tutorials > Dreamweaver HTML Editor TutorialsYou can also modify cells and rows individually. Rows can be modified by selecting the entire row. This can be done by holding down the CTRL (Command...
- Related Articles
- Related ArticlesNews > NewsflashAre you a Distribute IT customer (Registered a domain with us before the 5th June 2011)? You might have been affected by the outages of Distribute IT'...Plesk Tutorials > Plesk 10 - TutorialsThe following video tutorial will guide you through how to use the Backup Manager in Plesk10...Plesk Tutorials > Plesk 10 - TutorialsThe following video tutorial will guide you through managing your Databases with WebAdmin in Plesk10...Plesk Tutorials > Plesk 10 ResellerThe following video tutorial will guide you through managing the Virtual Host Template in Plesk10...Plesk Tutorials > Plesk 10 - TutorialsThe following video tutorial will guide you through using the Backup Manager in Plesk10...
- Latest Articles
- Latest ArticlesTutorials > Email Tutorial : FAQ for Email setupThis guide will help you configure your AUSWEB hosted email address with Outlook 2010....Tutorials > Email Tutorial : FAQ for Email setupThis guide will help you setup and configure your AUSWEB hosted email address with Windows Live Mail (Outlook 2011)....Tutorials > Partner (Affiliate) Guide1. Visit http://partner.ausweb.com.au and click “Join Now” from the top navigation bar (or click the shiny green “Sign Up Now” button....Tutorials > Website Security/Upgrade IssuesAfter installing an SSL, a commmon subsequent issue (in most modern browsers) is the the dreaded "Connection Partially Encrypted" warning. The er...Tutorials > Customer TestimonialsNow that you know about us, from us - this page is dedicated to what our customers think...
- Most Read Articles
- Most Read ArticlesTutorials > Joomla FAQA vulnerable extension is one that has been found to contain, or contribute to, a security vulnerability. Vulnerable extensions are not necessarily p...Tutorials > phpBB Forum HostingFinally, after a long wait, phpBB3 has been released, and its relatively easy to upgrade your existing phpBB installation. phpBB3 introduces hundreds...Tutorials > phpBB Forum HostingThis video tutorial will show you how to create a new topic in phpBB3....Tutorials > phpBB Forum HostingThis video tutorial will show you how to set up a poll when starting a new topic in phpBB3...Tutorials > phpBB Forum HostingphpBB3 is the latest update to the phpBB series, incorporating a plethora of new features, speed, stability and security improvements, and is much eas...
| < Prev | Next > |
|---|
