How to Create Disjointed Rollover Pages with Dreamweaver
You can use Adobe Dreamweaver CS 5.5 to edit the HTML on your Web page and create a disjointed rollover effect. This function allows a visitor to hover the mouse over a link or image and change the value of another element on the page. A disjointed rollover can be accomplished with an HTML element, some CSS and a second HTML element that is hidden by default, but displayed when the mouse rolls over your designated HTML element.
Other People Are Reading
Instructions
-
-
1
Launch Adobe Dreamweaver CS5.5.
-
2
Click HTML under the Create New column at the center of the window.
-
-
3
Click the "Code" button at the top left corner of the window.
-
4
Click between the <body> and </body> tags.
-
5
Enter the following HTML code for the objects that will be shown to your visitors. Make sure to replace the dummy "Rollover" text with your own.
<div id="djrollover">
<div>
<a href="#">Rollover 1<span><p>Rollover Text 1</p></span></a>
</div>
<div>
<a href="#">Rollover 2<span><p>Rollover Text 2</p></span></a>
</div>
<div>
<a href="#">Rollover 3<span><p>Rollover Text 3</p></span></a>
</div>
</div> -
6
Click inside the <head> section of your page, then add the following CSS code to the page:
<style type="text/css">
#djrollover {
width: 800px;
}
#djrollover div {
width: 150px;
height: 50px;
}
#djrollover a span {
display: none;
}
#djrollover a {
display: block;
padding: 0 0 10px 30px;
}
#djrollover a:hover span {
display: block;
position: absolute;
top: 55px;
left: 200px;
}</style>
-
7
Click File at the top of the window, then select Save As.
-
8
Type a name for the page into the File Name field, then click "Save."
-
1
Tips & Warnings
You can replace any portion of your page text with images. However, all the images should have the same dimensions to avoid affecting the positioning of other elements on the page.
