Afficher des images en fondu

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

Résolu Afficher des images en fondu

Message par Seriwyth le Ven 25 Nov 2011 - 11:49

Bonjour!
Oui, c'est encore moi!... M'enfin, on ne change pas une équipe qui gagne =3

Enfin... bref. Voilà, j'ai suivi un tutoriel pour afficher les images de la barre de navigation au passage de la souris heu... ce tutoriel-ci et je me demandais s'il était possible que le changement d'image se fasse en fondu? C'est à dire que ben... l'image change au passage de la souris, mais avec un effet de fondu
J'ai essayé avec la propriété de transition en CSS3 mais je n'ai pas réussi... après, ça fonctionne bien sur le texte, mais je ne sais pas si pour une image il ne faut pas utiliser du JS...? Enfin, comme vous pouvez sans doutes le voir, je ne suis pas, mais alors pas du tout à l'aise avec le javascript Mr. Green

Est-ce que quelqu'un aurait une idée pour m'éclairer un peu? ça serait vraiment sympa à vous =)
Merci d'avance !


Dernière édition par Seriwyth le Ven 9 Déc 2011 - 22:53, édité 1 fois

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Sam 26 Nov 2011 - 11:51

Hum.... Up =)
J'ai essayé de faire une recherche dessus, mais je m'y prend peut-être mal parce que j'ai pas trouvé x__x

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Dim 27 Nov 2011 - 21:16

Up Very Happy

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Lun 28 Nov 2011 - 21:46

Heu ... up =)

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Mar 29 Nov 2011 - 22:36

Voici mon petit up du soir ! =D

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Mer 30 Nov 2011 - 22:19

Bonsoir
Je passe uper mon sujet pour qu'il ne tombe pas dans les méandres du vide sidéral ! Mr. Green
Bonne soirée à vous tous =D

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Ea le Jeu 1 Déc 2011 - 16:00

Bonjour,


Bof bof, à cœur vaillant rien d'impossible mais ça fait bcp de travail pour pas grand chose <3

Déjà en fait la meilleur application du tuto c'est avoir les 2 images ( celle au hover et celle pas au hover ) sur la même image, et juste mettre dans le :hover

Code:
tatata:hover {
 background-position: -20px 0;
}
De cette manière il n'y a pas un "temps" de chargement au premier affichage de l'image.

Pour css3 je connais pas assez.

Sinon en javascript faudrait s'amuser à englober l'image par une autre balise, et mettre l'image ainsi qu'une deuxième image en position absolute puis gérer l'événement du survol pour switcher entre les 2. Enfin je vais d'abord voir si y'a moyen de le faire en css3.

Ea
Aidactif
Aidactif

Messages : 23446
Inscrit(e) le : 04/04/2008

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

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Jeu 1 Déc 2011 - 23:12

Bonjour!

Ah merci pour la réponse! (au passage, pendant que je vous tiens, merci beaucoup pour la précision apportée sur... sur les pages qui affichaient about:blank je crois. Heu... C'était il y a trois mois, mais j'avais pas réussi à envoyer de MP ... breeef! X3

... Gné? *reprend son souffle*
Etana a écrit:Sinon en javascript faudrait s'amuser à englober l'image par une autre balise, et mettre l'image ainsi qu'une deuxième image en position absolute puis gérer l'événement du survol pour switcher entre les 2
De quoi qui s'agit? C'est la liste des ingrédients du coca? Mr. Green
Hum... mouais, Je crois que j'ai vaguement compris, mais vraiment, le javascript et moi... on n'est pas potes... ... Plus sérieusement, réflexion faite: c'est pas si mal quand ce n'est pas en fondu hein, c'est joli quand même. *sifflote en regardant le plafond*
Bon, je vais continuer à chercher un chouïa de mon côté et puis je vous tiens au courant... et puis vous pouvez chercher aussi si vous voulez, c'est bien sympa à vous, mais vraiment, c'est pas urgent du tout alors prenez tout votre temps =D

En tout cas, merci pour votre réponse!
Bonne soirée ♥

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Jeu 8 Déc 2011 - 22:25

Bonsoir!
Pour éviter de tomber dans l'oubli... je fais un p'tit up en passant =)

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Afficher des images en fondu

Message par Ea le Ven 9 Déc 2011 - 21:30

Okay, donc déjà si je prends ce que vous avez en retirant la transition, l'attribut class et les trucs inutiles on a :

Code:
#i_icon_mini_index{
   background-image:url(http://img15.hostingpics.net/pics/123531gharendar1.png);
   height:70px;
   width:120px
}
#i_icon_mini_index:hover{
   background-image:url(http://img11.hostingpics.net/pics/119820gharendar12.png);
}
#i_icon_mini_faq{
   background-image:url(http://img11.hostingpics.net/pics/325606FAQ.png);
   height:70px;
   width:119px;
}
#i_icon_mini_faq:hover{
   background-image:url(http://img11.hostingpics.net/pics/609085FQhover.png);
}
#i_icon_mini_search{
   background-image:url(http://img11.hostingpics.net/pics/452295recherche1.png);
   height:70px;
   width:121px;
}
#i_icon_mini_search:hover{
   background-image:url(http://img11.hostingpics.net/pics/329003rechercheh1.png);
}
#i_icon_mini_members{
   background-image:url(http://img11.hostingpics.net/pics/997710gharendiens.png);
   height:70px;
   width:120px;
}
#i_icon_mini_members:hover{
   background-image:url(http://img11.hostingpics.net/pics/224081gharendienhover.png);
   width:121px;
}
#i_icon_mini_groups{
   background-image:url(http://img11.hostingpics.net/pics/361928clans.png);
   height:70px;
   width:120px;
}
#i_icon_mini_groups:hover{
   background-image:url(http://img11.hostingpics.net/pics/317191clanshover.png);
}
#i_icon_mini_profile{
   background-image:url(http://img11.hostingpics.net/pics/231763identit.png);
   height:70px;
   width:121px;
}
#i_icon_mini_profile:hover{
   background-image:url(http://img11.hostingpics.net/pics/298922identitehover.png);
}
#i_icon_mini_message{
   background-image:url(http://img11.hostingpics.net/pics/339181MP.png);
   height:70px;
   width:120px;
}
#i_icon_mini_message:hover{
   background-image:url(http://img11.hostingpics.net/pics/738622missive.png);
}
#i_icon_mini_new_message{
   background-image:url(http://img11.hostingpics.net/pics/738622missive.png);
   height:70px;
   width:120px;
}
#i_icon_mini_new_message:hover{
   background-image:url(http://img11.hostingpics.net/pics/339181MP.png);
}
#i_icon_mini_logout{
   background-image:url(http://img11.hostingpics.net/pics/313089partir1.png);
   height:70px;
   width:119px;
}
#i_icon_mini_logout:hover{
   background-image:url(http://img11.hostingpics.net/pics/134714partirh1.png);
}
#i_icon_mini_register{
   background-image:url(http://img11.hostingpics.net/pics/556251entrer1.png);
   height:70px;
   width:50px;
}
#i_icon_mini_register:hover{
   background-image:url(http://img11.hostingpics.net/pics/447049entrerh1.png);
   width:119px;
}
#i_icon_mini_login{
   background-image:url(http://img11.hostingpics.net/pics/538059revenir1.png);
   height:70px;
   width:50px;
}
#i_icon_mini_login:hover{
   background-image:url(http://img11.hostingpics.net/pics/409760revenirh1.png);
}
Puis en mettant tout sur la même image et en utilisant background-position :

Code:
a.mainmenu img { background-image: url(http://i.imgur.com/19g2u.png); }

#i_icon_mini_index { background-position: -171px 0; width: 121px; height: 70px; }
#i_icon_mini_index:hover { background-position: 0 0; }

#i_icon_mini_faq { background-position: -1365px 0; width: 121px; height: 70px; }
#i_icon_mini_faq:hover { background-position: -855px -120px; }

#i_icon_mini_search { background-position: -342px -120px; width: 121px; height: 70px; }
#i_icon_mini_search:hover { background-position: -1536px 0; }

#i_icon_mini_members { background-position: -1196px -120px; width: 119px; height: 70px; }
#i_icon_mini_members:hover { background-position: -513px 0; width: 118px; }

#i_icon_mini_groups { background-position: -1877px 0; width: 120px; height: 70px; }
#i_icon_mini_groups:hover { background-position: -1194px 0; width: 121px; }

#i_icon_mini_profile { background-position: -681px 0; width: 121px; height: 70px; }
#i_icon_mini_profile:hover { background-position: -852px 0; }

#i_icon_mini_message { background-position: -1707px 0; width: 120px; height: 70px; }
#i_icon_mini_message:hover { background-position: -1026px -120px; }

#i_icon_mini_new_message { background-position: -1026px -120px; width: 120px; height: 70px; }
#i_icon_mini_new_message:hover { background-position: -1707px 0; }

#i_icon_mini_logout { background-position: -1023px 0; width: 121px; height: 70px; }
#i_icon_mini_logout:hover { background-position: -342px 0; }

#i_icon_mini_register { background-position: -684px -120px; width: 121px; height: 70px; }
#i_icon_mini_register:hover { background-position: -171px -120px; }
 
#i_icon_mini_login { background-position: -513px -120px; width: 121px; height: 70px; }
#i_icon_mini_login:hover { background-position: 0 -120px; }


Donc maintenant pour ce que vous voulez il faudrait utiliser 2 images ( en ayant l'image non active derrière et en faisant apparaître la deuxième image ( l'active ) en cas de survol ), je l'ai fait avec ce CSS-ci :

Code:
.iw {
   background-image: url(http://i.imgur.com/19g2u.png);
}
.iw img {
   background-image: url(http://i.imgur.com/19g2u.png);
   opacity : 0;
   filter : alpha(opacity=0);
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 1s;
   -moz-transition-property: opacity;
   -moz-transition-duration: 1s;
   -ms-transition-property: opacity;
   -ms-transition-duration: 1s;
   -o-transition-property: opacity;
   -o-transition-duration: 1s;
   transition-property: opacity;
   transition-duration: 1s;
}
.iw img:hover {
   opacity : 1;
   filter : alpha(opacity=100);
}
.iw { height:70px; display: inline-block; }

#i_icon_mini_index { background-position: -171px 0; width: 121px; height: 70px; }
.iw #i_icon_mini_index { background-position: 0 0; }

#i_icon_mini_faq { background-position: -1365px 0; width: 121px; height: 70px; }
.iw #i_icon_mini_faq { background-position: -855px -120px; }

#i_icon_mini_search { background-position: -342px -120px; width: 121px; height: 70px; }
.iw #i_icon_mini_search { background-position: -1536px 0; }

#i_icon_mini_members { background-position: -1196px -120px; width: 119px; height: 70px; }
.iw #i_icon_mini_members { background-position: -513px 0; width: 118px; }

#i_icon_mini_groups { background-position: -1877px 0; width: 120px; height: 70px; }
.iw #i_icon_mini_groups { background-position: -1194px 0; width: 121px; }

#i_icon_mini_profile { background-position: -681px 0; width: 121px; height: 70px; }
.iw #i_icon_mini_profile { background-position: -852px 0; }

#i_icon_mini_message { background-position: -1707px 0; width: 120px; height: 70px; }
.iw #i_icon_mini_message { background-position: -1026px -120px; }

#i_icon_mini_new_message { background-position: -1026px -120px; width: 120px; height: 70px; }
.iw #i_icon_mini_new_message { background-position: -1707px 0; }

#i_icon_mini_logout { background-position: -1023px 0; width: 121px; height: 70px; }
.iw #i_icon_mini_logout { background-position: -342px 0; }

#i_icon_mini_register { background-position: -684px -120px; width: 121px; height: 70px; }
.iw #i_icon_mini_register { background-position: -171px -120px; }
 
#i_icon_mini_login { background-position: -513px -120px; width: 121px; height: 70px; }
.iw #i_icon_mini_login { background-position: 0 -120px; }
Il faut également mettre ce script sur toutes les pages :

Code:
$(function() {
  $("a.mainmenu > img[id]").each(function() {
    $(this).wrap('<span id="' + $(this).attr("id") + '" class="iw" />')
  })
});
( voir http://forum.forumactif.com/t311791-gestion-des-codes-javascript#2719705 )

Le code javascript ne fera qu'entourer chaque :

Code:
<img id="i_icon_mini_icon" />
D'un :

Code:
<span id="i_icon_mini_icon" class="iw" />
Le CSS lui met l'image de fond normal ( celle pas survolée ) aux span.iw, et met l'image active ( celle survolée ) aux <img id="i_icon_mini_icon" /> qui se trouvent dans un <span id="i_icon_mini_icon" class="iw" />, ces images ne sont pas visible grâce au opacity 0 :

Code:
.iw img {
   opacity : 0;
   filter : alpha(opacity=0);
}
La transition est faite sur l'opacité avec :

Code:
.iw img {
   -webkit-transition-property: opacity;
   -webkit-transition-duration: 1s;
   -moz-transition-property: opacity;
   -moz-transition-duration: 1s;
   -ms-transition-property: opacity;
   -ms-transition-duration: 1s;
   -o-transition-property: opacity;
   -o-transition-duration: 1s;
   transition-property: opacity;
   transition-duration: 1s;
}
Ainsi qu'au survol de ces images :

Code:
.iw img:hover {
   opacity : 1;
   filter : alpha(opacity=100);
}
De cette façon on a l'image "active" qui apparaît avec une transition durant 1 seconde quand on survole un des éléments de menu ( et l'image non active est l'image de fond du span qui entoure l'image active ).

Voilà un exemple avec les codes mis en place : http://teta.123.st/

Ea
Aidactif
Aidactif

Messages : 23446
Inscrit(e) le : 04/04/2008

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

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Ven 9 Déc 2011 - 22:51

Waouh! Tout d'abord, un gros merci à vous! *se plonge dans la lecture*

Oh! On peut tout mettre sur la même image comme ça? J'avais jamais vu ça *.* fantastiiique! Il v falloir que j'aille prendre un cours là dessus, c'est vachement pratique! (ça fait des économie d'upload ça!)
Donc alors... si j'ai bien compris, le but est de faire deux images, avec l'une qui est là, et l'autre qui arrive en fondu par dessus... C'est chouette ça!

...
Oh! Et on peut aussi mettre une class partout en même temps avec du javascript? Et bien... c'est fou tout ce qu'on peut faire en fait (dis donc... je vais dormir moins bête ce soir moi!).

Et donc... et bien... ça fait vraiment beaucoup de choses, en tout cas, merci beaucoup à vous de vous en être chargée, et d'avoir bien expliqué, comme ça, je vais pouvoir réviser en comprenant enfin quelque chose Mr. Green
Mais donc, j'ai une question, à quoi sert le "filter:alpha(opacity=0-100)" ? C'est pour gérer l'opacité, au même titre que la propriété transition, sur un navigateur en particulier ? Ah mais sinon... Google est mon ami, j'irai zieuter dans la journée de demain.
Bref! En tout cas, merci vraiment, c'est très sympa à vous de m'avoir aidé =D (parce que moi... j'avais pas trouvé tout ça X3)
Bonne soirée!

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Ea le Ven 9 Déc 2011 - 23:17

Sur MDN il y a d'habitude un tableau pas trop mal pour la compatibilité entre navigateur, ici pour opacity :
https://developer.mozilla.org/en/CSS/opacity#Browser_compatibility

Il est supporté depuis pas mal de version sur les autres navigateurs donc il n'y a que pour IE où il faudrait utiliser la version spécifique ( pour les versions avant IE9, mais vu qu'il me semble qu'il faut vista ou seven pour avoir IE9 il vaut mieux ne pas oublier ce cas ).

( sinon il y a un facteur 100 entre les 2, pour alpha la plus grande valeur c'est 100 et pour opacity c'est 1 )

Ea
Aidactif
Aidactif

Messages : 23446
Inscrit(e) le : 04/04/2008

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

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Ven 9 Déc 2011 - 23:26

Ah d'accord, bien du coup, il y a beaucoup de marge avec alpha! (enfin, avec opacity aussi je crois, j'ai jamais vérifié s'il prenait les dixièmes... breef, de toutes les façons, c'est pas le sujet) ... ok, merci pour le lien, je viens à peine de comprendre la chose (je suis longue à la détente passée une certaine heure). Et bien, il y en a des choses à savoir... je viens de me mettre à apprendre le codage pour arrêter de coder comme un torchon (aussi bien qu'un torchon puisse coder --") et là... quand je vois toutes ces choses, je me demande si... Je devrai pas continuer à squatter le FDF Mr. Green
Et bien dans tous les cas, merci beaucoup pour votre aide!
( Si je rêve de balises qui me poursuivent en hurlant d'une voix rauque et sadique "jaaavascriipt"ce soir, au moins, je saurai pourquoi =3 )
...
(Ok, je stop flood avant de me faire taper sur les doigts!)

Bonne nuit !


Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Afficher des images en fondu

Message par Ea le Ven 9 Déc 2011 - 23:42

Il n'y a pas de marge juste un facteur.

Donc pour 20% d'opacité :

Code:
 opacity : 0.2;
  filter : alpha(opacity=20);
Pour 55,5% de transparence :

Code:
 opacity : 0.445;
  filter : alpha(opacity=44.5);
Pour 0% d'opacité :

Code:
 opacity : 0;
  filter : alpha(opacity=0);
Pour 100% d'opacité :

Code:
 opacity : 1;
  filter : alpha(opacity=100);
Et les plages de valeurs sont de 0 à 1 ou 0 à 100 suivant la propriété.

Ea
Aidactif
Aidactif

Messages : 23446
Inscrit(e) le : 04/04/2008

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

Résolu Re: Afficher des images en fondu

Message par Seriwyth le Sam 10 Déc 2011 - 0:47

Des facteurs? ça me rappelle les maths !
En tout cas, à voir les exemples, j'ai enfin tout compris , merci à vous <3

Seriwyth
****

Féminin
Messages : 227
Inscrit(e) le : 03/03/2011

http://gharendar.forums-actifs.com
Seriwyth 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