Image qui s'illumine

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui s'illumine

Message par Satsu Black le 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 Sad
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

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Satsu Black le Sam 27 Aoû 2011 - 9:59

Up!

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Satsu Black le Dim 28 Aoû 2011 - 11:20

up!

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Mitsuomi le 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
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

http://new-hogwart.forumsactifs.com/
Mitsuomi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Satsu Black le 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 ^^

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Invité le Lun 29 Aoû 2011 - 12:01

Bonjour Very Happy

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 !!!!

farao Like a Star @ heaven

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Satsu Black le 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 :
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

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par tupac le Lun 29 Aoû 2011 - 14:28

Bonjour

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">
Puis ce code a placer dans votre feuille de style css.
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
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'illumine

Message par Satsu Black le Mar 30 Aoû 2011 - 0:55

MERCI! sa marche enfin!

merci a tous d'avoir pris le temps de m'aider avec ce probleme ^^

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum