Image au survole d'un texte
Résolu/Fermé
alborq
Messages postés
52
Date d'inscription
jeudi 21 octobre 2010
Statut
Membre
Dernière intervention
20 février 2012
-
Modifié par alborq le 5/12/2010 à 21:25
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 6 déc. 2010 à 17:44
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 6 déc. 2010 à 17:44
A voir également:
- Image au survole d'un texte
- Image iso - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Transcription audio en texte word gratuit - Guide
- Mettre un texte en majuscule - Guide
1 réponse
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
5 déc. 2010 à 22:28
5 déc. 2010 à 22:28
Salut
voila un exemple en simple CSS avec l infobule image
sur un lien , sur une image et sur du simple texte
+ un peu de transparence avec
A+
voila un exemple en simple CSS avec l infobule image
sur un lien , sur une image et sur du simple texte
+ un peu de transparence avec
filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #464646;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color: #564b47;
text-align: center;
}
#content {
position: absolute;
height: 400px;
width: 800px;
margin: -200px 0px 0px -400px;
top: 50%;
left: 50%;
text-align: left;
background-color: #fff;
}
p{
text-indent: 5px;
margin: 5px;
}
em.infobulle {
color: #c00;
}
em.infobulle b {
display: none;
}
em.infobulle:hover {
border: 0;
position: relative;
z-index: 500;
}
em.infobulle:hover b {
display: block;
position: absolute;
top: 20px;
left: 30px;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}
a.infobulle b {
display: none;
}
a.infobulle:hover {
border: 0;
position: relative;
z-index: 500;
}
a.infobulle:hover b {
display: block;
position: absolute;
top: 20px;
left: 30px;
}
img {
border: none;
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<p>
Eu faucibus mauris. <a class="infobulle" href="#">LIEN AVEC infobulle CSS <b><img src="img32.jpg" width="240"
height="180" alt="img" /></b></a> .Lorem ipsum dolor sit amet consectetuer pede lacinia Duis Cum laoreet.
Interdum Fusce Curabitur pede aliquet Nulla ut eros condimentum orci porttitor. Nunc.
</p>
<p>
Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque Morbi vel
Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
</p>
<p>
SUR UNE IMAGE.<em class="infobulle"><img src="img32.jpg" width="48" height="36" alt="" /><b><img src=
"img32.jpg" alt="img" /></b></em> at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque
Morbi vel Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
</p>
<p>
Lorem venenatis id et elit .<em class="infobulle">SUR UN TEXTE <b><img src="img32.jpg" width="240" height="180"
alt="img" /></b></em> consectetuer pede lacinia Duis Cum laoreet. Interdum Fusce Curabitur pede aliquet Nulla
ut eros condimentum orci porttitor. Nunc.
</p>
<p>
Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi Quisque Morbi vel
Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
</p>
</div>
</body>
</html>
A+
6 déc. 2010 à 11:25
6 déc. 2010 à 17:29
6 déc. 2010 à 17:44
c est ce que l on appel du "lorem ipsum " ! c est un texte uniquement fait pour remplir des paragraphe voir https://fr.lipsum.com/