Effet Image

Discussion dans 'Web, design' créé par Onefive, 3 Septembre 2003.

Statut de la discussion:
Fermée.
  1. Offline
    Onefive Freddy Tougaux
    Voila j aimerai créé une image qui reagi au passage de la souris


    quand on ne passe pas dessus l image est pixeliser

    quand on passe elle devient net


    Merci d avance :oops:
    Onefive, 3 Septembre 2003
    #1
  2. Offline
    Fogiafor Elite
    du parle de quoi sur le un site web???? soit plus explicite
    Fogiafor, 3 Septembre 2003
    #2
  3. Offline
    RedCross ex membre
    Oui, c'est un simple filtre de IE, je te file ça de suite ...
    RedCross, 3 Septembre 2003
    #3
  4. Offline
    k o D Belge !
    je sais qu'avec ie on savait faire ce genre de truc facilement, mais je sais plus où j'ai vu çà.
    k o D, 3 Septembre 2003
    #4
  5. Offline
    Onefive Freddy Tougaux
    Et en fait ca marche comment?


    J aimerai prendre une image nimporte la quel et savoir fair cette effet c est interessant pour un site :)


    (C est pour moi et pour le site de PRIMAL bah oui je le fais puisque personne veut l aidé :) )
    Onefive, 3 Septembre 2003
    #5
  6. Online
    EINST Elite
    en fait, tu dois avoir les 2 images, 1 pixellisé et l'autre normal.

    puis dans ton code html, t'auras un truc qui met tel ou tel image en fonction que la souris se trouve dessus ou non, v rechercher la ligne de code exact...
    EINST, 3 Septembre 2003
    #6
  7. Offline
    hehe PANCAKE !
    ou alors un simple rollover
    2 images: 1 pixellisée, 1 non pixellisée
    il ne reste plus qu'à définir le rollover à partir de ces 2 images
    mais si un filtre IE existe...
    hehe, 3 Septembre 2003
    #7
  8. Offline
    ♥♥♥ ex membre
    Je pensais plutôt comme toi... et non à ce filtre IE! :D
    ♥♥♥, 3 Septembre 2003
    #8
  9. Offline
    Onefive Freddy Tougaux
    Et je fais ca avec?


    flash, editeur de page html, code HTML a ecrire ...
    Onefive, 3 Septembre 2003
    #9
  10. Offline
    Petit_Raisin Elite
    Code:
    <img src='tonimagenormal.jpg' onMouseOver="this.src="tonimagepixel.jpg" OnMouseOut="this.src='tonimagenormal.jpg'">
    Petit_Raisin, 3 Septembre 2003
    #10
  11. Offline
    RedCross ex membre
    Grace aux effets IE, c'est automatique et très pratique évidemment :)

    Le code de ton image :

    Code:
    <img src=images.jpg border=0 width=151 height=198  style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)" onLoad="ejs_img_fx(this)" onMouseOver="ejs_img_fx(this)">
    Je pense qu'il faut aussi mettre ce script dans le HEAD de ta page :

    Code:
    <script>
    function ejs_img_fx(img){ 
    if(img && img.filters && img.filters[0]){
    img.filters[0].apply();
    img.filters[0].play();
    }
    }
    
    </script>
    RedCross, 3 Septembre 2003
    #11
  12. Offline
    Petit_Raisin Elite
    IE seulement :oops:
    Petit_Raisin, 3 Septembre 2003
    #12
  13. Offline
    Onefive Freddy Tougaux

    je sais j en demande beaucoup mais tu serai pas me donner un exemple? tu fait une image vite fais sur une page html :oops:
    Onefive, 3 Septembre 2003
    #13
  14. Offline
    RedCross ex membre
    RedCross, 3 Septembre 2003
    #14
  15. Offline
    Onefive Freddy Tougaux
    Le code que tu m a donné ne marche pas


    Je met ton Script dans le language HTML de dream puis je remplace l image et ca fais rien
    Onefive, 3 Septembre 2003
    #15
  16. Offline
    Onefive Freddy Tougaux
    vla le code de la page quand je commence une nouvelle page

    Code:
    <html>
    
    <head>
    <title>Sans titre</title>
    <meta name="generator" content="Namo WebEditor v5.0">
    </head>
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <p> </p>
    </body>
    
    </html>
    Ou dois je mettre vos script?
    Onefive, 3 Septembre 2003
    #16
  17. Offline
    Petit_Raisin Elite
    fais comme je t'ai dit qq lignes plus haut, c'est 7 fois plus simple....
    Petit_Raisin, 3 Septembre 2003
    #17
  18. Offline
    RedCross ex membre
    Bon, c'est quand même pas si compliqué que ça.

    Le javascript est à mettre dans le head (donc : avant la balise </head> )
    Et le long code, c'est l'image c'est tout. Tu remplace "image.jpg" par le nom de fichier de TON image.

    Enfin, c'est clair non ?
    Je te confirme que ça fonctionne nickel.
    RedCross, 3 Septembre 2003
    #18
  19. Offline
    Onefive Freddy Tougaux
    Code:
    <html>
    
    <head>
    <img src='file:///D|/Marc/counter_logo.jpg' onMouseOver="this.src=" file:///D|/Marc/counter_logoflou.jpg" OnMouseOut="this.src='file:///D|/Marc/counter_logo.jpg'">
    <title>Sans titre</title>
    <meta name="generator" content="Namo WebEditor v5.0">
    </head>
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    
    
    
    <p> </p>
    </body>
    
    </html>
    vla mon code je comprend pas


    (dsl je sais je suis mancho)
    Onefive, 3 Septembre 2003
    #19
  20. Offline
    RedCross ex membre
    Ha ouais... je vois ...
    Bon, faut quand même les bases de l'html quand on commence à faire ça hein ;)


    Code:
    <html> 
    
    <head> 
    <title>Sans titre</title> 
    <meta name="generator" content="Namo WebEditor v5.0"> 
    </head> 
    
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> 
    
    <img src='counter_logo.jpg' onMouseOver="this.src="counter_logoflou.jpg" OnMouseOut="this.src='counter_logo.jpg'"> 
    
    <p> </p> 
    </body> 
    
    </html>

    oui, et vire ça :
    Code:
    'file:///D|/Marc/counter_logo.jpg' 
    Mais fait plutot ça sinon, ca n'ira pas online :
    Code:
    'counter_logo.jpg' 
    RedCross, 3 Septembre 2003
    #20
Statut de la discussion:
Fermée.