Exemple d'une fenêtre Pop-up sans Javascript et son utilité:
je souhaite, par exemple faire un peu de publicité gratuite pour une de mes boutique de DvdBoutique films Dvd
Les meilleurs films dvd à prix réduits, les séries cultes telles que, Mariés, deux enfants , Ma sorcière bien aimée ou encore la série Lost ... Et bien sur le matériel pour visionner vos dvd en toute tranquillité., je la mets en valeur grâce à cette fenêtre pop-up sans Javascript appelée aussi info-bulle
Le script CSS à coller entre les balises <head> et </head> ou dans la feuille de style : <style type="text/css"> a.bulle { position: relative; color: rgb(255, 51, 255); font-weight: normal; font-style: normal; font-size: 12pt; text-decoration: underline; font-family: Arial,Helvetica,sans-serif; } a.bulle:hover { background-color: rgb(0, 255, 255); font-style: italic; } a.bulle span { display: none; } a.bulle:hover span { border-style: solid dashed dashed; border-color: rgb(174, 0, 0); border-width: 4px 1px 1px; padding: 13px; display: inline; font-size: 10px; font-weight: normal; text-decoration: none; width: 130px; height: 250px; top: 2px; left: 50px; background-color: rgb(255, 235, 215); position: absolute; } </style>
a.bulle correspond au lien apparent sur la page, sans le survoler avec la souris, vous réglez depuis cette sous-class .bulle la position du lien qui est ici relative par rapport à l'ensemble du texte. Sa couleur avec color:, sa graisse (épaisseur) avec font-weight:, sa taille avec font-size, surligné ou non avec text-decoration et le type de police, réglable grâce à font-family. Dans l’exemple ici, la famille est prédéfinie avec Nvu, mais pouvez mettre à la place, Times New Roman, ou même Comic Sans MS, enfin bref, la police qui vous semblera adéquate.
a.bulle:hover correspond au lien apparent sur la page lorsqu’il est survolé avec la souris, ici j’ai indiqué un fond de couleur cyan avec rgb(0, 255, 255) et un style de police en italique pour donner de l’effet lors du survol du lien. Attention, si vous n’indiquez pas de couleurs, d’épaisseur, de taille etc., cette sou-class héritera des valeurs de la class précédente.
a.bulle span indique au navigateur que sans le survol du lien avec la souris, la boîte et son contenu reste non visible. Aucune autre valeur n’est à indiquer, seul display : none doit figurer dans cette valeur.
Enfin, a.bulle:hover span indique le comportement de reconstitution de la fenêtre pop-up lors du survol de la souris. border-style: solid dashed dashed marque la bordure du haut pleine avec la valeur solid et marque les autres bordures en pointillées avec la valeur dashed. border-width: 4px 1px 1px défini l’épaisseur des bordures, padding: impose un espace entre le contenu et le bord de la fenêtre pop-up, attention la valeur ajoutée à padding agrandie la fenêtre d'autant. Display: fourni la valeur de l'affichage, ici, en ligne. Viennent ensuite les valeurs de font:, attention de bien les définir car, si vous le ne faites pas, seront affichées les valeurs héritées ! Width: défini la largeur de la boîte et height: la hauteur.Top: indique le décalage supérieur de la boîte par rapport au lien et left: le décalage horizontal gauche, toujours par rapport au lien, background-color: fourni avec la valeur de votre choix, la couleur du fond de boîte. position: absolute indique au navigateur d'afficher la boîte en respectant les valeurs ci-dessus (top et left).
Jeu de briques
Snake
Pacman
Bubble