Afficher des images en fondu
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Afficher des images en fondu
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
Est-ce que quelqu'un aurait une idée pour m'éclairer un peu? ça serait vraiment sympa à vous =)
Merci d'avance !
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
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
Re: Afficher des images en fondu
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
J'ai essayé de faire une recherche dessus, mais je m'y prend peut-être mal parce que j'ai pas trouvé x__x
Re: Afficher des images en fondu
Heu ... up =)
Re: Afficher des images en fondu
Voici mon petit up du soir ! =D
Re: Afficher des images en fondu
Bonsoir
Je passe uper mon sujet pour qu'il ne tombe pas dans les méandres du vide sidéral !
Bonne soirée à vous tous =D
Je passe uper mon sujet pour qu'il ne tombe pas dans les méandres du vide sidéral !
Bonne soirée à vous tous =D
Re: Afficher des images en fondu
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
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.
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;
}
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
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Afficher des images en fondu
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*
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 ♥
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*
De quoi qui s'agit? C'est la liste des ingrédients du coca?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
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 ♥
Re: Afficher des images en fondu
Bonsoir!
Pour éviter de tomber dans l'oubli... je fais un p'tit up en passant =)
Pour éviter de tomber dans l'oubli... je fais un p'tit up en passant =)
Re: Afficher des images en fondu
Okay, donc déjà si je prends ce que vous avez en retirant la transition, l'attribut class et les trucs inutiles on a :
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 :
Le code javascript ne fera qu'entourer chaque :
Voilà un exemple avec les codes mis en place : http://teta.123.st/
- 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);
}
- 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; }
- Code:
$(function() {
$("a.mainmenu > img[id]").each(function() {
$(this).wrap('<span id="' + $(this).attr("id") + '" class="iw" />')
})
});
Le code javascript ne fera qu'entourer chaque :
- Code:
<img id="i_icon_mini_icon" />
- Code:
<span id="i_icon_mini_icon" class="iw" />
- Code:
.iw img {
opacity : 0;
filter : alpha(opacity=0);
}
- 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;
}
- Code:
.iw img:hover {
opacity : 1;
filter : alpha(opacity=100);
}
Voilà un exemple avec les codes mis en place : http://teta.123.st/
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Afficher des images en fondu
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
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!
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
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!
Re: Afficher des images en fondu
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 )
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
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Afficher des images en fondu
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
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 !
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 !
Re: Afficher des images en fondu
Il n'y a pas de marge juste un facteur.
Donc pour 20% d'opacité :
Donc pour 20% d'opacité :
- Code:
opacity : 0.2;
filter : alpha(opacity=20);
- Code:
opacity : 0.445;
filter : alpha(opacity=44.5);
- Code:
opacity : 0;
filter : alpha(opacity=0);
- Code:
opacity : 1;
filter : alpha(opacity=100);
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Afficher des images en fondu
Des facteurs? ça me rappelle les maths !
En tout cas, à voir les exemples, j'ai enfin tout compris , merci à vous <3
En tout cas, à voir les exemples, j'ai enfin tout compris , merci à vous <3
Sujets similaires
» Images succédant par un fondu
» Paramètres images à afficher
» Impossible d' afficher les images
» Images impossibles à afficher
» Images qui refusent de s'afficher
» Paramètres images à afficher
» Impossible d' afficher les images
» Images impossibles à afficher
» Images qui refusent de s'afficher
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum