32
Créer une Popup 100% CSS
Voici une méthode parmi toutes celles qui existent pour créer un Popup en utilisant CSS et rien que du CSS. Nous oublions le JS pour cette fois et faisons confiance à notre feuille de style.
Le but est de créer un lien qui lors du passage de la souris ouvre un bloc par-dessus contenant des informations (textes, images). Le contenu de ce bloc sera bien évidemment une charge en plus lors du téléchargement par l’utilisateur de la page et sera également indexé par les mots des moteurs de recherches.
Vous pouvez tester la version HTML en cliquant sur ce lien :
Notre technique se compose de trois étapes :
- Création d’un lien
- Création des styles
- Application et mise en place du bloc
Pour des questions de facilité, nous travaillons dans un fichier HTML et nous plaçons les styles directement dans ce fichier, bien évidemment il serait plus judicieux de les placer dans un fichier css importé dans la page html mais bon.
ETAPE 1 : Création d’un lien
Etape très facile il nous suffit d’ajouter une balise a.
<a href="#" class="bulle">Passe ta souris ici !</a>
Sur ce lien nous appelons la classe bulle (que nous allons créer dans l’étape suivante). Dans le href nous appelons # qui consiste à ne rien faire.
ETAPE 2 : Création des styles
Je vais maintenant créer les styles pour :
- Styliser le lien
- Styliser le bloc et son contenu
- Styliser le titre contenu dans le bloc
Pour cela j’ajoute ce code CSS
<STYLE type="text/css">
<!--
body{
margin:0px;
padding:0px;
text-align:center;
}
h1 {
font-family:arial, verdana, sans-serif;
font-size:16px;
font-weight:bold;
color:#62c0f4;
}
a.bulle {
position:relative;
color:#396a86;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
font-size:11px;
}
a.bulle:hover {
background: none;
z-index: 50;
}
a.bulle span {
display: none;
}
a.bulle:hover span {
display: block;
position: absolute;
top: -10px;
left: 40px;
font-family:arial, verdana, sans-serif;
text-align:justify;
font-size:12px;
font-weight:normal;
width:400px;
background: white;
padding: 5px;
border: 1px solid #62c0f4;
border-left: 10px solid #62c0f4;
}
-->
</STYLE>
L’astuce est de définir le bloc en display :none et en block lorsque la souris passe sur le lien, tout se joue grâce à hover de CSS ! Merci à lui. Je ne pense pas que le code css ci-dessus vous pose problème c’est pourquoi je ne commenterai que les intitulés.
Notamment :
a.bulle span {
Il s’agit du style bulle basé sur un lien (classe=) et plus précisemment le style des spans contenus dans ce lien. Ce sera donc un span que je devrai placer OBLIGATOIREMENT dans la balise a de ma page.
ETAPE 3 : Application et mise en place du bloc
Il me suffit donc de placer un span dans le a pour que le bloc soit disponible, ainsi en passant la souris sur le lien le bloc apparaîtra ! Magique non ?
<span>
Je place ici mon texte, ou des images, ou les deux ;)
</span>
N’est ce pas ultra simple ?
Voici le code complet HTML utilisé dans notre exemple :
<a href="#" class="bulle">Passe ta souris ici !
<span>
<img src="tuto_323_1.jpg" align="right" style="margin-left:10px;">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit laoreet mollis, dolor. Suspendisse porta. amet, consectetuer adipiscing elit. Etiam consequat.
Nulla mattis faucibus nisi. Morbi pede nunc, laoreet non, rhoncus quis,
laoreet mollis, dolor. Suspendisse porta.
</span>
</a>
Vous pouvez tester la version HTML en cliquant sur ce lient :
Merci d’avoir suivi ce tutoriel. N’hésitez pas à poser vos questions dans le forum de l’article ! Bonne chance !
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 22 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
3 mai 2008 02:04, par SFNdesigner
un bo tuto en Css mais je croi ke c plus facil de l faire avec les calque et surtt avec dreamweaver ( biensure pas pour les debutant ^^ faudras savoir manipuler les calque ) mais c bo je voulait te demmander de nosu faire un tot osur comment faire un site qui est pour internet explorer est mozzila firefox en meme temps !
Répondre-
3 mai 2008 13:36, par Wonka
Non surtout pas utiliser dream et ses options bizarres ^^ CSS est normalement compatible tous les navigateurs ! Après effectivement certaisn comme IE ont un peu de mal à comprendre toutes les normes w3c mais il existe des astuces pour palier à tous les problèmes !
Répondre-
3 mai 2008 19:42, par SFN designer
c’est ces astuces que je veut savoir si c possible mais dream n’est pas bizard XD et en peut utiliser le css en son mode source ! donc il aide a ameliorer le travail plus vite
Répondre
a la fin je dit que j’ai bien aimer cette idé de la section css c ce qui me manquer té le meilleur wonka 
-
3 mai 2008 22:52, par Wonka
merki
Répondre nan mais j’utilise aussi dream en mode source et aussi notepad ++ ! Vive le CSS !
-
-
-
-
3 mai 2008 21:26
Dommage que cela ne passe pas sous Opera, alors que IE et FF les prends en compte mais peut-être qu’avec certaines retouches ça peut le faire.
Répondre-
-
8 mai 2008 13:46, par m0mal
Opera est un autre navigateur Internet. En tout cas félicitation pour ces tutos !
Répondre
-
-
-
-
20 octobre 2008 20:16
Génial merci pour ce code qui me seras fort utile, j’avais essayé avec les calques mais cà me décalais tout. çà, ca marche c’est cool !
Répondre -
-
23 novembre 2008 11:33, par Wonka
Merci pour ton message, et je suis partagé quand au fait qu’il me le rende !
Répondre
-
-
-
16 janvier 2009 17:29
Ou alors, faire en sorte que l’on puisse aller ailleurs avec la souris en définissant une durée de vie au popup.
Si je dis ça, c’est que j’ai bien envie de mettre une playlist à l’intérieur du popup et ce qui serai top du top, c’est que ce dernier puisse se réduire ou se placer en arrière plan.
Répondre
-
-
19 mai 2009 00:54, par yann123
le tuto et le résultat est intéressent. Y-a t-il une méthode pour rendre tout cela valide au w3c ?
Répondre -
1er décembre 2009 15:51, par Tom
Bonjour, Merci pour ce petit tuto très instructif... Petite question, ça ne fonctionne pas sur ie8. As tu une solution ? Merci bcp tom
Répondre -
9 décembre 2009 18:06, par Jerr
Je connaissais cette méthode, je l’utilise pour un de mes sites pour afficher des aperçus d’images à l’interieur. Il y a juste un truc à rajouter à cette méthode si quelqu’un me trouve la solution : comment ne pas charger les éléments du pop up en même temps que la page ? Dans mon cas charger l’image d’aperçu uniquement quand le popup est utilisé. ça m’arrangerait pour la vitesse de chargement de mes pages, si quelqu’un a une idée ?
Répondre -
6 janvier 2010 16:28, par Mofoelfelps
le tuto est très sympa, mais y a t’il une possibilité pour faire un pop up en CSS et de pouvoir cliquer dedans sur plusieurs liens ??? Afin de pouvoir ouvrir d’autres fenêtres. Genre plan « google Map » et un lien pour un site web ??? Car là impossible de faire quoi que ce soit !!! Merci d’avance. A+
Répondre -
13 avril 2011 15:46, par rhcp6
Y a t’il possibilité de rendre cela compatible avec des zone d’un « image map » en lieu et place du texte ?
Et je ne peux me défaire de « l’imagemap » qui est un découpage assez complexe (j’ai un polygone qui doit avoir 32 côtés) ;-(
Répondre
