Pop-up- oder Pop-under-Fenster werden im Internet immer beliebter. Oder einfacher, Pop-up-Bilder. Viele Seitenbesitzer müssen sie oft zu Werbezwecken erstellen, aber nicht jeder kennt den Algorithmus für ihre Erstellung.
Es ist notwendig
- - HTML-Editor;
- - Notizbuch;
- - Hosting.
Anleitung
Schritt 1
Erstellen oder öffnen Sie eine neue Webseite in HTML oder einem Texteditor. Zu diesem Zweck können Sie gängige Programme wie Dreamweaver, Expression Web und andere verwenden. Wenn Sie gerade Ihre ersten Schritte in der Programmiersprache HTML machen, verwenden Sie einen normalen "Notizblock".
Schritt 2
Fügen Sie den folgenden Code zwischen den Tags "head" und "/head" ein:
.thumbnail {Position: relativ; Z-Index: 0;}
.thumbnail: schweben {Hintergrundfarbe: transparent; Z-Index: 50;}
.thumbnail span {/ * CSS für vergrößertes Bild * / Position: absolute; Hintergrundfarbe: hellgelb; Polsterung: 5px; links: -1000px; Rand: 1px grau gestrichelt; Sichtbarkeit: versteckt; Farbe: Schwarz; Textdekoration: keine;}
.thumbnail span img {/ * CSS für vergrößertes Bild * / border-width: 0; Polsterung: 2px;}
.thumbnail: Hover Span {/ * CSS für vergrößertes Bild beim Hover * / Sichtbarkeit: sichtbar; oben: 0; links: 65px; / * Position, an der das vergrößerte Bild horizontal versetzt werden soll * /}
Schritt 3
Passen Sie den horizontalen Versatz des Popup-Bilds an, indem Sie den Wert in der letzten Codezeile ändern. Platzieren Sie zwischen den Tags "body" und "/body" dort, wo das Bild auf der Webseite erscheinen soll. Kopieren Sie dann den folgenden Code und fügen Sie ihn ein:
Beispiel für einen Texttitel
Ein Beispiel für einen Texttitel"
Schritt 4
Ersetzen Sie "folder / largepci1.jpg" durch die Datei, die für das Popup-Foto verwendet wird. Machen Sie dasselbe mit dem zweiten Codeblock. Ändern Sie die Zeile "Beispiel für Texttitel" in das, was in das Popup-Bild geschrieben werden soll. Ändern Sie auch die Werte für Höhe und Breite im Code, um die Größe des Popup-Bildes anzupassen. Erstellen Sie zusätzliche Codeblöcke, um weitere Skizzen hinzuzufügen. Geben Sie nach Bedarf weitere Attribute, Tags und Text in das HTML-Dokument ein. Speichern Sie die HTML-Datei und laden Sie sie dann auf Ihren Webserver hoch.
