Fondu (fade in fade out) d'une image à l'autre au passage du curseur

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Fondu (fade in fade out) d'une image à l'autre au passage du curseur

Rio Grande

bande de nains

Bonjour tout le monde

La question est assez simple, je voudrais donner un effet comme celui présent sur ce site
http://www.liquid.fm/
je trouve l'effet au passage de la souris sur le titre excellent (pour ceux qui aime la Trance c'est une bonne radio, bref passons)

Vous vous doutez bien que j'ai regarde le code source
mais c'est un peu brumeux pour moi, j'ai bien compris que ça marche avec du Javascript, mais après j'arrive à rien (je connais rien au JS ).
En regardant les sources j'ai vu qu'ils utilisent la librairie "mootools".

Je suis allé sur leur site et dans la démo j'ai trouvé qqch qui se rapproche de ce que je veux faire
http://demos.mootools.net/Mouseenter
(exemple 1 avec le carré vert)

Mais quant j'essaye de mettre des images à la place ça marche pas [:autobahn]

Alors je n'ai pas forcément envie d'utiliser cette librairie, surtout que je veux juste faire cet effet pour les boutons de mon menu.
Je n'irais pas jusqu'à demander de me faire le code (quoi que :whistle: ) mais auriez vous des pistes qui pourrait m'aider ? (non pas de gif animé )

merci d'avance

Message cité 1 fois

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

Publicité

mIRROR

Chevreuillobolchévik

bah ca marche avec deux images et un dégradé d opacité :??:

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Rio Grande

bande de nains

on fait comment ?

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

Rio Grande

bande de nains

up [:cerveau sad]

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

mIRROR

Chevreuillobolchévik

tu mets en fond la fin du fondu et au dessus l image "normale"
tu reduis l opacité de la premiere au mouseenter et c est plié
enfin bon tu regardes le code source quoi

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Rio Grande

bande de nains

mouais enfin c'est pas si simple j'ai dû magouiller...
en fait si on veut vraiment faire comme ça, il faut mettre un span dans un div, avec le Div qui à l'image non illuminée et dans le span on fera la variation du logo illuminé.
Dans l'exemple il y a un paramètre "backgroundColor: color" qui doit probablement le forcer à retourner en arrière, mais je sais pas ce qu'il faut mettre pour une image, c'est pour ça que j'ai fais ça... en tout cas j'ai pas trouvé sur le site où il défini le logo_spotlight.png.

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

mIRROR

Chevreuillobolchévik

Code :

<span id="logo" class="spotlight correct-png">
<span style="width: 434px; height: 86px; display: block; background-image: url(http://www.liquid.fm/images/liquidfmlogo_spotlight.png); visibility: hidden; opacity: 0;"/>
</span>

mais bon c est un peu nase comme methode
tu fous juste ton image dans un div

genre

Code :

<div style="background-image:url(spotlight.png)">
    <img src="logo.png">
</div>

et l effet est tres simple a realiser sans mootools
un petit setInterval des familles
et tu accedes a l opacité d un element en faisant elm.style.opacity

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Rio Grande

bande de nains

t'en gentil, mais j'y connais rien en JS, c'est pour ça que je demande.

Message cité 1 fois

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

mIRROR

Chevreuillobolchévik

Rio Grande a écrit :

Je n'irais pas jusqu'à demander de me faire le code (quoi que :whistle: ) mais auriez vous des pistes qui pourrait m'aider ? (non pas de gif animé )

Rio Grande a écrit :

t'en gentil, mais j'y connais rien en JS, c'est pour ça que je demande.

je t ai donné les pistes [:cosmoschtroumpf]
sinon jte donne un exemple mais c est pas aussi souple que mootools

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
    <title>Test</title>
    <script type="text/javascript">

function fadeImages(id,nbTrans,delay) {

    var elm = document.getElementById(id).getElementsByTagName('img')[0]; // l element qui doit etre dégradé
    elm.style.opacity = 1;
    
    elm.onmouseover = function() {makeTrans(1);}
    elm.onmouseout = function() {makeTrans(0);}
    
    function makeTrans(start) {
        var opacity = start;
        var interval = setInterval(function() {
            elm.style.filter = "alpha(opacity="+100*opacity+" )";
            elm.style.opacity = opacity;
            opacity += Math.pow(-start,start)/nbTrans;
            if (opacity<0 || opacity>1) {
                clearInterval(interval);
                var end = start == 1 ? 0 :1
                elm.style.filter = "alpha(opacity="+100*end+" )";
                elm.style.opacity = end;
            }
        },delay);
    
    }

        
}

