Beautiful pop-up window

First, make a simple Prompt window. Compile HTML code and put all the prompt window content in a span object.

Place the cursor in <a href = "#" class = "tip"> CSS <SPAN class = "popbox"> here, put an image Cascading Style Sheet in the stacked style sheet </span> </ a>
A prompt box is displayed on this hyperlink.

Then, display the content with CSS.

A. Tip {
Color: red;
Text-Decoration: none;
Position: relative;
}
A. Tip. popbox {
Display: none;
}
A. Tip: hover {
Cursor: pointer;/* because IE does not fully support hover pseudo objects, you can set cursor: pointer to display it normally */
}
A. Tip: hover. popbox {
Display: block;
Position: absolute;
Top: 15px;
Left:-30px;
}

To place the prompt window on the side of the content explained, you must set the tip to relative positioning: Position: relative; then set the span object to absolute positioning, position: absolute ;.
Normally, use display: none; To hide the image. Because IE does not fully support hover, you must specify cursor: pointer in A: tip: hover.
(The website layout is recorded in the "cursor: Hand" file. It can be displayed normally, but this attribute was not found in dreamweaver8 at the time)

A. Tip: hover. popbox {
Display: block;
Position: absolute;
Top: 15px;
Left:-30px;
}

With the preceding settings, the cursor is displayed when you place the cursor over the hyperlink.

Next, create a complex image with a background and put an image.

To display irregular images, you must first create an irregular and compliant image as the background, you need to make the part without any image into a transparent background (Photoshop processing is good ).

Rewrite the following CSS code:

A. Tip: hover. popbox {
Display: block;
Position: absolute;
Top:-240px;
Left:-30px;
Width: 226px;
Height: 242px;
Color: #000000;
Background-image: url('background image .gif ');
Background-repeat: No-Repeat;
}

Otherwise, when the image is inserted in dreamweaver8', the URL ('background image .gif ') does not have single quotation marks, which cannot be normally displayed in Firefox.
In addition, the repeat mode is set to no-repeat, and the relative position is set as required.

Modify the content in the span and add the image information.

Place the cursor in <a href = "#" class = "tip"> CSS <SPAN class = "popbox"> here, put an image <br/> Cascading Style Sheet </span> </a>
A prompt box is displayed on this hyperlink.

Set the border of the image so that the display in Firefox and IE is the same.

For the final and code, see

Http://www.mxstdio.cn/example/poptip/index.html