Sujet Précédent Sujet Suivant

Onmouseover + transition seulement avec CSS

Résolu/Fermé
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 - 6 août 2012 à 16:19
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 - 7 août 2012 à 11:40
Bonjour,

Je souhaiterai faire en sorte que lorsque ma souris survole un bouton définit, que le fond d'écran de ma page change mais cela avec une transition du genre un fondu et uniquement en utilisant du CSS.

J'ai déjà ce code qui marche : 
<img src="image.png" width="200" height="102" alt="Nom" onmouseover="body.style.backgroundImage='url(images/backgrounds/image.jpg)';"></img>
Mais j'aimerai maintenant y ajouter une petite transition. Comment faire ?

Et comment faire pour que dans une feuille CSS ce code... 
.truc:hover {}
...agisse sur un autre objet que lui même ?

Merci d'avance !

3 réponses

Réponse 1 / 3
Hxyp Messages postés 401 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 27 avril 2014 54
6 août 2012 à 17:26
Bonjour,
Ça a été ajouté dans le CSS3 mais apparemment n'a pas encore été implémenté par internet explorer. D'après un post ici : https://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions sera ajouté dans IE10.
Jetez un oeil ici : http://www.w3schools.com/css3/css3_transitions.asp
Trouverez des exemples là : https://www.the-art-of-web.com/css/timing-function/
0
Réponse 2 / 3
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
6 août 2012 à 18:02
Bonjour,

Déjà merci, vos liens pourront m'être très utiles et pourront m'inspirer.

Mais admettons que j'ai ces codes. 
.body {
transition...
}
.div {}
.div:hover {
...
}
Comment faire pour que le "truc" étant survolé affecte un autre objet ? Comme par exemple un le fond d'écran étant contenu dans body ?

Configuration: Mac OS X / Firefox 14.0.1
0
Hxyp Messages postés 401 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 27 avril 2014 54
6 août 2012 à 19:24
Hm, je ne pense pas qu'on puisse modifier le body à partir d'un de ses enfants en CSS. Vous pouvez affecter ce qu'il y a "en dessous" mais pas ce qu'il y a "au dessus".
Par exemple : 
<html>
    <head>
        <style type="text/css">
            .x{display:none;color:#FF0000;background-color:#FFF;}
            .test{background-color:#00FF00;}
            .test:hover .x{display:inline;background-color:#000;}

        </style>
    </head>
    <body>
        <div class="test">
            hover
            <div class="x">
                hello
            </div>
        </div>
    </body>
</html>

L'inverse n'est 'probablement' pas possible (modifier test en passant par un hover sur x), utilisez du javascript.
0
Réponse 3 / 3
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
6 août 2012 à 19:37
D'accord, merci beaucoup en tout cas.
Et ne connaissant pour ainsi dire rien au javascript, serait-il possible que vous me montriez comment faire en js ?
J'ai déjà un peu parcouru le net à ce sujet, mais les codes sont trop compliqués pour moi et je n'ai pas assez de connaissance dedans pour les simplifier et les appliquer chez moi.
0
Hxyp Messages postés 401 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 27 avril 2014 54
6 août 2012 à 20:27
Après quelques recherches et pas mal de test (vu que je suis autant une teub que vous en javascript ahahah) voici une solution qui permet de modifier la class donc CSS du body, là ça change entre bd1 et bd2 s'applique au body avec mouseover et mouseout, à vous de remplacer/modifier ces class pour faire des css transitions: 
<html>
    <head>
        <script type="text/javascript">
        function modifbody1(){
            document.body.className="bd2";
        }
        function modifbody2(){
            document.body.className="bd1";
        }
    </script>
    <style type="text/css">
        .bd1{background-color:#FFF;}
        .bd2{background-color:#000;}
        .test{color:#FF0000;}
    </style>
    </head>
    <body class="bd1">
        <span class="test" onmouseover="modifbody1()" onmouseout="modifbody2()">
            hover me!
        </span>
    </body>
</html>
0
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
7 août 2012 à 11:40
Super ! Merci beaucoup !
Après avoir modifié deux ou trois petits trucs, ça marche nickel ! Ce que je ne réussissais pas à comprendre c'était le 
document.body.className="bd2";
Après avoir pas mal galéré, j'ai réussi à comprendre son fonctionnement et le remplacer par 
document.getElementById("var1").id="var2";
Super merci à tous, sujet résolu !
0

Discussions similaires

Powerpoint ajout de nouvelles transitions
fleurbleue-plumerose -
fleurbleue-plumerose -

7 réponses
Changer de diapo après une animation
Oonae -
Raymond PENTIER -

5 réponses
montage : besoin d'une transition zapping C+
nouba666 -
nouba666 -

4 réponses
Est-il possible de télécharger de nouveaux thèmes PowerPoint ?
Camarolf68 -
Camarolf68 -

5 réponses
Afficher un objet avec onmouseover
danwolf7 -
danwolf7 -

14 réponses