Les fenêtres pop-up ou pop-under sont de plus en plus populaires sur Internet. Ou, plus simplement, des images pop-up. De nombreux propriétaires de sites doivent souvent les fabriquer à des fins publicitaires, mais tout le monde ne connaît pas l'algorithme de leur création.
Il est nécessaire
- - Éditeur HTML;
- - carnet;
- - l'hébergement.
Instructions
Étape 1
Créez ou ouvrez une nouvelle page Web en HTML ou dans un éditeur de texte. Vous pouvez utiliser des programmes populaires tels que Dreamweaver, Expression Web et d'autres à cette fin. Si vous ne faites que vos premiers pas dans le langage de programmation HTML, utilisez un "bloc-notes" ordinaire.
Étape 2
Collez le code suivant entre les balises "head" et "/head":
.thumbnail {position: relative; z-index: 0;}
.thumbnail: hover {couleur de fond: transparent; index z: 50;}
.thumbnail span {/ * CSS pour l'image agrandie * / position: Absolute; couleur de fond: jaune clair; rembourrage: 5px; à gauche: -1000px; bordure: 1px gris pointillé; visibilité: masquée; la couleur noire; décoration de texte: aucune;}
.thumbnail span img {/ * CSS pour l'image agrandie * / border-width: 0; remplissage: 2px;}
.thumbnail: hover span {/ * CSS pour l'image agrandie au survol * / visibilité: visible; haut: 0; gauche: 65 px; / * position où l'image agrandie doit être décalée horizontalement * /}
Étape 3
Ajustez le décalage horizontal de l'image contextuelle en modifiant la valeur sur la dernière ligne de code. Allouez un espace entre les balises "body" et "/body" à l'endroit où vous souhaitez que l'image apparaisse sur la page Web. Copiez et collez ensuite le code suivant:
Exemple de titre de texte
Un exemple de titre de texte"
Étape 4
Remplacez "dossier / largepci1.jpg" par le fichier utilisé pour la photo contextuelle. Faites de même avec le deuxième bloc de code. Remplacez la ligne "Exemple de titre de texte" par ce qui doit être écrit dans l'image contextuelle. Modifiez également les valeurs de hauteur et de largeur dans le code pour ajuster la taille de l'image contextuelle. Créez des blocs de code supplémentaires pour ajouter plus d'esquisses. Entrez d'autres attributs, balises et texte dans le document HTML selon vos besoins. Enregistrez le fichier HTML, puis téléchargez-le sur votre serveur Web.