onload = function() {
    fadeImages("logo",50,20);
};
    </script>
    <style type="text/css">
#logo {height:86px;width:434px;background:url(spotlight.png) no-repeat;}
    </style>
</head>
<body>            
<div id="logo" style="">
    <img src="logo.png">
</div>

</body></html>

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Rio Grande

bande de nains

en effet, il faut pas passer vite sur le logo au risque d'avoir un crise d'épilepsie
je vais voir si j'arrive à piger qqch au code que tu m'as passé.

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

Publicité

mIRROR

Chevreuillobolchévik

y a evidemment moyen de faire plus souple en js pur, mais je t avoue que j ai la flemme et comme j avais deja une fonction analogue a celle ci qui trainait dans mes archives ...

au moins la t as l idee de base sur du code plutot simple: une fonction qui se repete, tu fais varier l opacité dans le sens qui te plait et tu l appliques a ton element
les lignes 18 et 24 sont pour ie6, les lignes 19 et 25 pour tous les autres

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

mIRROR

Chevreuillobolchévik

putain chuis con c etait tout bete [:tinostar]

Code :

function fadeImages(id,nbTrans,delay) {
 
    var elm = document.getElementById(id).getElementsByTagName('img')[0]; // l element qui doit etre dégradé
    elm.style.opacity = 1;
    var interval;
    
    elm.onmouseover = function() {if (interval) clearInterval(interval);makeTrans(1);}
    elm.onmouseout = function() {if (interval) clearInterval(interval);makeTrans(0);}
    
    function makeTrans(start) {
        var opacity = start;
        interval = setInterval(function() {
            elm.style.filter = "alpha(opacity="+100*opacity+" )";
            elm.style.opacity = opacity;
            opacity += Math.pow(-start,start)/nbTrans;
            if (opacity<0 || opacity>1) {
                clearInterval(interval);
                var end = start == 1 ? 0 :1
                elm.style.filter = "alpha(opacity="+100*end+" )";
                elm.style.opacity = end;
            }
        },delay);
    
    }
 
        
}
 
onload = function() {
    fadeImages("logo",50,20);
};

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Rio Grande

bande de nains

mieux, mais quand on se retire avant la fin du fade, l'image passe directement à l'image "complète" pour en suite retourner à l'image initiale.

---------------
Topics : NFSU2 - NFS : Most Wanted - Volant PC Site : NFS-Mania.com

mIRROR

Chevreuillobolchévik

bah en fait je suis du genre radin donc mootools je trouve ca completement overkill pour ce genre d effets
j avoue que je suis pas vraiment au point sur ce genre de trucs (je suis en train de developper une petite bibliotheque pour mon usage personnel)
mais si tu as juste besoin de ce genre d effets pour ton site je te conseille bytefx
essaie juste un peu de comprendre ce que fait mon code et regarde ici
http://developer.mozilla.org/en/do [...] _Reference et la
http://developer.mozilla.org/en/do [...] _Reference
pour les fonctions qui te paraissent obscures et apres mootools et bytefx te deviendront simples d utilisation
si t as questions hesite pas

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

FORUM HardWare.fr

Programmation

HTML/CSS

Fondu (fade in fade out) d'une image à l'autre au passage du curseur

Sujets relatifs
probleme redimensionnement image dans un tableau	Problème d'image background en CSS sortie d'Adobe...
affichage d'image et ouverture de fichiers sous Firefox	charger un swf et le faire atterir à une image clef (qui a un drapeau)
envoi d'un buffer contenant une image	changer le curseur pour un glisser sur image
Mettre le corps sur une image	Bords arrondis autour d'une image
afficher membre connecté avec une image perso
Plus de sujets relatifs à : Fondu (fade in fade out) d'une image à l'autre au passage du curseur

Page générée en 0.066 secondes