Accueil
Créer un forumImage qui s'illumine
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Image qui s'illumine
par Satsu Black Ven 26 Aoû 2011 - 14:25
Bonjour!
Voila, sur ma page d’accueil j'aimerai beaucoup avoir une image qui change d'opacité au passage de la souris, que son opacité augmente pour être plus précis.
J'ai utiliser 2 code différents mais aucuns des deux ne marche
serait parce que mon forum est déjà transparent et que du coup, sa gêne pour l'opacité des image ou...?
bref, si vous voyez un probleme...
voici mon CSS
et mon code de page d’accueil :
Merci de votre aide!
Voila, sur ma page d’accueil j'aimerai beaucoup avoir une image qui change d'opacité au passage de la souris, que son opacité augmente pour être plus précis.
J'ai utiliser 2 code différents mais aucuns des deux ne marche
serait parce que mon forum est déjà transparent et que du coup, sa gêne pour l'opacité des image ou...?
bref, si vous voyez un probleme...
voici mon CSS
- Spoiler:
- Code:
img.lumiere {
opacity:0.5
-moz-opacity:0.5;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
}
img.lumiere:hover {
opacity:2;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
}
.qeel {
background-image : url("http://img4.hostingpics.net/pics/966888cesbont.png");
max-width: 791px;
max-height :390px;
background-repeat : no-repeat;
padding-left : 400px;
padding-top : 50px;
padding-right : 20px;
padding-bottom : 20px;
text-align:left}
.forumline {
opacity: 0.70;
}
.forumline
{
-moz-border-radius:11px;
-webkit-border-radius:11px;
-ô-border-radius:11px;
-khtml-border-radius:11px;
border-radius:11px;
}
.forumline{
border: 1px #a08491
dashed;
}
a { text-decoration: none; }
#i_icon_mini_index{
background-image:url('http://img11.hostingpics.net/pics/820518forumOff.png');
width:87px;
height:48px;
}
#i_icon_mini_index:hover{
background-image:url('http://img11.hostingpics.net/pics/682687ForumOn.png');
width:87px;
height:48px;
}
#i_icon_mini_faq{
background-image:url('http://img11.hostingpics.net/pics/855493FAQoff.png');
width:89px;
height:48px;
}
#i_icon_mini_faq:hover{
background-image:url('http://img11.hostingpics.net/pics/718910FAQOn.png');
width:89px;
height:48px;
}
#i_icon_mini_search{
background-image:url('http://img11.hostingpics.net/pics/170872RechercherOff.png');
width:120px;
height:48px;
}
#i_icon_mini_search:hover{
background-image:url('http://img11.hostingpics.net/pics/257745RechercherOn.png');
width:120px;
height:48px;
}
#i_icon_mini_members{
background-image:url('http://img11.hostingpics.net/pics/758298MembresOff.png');
width:117px;
height:48px;
}
#i_icon_mini_members:hover{
background-image:url('http://img11.hostingpics.net/pics/115821MembresOn.png');
width:117px;
height:48px;
}
#i_icon_mini_groups{
background-image:url('http://img11.hostingpics.net/pics/721596GroupesOff.png');
width:101px;
height:48px;
}
#i_icon_mini_groups:hover{
background-image:url('http://img11.hostingpics.net/pics/992507GroupesOn.png');
width:101px;
height:48px;
}
#i_icon_mini_profile{
background-image:url('http://img11.hostingpics.net/pics/472576ProfilOff.png');
width:82px;
height:48px;
}
#i_icon_mini_profile:hover{
background-image:url('http://img11.hostingpics.net/pics/859900ProfilON.png');
width:82px;
height:48px;
}
#i_icon_mini_message{
background-image:url('http://img11.hostingpics.net/pics/157798MPoff.png');
width:77px;
height:48px;
}
#i_icon_mini_message:hover{
background-image:url('http://img11.hostingpics.net/pics/847810MPon.png');
width:77px;
height:48px;
}
#i_icon_mini_new_message{
background-image:url('http://img11.hostingpics.net/pics/864732NewMpOff.png');
width:168px;
height:48px;
}
#i_icon_mini_new_message:hover{
background-image:url('http://img11.hostingpics.net/pics/840896NewMPOn.png');
width:168px;
height:48px;
}
#i_icon_mini_login{
background-image:url('http://img11.hostingpics.net/pics/238780ConnexionOff.png');
width:120px;
height:48px;
}
#i_icon_mini_login:hover{
background-image:url('http://img11.hostingpics.net/pics/795487ConnexionOn.png');
width:120px;
height:48px;
}
#i_icon_mini_logout{
background-image:url('http://img11.hostingpics.net/pics/553598DconnexionOff.png');
width:137px;
height:48px;
}
#i_icon_mini_logout:hover{
background-image:url('http://img11.hostingpics.net/pics/403247DconnexionOn.png');
width:137px;
height:48px;
}
#i_icon_mini_register{
background-image:url('http://img11.hostingpics.net/pics/187855INSCRIVEZVOUSOFF.png');
width:212px;
height:48px;
}
#i_icon_mini_register:hover{
background-image:url('http://img11.hostingpics.net/pics/692298INSCRIVEZVOUSON.png');
width:212px;
height:48px;
}
.truc{
border: 3px solid #D9D2DB;
-moz-border-radius: 5px;}
.machin{
font-size: 15px;
font-style: italic;
font-family: Times New Roman
}
a.forumlink {
text-decoration: none !important;
background-image:url('http://img11.hostingpics.net/pics/877557SanstitreCopie.png');
border-bottom: 2px dotted #A56DA6;
border-top: 2px dotted #A56DA6;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 15px ;
-moz-border-radius-bottomright: 2px;
display:block;
width:300px;
height:20px;
margin:auto;
font-size: 13px;
font-family: Times New roman;
}
a.forumlink:hover {
text-decoration: none !important;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
border-top: 2px dotted #A56DA6;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 15px ;
-moz-border-radius-bottomright: 0px;
display:block;
width:300px;
height:20px;
font-size: 15px;
font-family: Times New roman;
}
.mon_onglet{
float: left;
padding: 2px 20px;
margin-right: 15px;
color: #000;
background: #D9D2DB;
border: 1px solid #D9D2DB;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 0px ;
-moz-border-radius-bottomright: 0px;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
font-size: 15px;
font-family: Times New roman;
Texte-align: left;
}
.mon_onglet:hover{
background: #fff;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 0px ;
-moz-border-radius-bottomright: 0px;
font-size: 15px;
font-family: Times New roman;
}
.mon_onglet_selected{
float: left;
padding: 2px 20px;
margin-right: 10px;
color: #000;
background: #D9D2DB;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 0px ;
-moz-border-radius-bottomright: 0px;
border-top: 1px solid #D9D2DB;
border-right: 1px solid #D9D2DB;
border-left: 1px solid #D9D2DB;
border-bottom: 1px solid #D9D2DB;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}
.clear{
clear: both;
font-size: 15px;
font-family: Times New roman;
}
.mon_contenu{
color: #000;
background: #D9D2DB;
border: 1px solid #D9D2DB;
padding: 10px;
line-height: normal;
font-size: 11px;}
#mes_contenus, #mes_onglets{
width: 700px;
margin: auto;
font-size: 15px;
font-family: Times New roman;
}
et mon code de page d’accueil :
- Code:
<script type="text/javascript">
<!--
self.moveTo(0,0)
self.resizeTo(screen.100%Width,screen.100%Height)
//-->
</script>
<div id="mes_onglets">
<ul><li id="o_1"class="mon_onglet_selected"onclick="changeOnglet(this);">Acceuil</li>
<li
id="o_2" class="mon_onglet"onclick="changeOnglet(this);">Contexte</li>
<li id="o_3"class="mon_onglet"onclick="changeOnglet(this);">Actuellement</li>
<li
id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff & Partenaires</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu" align="left"><div class="opac">
<IMG SRC="http://img4.hostingpics.net/pics/379392welcome2.gif"class="lumiere"></img>
</div>
<p>
<center>
<font size="4" face="Visitor TT2 BRK">
Bienvenue dans la Ville de Destel!
</font>
</center>
</p>
<p>
</p>
<table align="left" width="100%">
<tr>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
border-top: 2px dotted #A56DA6;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 15px ;
-moz-border-radius-bottomright: 0px;
width:100px;
height:20px;
font-size: 13px;
font-family: Times New roman;
width:15%;">
Liens Utiles
</td>
<td rowspan="2" width="70%">
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</td>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
border-top: 2px dotted #A56DA6;
-moz-border-radius-topright: 15px ;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 15px ;
-moz-border-radius-bottomright: 0px;
width:100px;
height:20px;
font-size: 13px;
font-family: Times New roman;
width:15%;">
Playlist
</td></tr>
<tr><td>
<p><a href ="http://vampirehostclub.forumactif.com/f1-reglement">♦ Reglements</a></p>
<p><a href ="http://vampirehostclub.forumactif.com/f56-en-cour">♦ Présentation</a></p>
<p><a href ="http://vampirehostclub.forumactif.com/f55-invites">♦ Voyageur?</a></p>
<p><a href ="http://vampirehostclub.forumactif.com/f29-partenaires">♦ Partenariat?</a></p>
<p><a href ="http://vampirehostclub.forumactif.com/f2-bienvenue">♦ Questions?</a></p>
</td> <td>
Contenue
</td></tr>
</table>
</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>
Merci de votre aide!
Dernière édition par Satsu Black le Mar 30 Aoû 2011 - 0:55, édité 1 fois
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Re: Image qui s'illumine
par Mitsuomi Lun 29 Aoû 2011 - 11:21
Salutation, je ne suis pas un pro mais je crois avoir une solution qui pourrait t'arranger.
Au lieu de mettre
Tu mets:
Et dans ton css tu remplaces "img.lumiere" par ".lumiere" et "img.lumiere:hover" par "lumiere:hover".
Voila, en espérant t'avoir aidé. Have Fun!
Au lieu de mettre
- Code:
<IMG SRC="http://img4.hostingpics.net/pics/379392welcome2.gif"class="lumiere"></img>
Tu mets:
- Code:
<div class="lumière"><IMG SRC="ADRESSE DE TON IMAGE"></div>
Et dans ton css tu remplaces "img.lumiere" par ".lumiere" et "img.lumiere:hover" par "lumiere:hover".
Voila, en espérant t'avoir aidé. Have Fun!
Mitsuomi- Nouveau membre
- Messages : 2
Inscrit(e) le : 23/04/2010 -
Re: Image qui s'illumine
par Satsu Black Lun 29 Aoû 2011 - 11:49
Rien n'y fait ><
je ne voit aucun changement
Les autres codes marchent cependant bien sous internet, le tien sur aucun de mes navigateur :/
mais merci de l'aide que tu a voulut m’offrir ^^
je ne voit aucun changement
Les autres codes marchent cependant bien sous internet, le tien sur aucun de mes navigateur :/
mais merci de l'aide que tu a voulut m’offrir ^^
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Re: Image qui s'illumine
par Invité Lun 29 Aoû 2011 - 12:01
Bonjour 
voici ce que j'ai et sa marche pour chacune des page du forum
l'opacité peu être modifié, vous voulez une image sans trop de lumière et au passage de la souris dessus elle s'illumine, ce code fera çà sur toutes les images de votre forum !!!!
voici ce que j'ai et sa marche pour chacune des page du forum
- Code:
<style type="text/css">
a img {
opacity: 10.0;
}
a:hover img {
opacity: 0.3;
}
</style>
l'opacité peu être modifié, vous voulez une image sans trop de lumière et au passage de la souris dessus elle s'illumine, ce code fera çà sur toutes les images de votre forum !!!!
Invité- Invité
Re: Image qui s'illumine
par Satsu Black Lun 29 Aoû 2011 - 13:42
sa aurait été une super idée! j'aimerai beaucoup que sa marche mais sa ne veut pas ><
j'ai deja un code qui controle l'opacité mais de mon forum entier qui est en opacité faible, serait-ce la faute a ce code-ci?
Le code en question :
j'ai deja un code qui controle l'opacité mais de mon forum entier qui est en opacité faible, serait-ce la faute a ce code-ci?
Le code en question :
- Code:
.forumline {
opacity: 0.70;
-moz-border-radius:11px;
-webkit-border-radius:11px;
-ô-border-radius:11px;
-khtml-border-radius:11px;
border-radius:11px;
border: 1px dashed #a08491;
}
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Re: Image qui s'illumine
par tupac Lun 29 Aoû 2011 - 14:28
Bonjour
Utiliser le code suivant pour obtenir une opacité sur une image.
Votre image avec une class ( opac ).
Utiliser le code suivant pour obtenir une opacité sur une image.
Votre image avec une class ( opac ).
- Code:
<img src=" votre image ici " class="opac">
- Code:
.opac{
opacity : 0.50;
-moz-opacity : 0.50;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
.opac:hover{
opacity : 0.95;
-moz-opacity : 0.95;
-ms-filter: "alpha(opacity=10)"; /* IE 8 */
filter : alpha(opacity=10); /* IE < 8 */
}
tupac- Membre actif
-
Messages : 2551
Inscrit(e) le : 13/10/2010 -
Re: Image qui s'illumine
par Satsu Black Mar 30 Aoû 2011 - 0:55
MERCI! sa marche enfin!
merci a tous d'avoir pris le temps de m'aider avec ce probleme ^^
merci a tous d'avoir pris le temps de m'aider avec ce probleme ^^
Satsu Black- ***
- Messages : 160
Inscrit(e) le : 04/12/2010 -
Sujets similaires» Image aléatoire en image de fond pour mon forum général, comment procéder ?
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
» Comment avoir une image en bas du forum tout en gardant l'image de fond
» image "messages privés" remplacée par l'image "nouveau message privé"
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
» Comment avoir une image en bas du forum tout en gardant l'image de fond
» image "messages privés" remplacée par l'image "nouveau message privé"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum