I Want to Create Images That Change on Hovering Using Dreamweaver.

Dreamweaver is one of the most used web development and assistance tools. Dreamweaver utilizes many professional functionality with easy to implement graphical interface, which is also the main reason behind Dreamweaver being equally popular among professionals as well as amateurs.

Dreamweaver has the ability to create rollover images using its GUI. On the Internet, you might have seen rollover images. On these type of images, when you hover the mouse pointer, you can observe that the images change. Also, when the pointer is removed, the images revert to their original form. These rollover images can also be used as hyperlinks to different pages.

Rollover images give your webpage a professional look and feel. The rollover images can also be used as headings, referral, and transitional links.

If you are looking for a way to make a rollover image on your webpage, all you need to do is follow the below described procedure to fulfil the task:

    ■Initialize the Dreamweaver program from the Start menu, using any account.

    ■On the interface, select File from the menu bar.

    ■From the drop-down list that appears, click on Open.

    ■On the Open window that appears, locate and open the target webpage.

    ■On the source code of the page, select the area where you wish to add the rollover image.

    ■On the interface, select Insert from the menu bar.

    ■From the drop-down list that appears, select Image.

    ■On the sub drop-down list that appears, click on Rollover Image.


    ■On the Insert Rollover image box that appears, browse and select the images for the Original image and the Rollover image in the respective sections.


    ■Select File from the menu bar.

    ■Click on Save from the drop-down to save the changes.

The design section of your Dreamweaver will now show the original image. The rollover image is actually made through a set of JavaScript that are embedded in the HTML document using the SCRIPT tags. This JavaScript changes the image when the mouse pointer is hovered over the image. The image is actually a hyperlink which can be set to provide transitions to the different pages. In order to make the rollover image a hyperlink, all you got to do is give the address of the link after ‘When clicked, Go to the URL’ section while making the rollover image.
Not open for further replies.
Not open for further replies.