How to create a rollover image, Computer Engineering

Assignment Help:

Q. How to Create a Rollover Image?

A rollover image is an image whose display changes when pointer passes ('rolls') over it. You will use Dreamweaver's Insert Rollover Image command to create three rollover images for navigation buttons-Trip Planner, Destinations, and Travel Logs.

A rollover image comprises two images: the image displayed when page first loads in the browser, and image displayed when the pointer moves over the original image. Be sure to use images that are the same size. First image dictates the size of the display, so if second image is much smaller or much larger, results will look unprofessional or distorted.

Next, you will add a navigation button with a rollover image to your page. Then you will add the other navigation buttons and preview the page in a browser to test rollovers.

1.  In Document window, click in first cell of the navigation button table.

This tells Dreamweaver where you want the image inserted.

2.  To insert a rollover image, do one of the following:

  In Common category of the Objects panel, click Insert Rollover Image icon.

  • Choose Insert > Interactive Image > Rollover Image.

3.  In Insert Rollover Image dialog box, type planner in the Image Name field. This gives the image a unique name and makes it easily identifiable in HTML code.

4.  In Original Image field, click Browse; then navigate to MenuTripPlanner.gif and click Select (Windows) or Open (Macintosh).

 This tells Dreamweaver which image to display when page first loads.

5.  In Rollover Image field, click Browse; then navigate to

MenuTripPlanner_on.gif and click Select (Windows) or Open (Macintosh).

This tells Dreamweaver which image to display when pointer is over the original image.

6.  Make sure Preload Rollover Image option is selected so that rollover images load when page loads in the browser, ensuring a quick transition between images when a user moves the pointer over the original image.

1424_How to Create a Rollover Image.png

7.  Click OK to close dialog box.

 The image appears in document.

8.  Resize the layout cell to fit the image.


Related Discussions:- How to create a rollover image

Software engineering, what is modular system ? list important properties of...

what is modular system ? list important properties of modular system

What is the use of ''using'' declaration in c++, A using declaration in C++...

A using declaration in C++ makes it likely to use a name from a namespace without the scope operator.

Project, write a programme to simulate a train station to automate

write a programme to simulate a train station to automate

Assembly program, where do i get some sample assembly projects (with coding...

where do i get some sample assembly projects (with coding included)?

Explain the basic syntactic constructs through reductions, Recognition of b...

Recognition of basic syntactic constructs through reductions, this task is performed by? By Syntax analysis, recognition of fundamental syntactic constructs through reductions

Hill climbing - artificial intelligence, Hill Climbing - Artificial Intelli...

Hill Climbing - Artificial Intelligence: As we've seen, in some problems, finding the search path from primary to goal state is the point of the exercise. In other problems, t

What controls the screen flow, What controls the screen flow? The SET ...

What controls the screen flow? The SET SCREEN and LEAVE SCREEN statements controls screen flow.

Evaluate the damping coefficient, A certain car has suspension modes which ...

A certain car has suspension modes which are uncoupled front to back.  When a person with a mass of 60 kg sits in the rear of a car, in the centre of the seat which is directly ove

Example of shared programming using library routines, Q. Example of shared ...

Q. Example of shared programming using library routines? Think about subsequent set of statements  Process A                                  Process B                  :

Udp, udp connection establishment and termintion

udp connection establishment and termintion

Write Your Message!

Captcha
Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd