City Hunter
Utilisateur : anonyme   Dimanche 15 Décembre 2019 
     
Provenance géographique des visiteurs


SOFUN - Blog, article : Roll-Over à 10000 Yen dimanche 06 novembre 2005 - 16:56
Roll-Over à 10000 Yen


 
J'ai pu constater dernièrement sur les blogs environnants que la question sur la mise en place d'un roll-over intéresse quelques personnes.
Voici donc un petit article pour détailler ce procédé.

D'abord, nous mettons en place notre image de base :

<img src="http://mon.serveur.fr/.../image1.jpg">


Cette image va devoir ensuite être capable de détecter le passage de la souris. Pour cela, nous disposons de deux événement, onMouseOver et onMouseOut, qui sont solicités lorsque le curseur de la souris entre et sort de la zone image.

L'utilisation de ces deux événements est assez simple :
  • onMouseOver="action1"
  • onMouseOut="action2"
    action1 va permettre de faire afficher la nouvelle image et action2 va permettre de faire afficher l'image initiale.

    Bon, j'espère que je ne vais pas embrouiller les esprits.

    Les deux instructions vont donc ressembler à ça :
  • onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'"
  • onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'"

    Afin d'éviter toute mauvaise surprise, il faut bien faire attention d'encadrer les deux URLs de simples guillemets (apostrophes) pour ne pas causer de problème avec les doubles guillemets qui encadrent l'action.

    Il ne reste plus qu'à intégrer les deux événements à l'intérieur même de la balise permettant l'affichage de l'image :
    <img src="http://mon.serveur.fr/.../image1.jpg" onMouseOver="this.src='http://mon.serveur.fr/.../image2.jpg'" onMouseOut="this.src='http://mon.serveur.fr/.../image1.jpg'">

    Bien entendu, il est préférable d'éviter le s retours à la ligne.

    Pour mon exemple concrêt, voici ce que ça donne :

    <img src="http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg" width="400" onMouseOver="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face2.jpg'" onMouseOut="this.src='http://so.fun.free.fr/modules/blog/photos/10000yen_face1.jpg'" border="3">


    Je pense qu'il s'agit de la plus simple manière de faire car elle ne nécessite pas l'appel de fonctions.
    J'espère que cela vous sera utile.
  •  
    publié par Forrest
    Ajouter un commentaire

    Voir les commentaires (23)

     
    génial!
    Merci, oui je pense que ce sera utile un jour ou l'autre!
    Si déjà je sais que je peux le faire...
    Commentaire de lolo (site web) le dimanche 06 novembre 2005 - 20:26

     
    Bonjour ! Voilà qui est expliqué clairement ! Merci de l'avoir explicité: moi qui l'utilise souvent, j'ai souvent des questions pour savoir comment je fais.
    Bonne journée !
    Commentaire de Briesing (site web) le lundi 07 novembre 2005 - 07:56

     
    Alors que je m'apprêtais à rouspéter avant d'aller voir dans le forum d'over-blog, voilà t'y pas que mon Forrest m'explique le tout en détail. Sois béni!Image Hosted by ImageShack.us
    Commentaire de Ludo (site web) le lundi 07 novembre 2005 - 09:35

     
    il y a aussi une version css pour le rollover... ca permet d'alléger le code HTML...
    Commentaire de KM (site web) le lundi 07 novembre 2005 - 11:00

     
    ca tombe a pic!
    Commentaire de Colt Seavers (site web) le lundi 07 novembre 2005 - 12:52

     
    Je suis content que ça plaise, surtout au prix que ça m'a couté ;)

    KM : Je ne connaissait pas cette version. Après avoir fait quelques recherches, je trouve cette méthode un peu plus compliquée. De plus, je ne sais pas ce que ça vaut sur un navigateur Mac.

    Colt : Pendant deux secondes j'ai cru que j'avais un nouveau visiteur.
    Commentaire de Forrest (site web) le lundi 07 novembre 2005 - 13:23

     
    si tu veux je peux te passer de quoi faire une version a 2000円
    Commentaire de KM (site web) le lundi 07 novembre 2005 - 23:53

     
    Je te laisse le soin d'expliquer cette version, moi je n'ai plus les moyens : il doit me rester seulement 102円.
    Commentaire de Forrest (site web) le mardi 08 novembre 2005 - 01:20

     
    Merçi pour tes précieux conseils et du passage sur mon blog . Amicalement .
    Commentaire de christian (site web) le mardi 08 novembre 2005 - 16:45

     
    Bon. J'ai presque regretté que ce ne soit pas de l'hébreu !Je sais pas quand j'aurai le temps d'ingèrer cela et les conseils de Ludo, mais va falloir que j'aprenne. Durdure la vie de blogeuse !
    Commentaire de @line (site web) le mercredi 09 novembre 2005 - 00:25

     
    ah oué tiens, j'ai appris à faire ça cette semaine moi !!
    question : A quoi cela sert-il d'avoir un pseudo et un mot de passe sur ton blog ??
    Commentaire de legnoch (site web) le mercredi 09 novembre 2005 - 15:20

     
    Je m'excuse hein, je ne suis pas encore parti... je fouille je scrute !! Ton blog n'a que 4 articles mais il fourmille déjà de choses intéressantes !!
    Alors il y a un truc que je rêve de faire depuis des semaines sur mon blog, sans que je ne trouve comment.. Et alors là mon coeur bat la chamade car je vois que chez toi le truc, il y est !!!
    Tu es donc l'homme providentiel !!
    C'est le bouton "hasard" là en marge...
    Tu m'explique dis, tu m'expliques ?
    (bave, bave...)
    Commentaire de legnoch (site web) le mercredi 09 novembre 2005 - 15:25

     
    Euh, pour le moment ça me sert à moi et c'est déjà pas mal. Après on verra. Je rappelle que le site est 100% "fait maison".
    Commentaire de Forrest (site web) le mercredi 09 novembre 2005 - 15:25

     
    Avant que mon blog ne devienne tout dégoulinant de bave, voici la fameuse requête SQL que j'utilise :
    SELECT * FROM blog_article ORDER BY RAND() LIMIT 1;
    Il te reste juste à espérer que ton blog te permette de taper dans ce genre de config.

    En dernier recours, je penses avoir une idée pour contourner cet éventuel problème, à condition de pouvoir déposer un script php sur ton blog.
    Commentaire de Forrest (site web) le mercredi 09 novembre 2005 - 15:36

     
    je vais me renseigner pour la requête SQL... ce qu'il y a c'est que je ne suis pas informaticien et dans le cas où on pourrait ça se place comment ce truc ?

    Pour le PHP, je crois savoir que l'on peut !! je suis donc archi preneur !!
    'tin si j'arrive à un résultat je serais trop heureux !!
    Commentaire de legnoch (site web) le mercredi 09 novembre 2005 - 16:22

     
    Je t'ai envoyé un script par mail.
    Par contre je n'ai pas utilisée ma bonne adresse mail : elle est top secrète, tu la garde pour toi, sinon je serais obligé de cramer ta voiture ;)
    Commentaire de Forrest (site web) le mercredi 09 novembre 2005 - 16:41

     
    Bon bin je n'ai rien reçu encore !!
    Ce script c'est pas du java ? C'est du PHP c'est ça ?
    De toute façon je me suis renseigné, mon hébergeur ne permet pas l'utilisation du PHP... alors pour la base de donnée MySQL ça sera un autre jour aussi hein !!
    Mon rêve d'aléatoire s'envole... Vilainie !!
    Commentaire de legnoch (site web) le mercredi 09 novembre 2005 - 20:07

     
    Entre temps, j'ai créé un compte sur over-blog pour voir comment ça marche. D'ailleurs je suis tombé sur ton fil de discussion sur le SQL.
    Vu comment c'est vérouillé, ça risque d'être assez ardu.
    En attendant, il te reste la possibilité de suggérer cette nouvelle fonctionnalité aux développeurs d'over-blog.
    Commentaire de Forrest (site web) le mercredi 09 novembre 2005 - 20:36

     
    Là tout de suite, je suis la seule égarée sur ton site à tenter de comprendre de quoi vous causez Legnoch et toi...Bon ben j'vais dormir c'est trop ouf!
    Commentaire de @line (site web) le jeudi 10 novembre 2005 - 01:16

     
    salut !!
    Oh lala !! si tu connaissais le staff d'OB, ils sont bouchés à l'émeri !!
    Tout ce qui ne vient pas d'eux est systématiquement rejeté, à moins d'insistance générale et de longue durée.
    Et comme les 9/10èmes des blogueurs n'y entendent rien dans tout ça, autant dire que c'est mort !! lol !!
    J'ai enfin reçu ta page en PHP et je la garde précieusement en attendant de pouvoir faire mon truc moi-même. Pour le reste, tu as surement reçu mes mails !!
    @+ Forrest
    :0023:
    Commentaire de legnoch (site web) le jeudi 10 novembre 2005 - 13:50

     
    Tiens au fait, dans la veine du roll-over, j'aimerais bien savoir comment faire un diaporama visible en direct sur mon blog !! Tu vois pour faire défiler les images de mon article d'aujourd'hui au lieu de les coller les unes sur les autres...
    Voili voilou... si t'as le temps à l'occaze de faire un top là-dessus !!
    @+
    Commentaire de legnoch (site web) le jeudi 10 novembre 2005 - 14:31

     
    Un truc qui change simplement de photo toute les N secondes c'est faisable et pas trop dur à expliquer je penses. Si on doit y mettre un mouvement, c'est un peu plus chaud et il faut vérifier la compatibilité. Dans ce dernier cas, ptet que le flash c'est mieux, mais je ne connait pas très bien.
    Je vais me pencher sur la question, ça pourrait être un article intéressant pour beaucoup de bloggueurs.
    Commentaire de Forrest (site web) le jeudi 10 novembre 2005 - 14:37

     
    c'est sur !!
    Merci Forrest !!
    J'vais quand même essayer de ne pas trop t'enquiquiner avec mes idées hein... ;-)
    Après ça, ch'te laisserais peinard quelques temps !! ^_^
    Bon week-end !!
    Commentaire de legnoch (site web) le vendredi 11 novembre 2005 - 05:14

    Ajouter un commentaire




    Nombre de surfeurs égarés en ce moment : 25
    SOFUN - Le Site Où il Fallait Un Nom