Pop-up or pop-under windows are becoming more and more popular on the Internet. Or, more simply, pop-up pictures. Many site owners often have to make them for advertising purposes, but not everyone knows the algorithm for their creation.
It is necessary
- - HTML editor;
- - notebook;
- - hosting.
Instructions
Step 1
Create or open a new web page in HTML or a text editor. You can use popular programs such as Dreamweaver, Expression Web and others for this purpose. If you are just taking your first steps in the HTML programming language, use a regular "notepad".
Step 2
Paste the following code between the "head" and "/ head" tags:
.thumbnail {position: relative; z-index: 0;}
.thumbnail: hover {background-color: transparent; z-index: 50;}
.thumbnail span {/ * CSS for enlarged image * / position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none;}
.thumbnail span img {/ * CSS for enlarged image * / border-width: 0; padding: 2px;}
.thumbnail: hover span {/ * CSS for enlarged image on hover * / visibility: visible; top: 0; left: 65px; / * position where enlarged image should offset horizontally * /}
Step 3
Adjust the horizontal offset of the popup image by changing the value on the last line of code. Allocate space between the "body" and "/ body" tags where you want the image to appear on the web page. Then copy and paste the following code:
Example of a text title
An example of a text title"
Step 4
Replace "folder / largepci1.jpg" with the file used for the popup photo. Do the same with the second block of code. Change the line "Example of text title" in it to what should be written in the pop-up image. Also change the height and width values in the code to adjust the size of the pop-up image. Create additional blocks of code to add more sketches. Enter other attributes, tags, and text in the HTML document as needed. Save the HTML file and then upload it to your web server.
