AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Rollover/MouseOver en html + javascript

    Partagez
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Ven 3 Oct 2008 - 0:33

    Hello, j'ai failli oublier de poster l'astuce ici...
    Elle ne figurera qu'à trois emplacements différents du forum en même temps ^^
    Celui qui me dit qu'il ne l'a pas vu, c'est qu'il ne l'a pas cherché Razz

    Pour éviter de me répéter, je "m'auto-cite" :
    @Riku Asakura a écrit:Il s'agit d'un code tout bête liant html et javascript comme celui-ci :

    Code:
    <img  onmouseover="src='IMAGE_1.JPG'; " onmouseout="src='IMAGE_2.JPG';" src="IMAGE_2.JPG" alt="Texte Alternatif" />

    Donc, que voudrait dire ce code ?
    1 - Ouverture de la balise img, je vais donc intégrer une image qui...
    2 - onmouseover > quand ma souris passe sur l'image, j'affiche PREMIERE_IMAGE
    3 - onmouseout > quand la souris sort de l'image, j'affiche DEUXIEME_IMAGE
    4 - src=... > j'oblige ainsi le navigateur à charger et afficher une image comme si elle était destinée à être statique
    5 - alt= ... > un texte alternatif pour ceux qui naviguent sans afficher les images Wink

    Cela pourrait nous donner un truc dans ce genre :


    Après il suffirait de découper une image complète en plusieurs images (tranches) de les collées les unes aux autres pour reconstituer l'image, et sur certaines on aurait cet effet de rollover.
    Il faut juste trouver les codes précis à modifier sur les forum-actifs pour implanter cette méthode, notamment sur les emplacements bannière, mais je crois que je tiens le bon bout Razz

    PS : cette méthode utilise du javascript, si votre visiteur n'a pas activé le javascript, il va se retrouver avec une image fixe qui sera, ici, la dernière image renseignée dans le code.
    Merci


    Dernière édition par Riku Asakura le Mer 1 Avr 2009 - 13:32, édité 1 fois
    k1993
    MasculinAge : 20Messages : 585

    le Ven 3 Oct 2008 - 12:02

    Merci pour la méthode
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Lun 13 Oct 2008 - 2:07

    Mais de rien ^^
    Si vous avez besoin de plus de détail sur la manière d'intégrer un tel code... je suis là Razz

    Bonne soirée.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Stef-Sensei
    FémininAge : 28Messages : 1490

    le Lun 13 Oct 2008 - 14:06

    hum... Oh toi Dieu RA, j'en fais appelle à toi (non, surtout j'en fais trop x'DDD) ba exactement.. j'aurais aimer savoir comment on fait pour intégré un tel code.. c'est beau de l'avoir mit, sa m'intéresse en plus.. parcontre, j'arrive pas à l'utiliser ^^""
    Alors.. une tite explication si tu peux tonton Riku :)




    Each Day Is A Gift & Not A Given Right, Leave No Stone Unturned, Leave Your Fears Behind
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Lun 13 Oct 2008 - 22:15

    lol Stef ^^
    Pas de problème, alors pour intégrer quelque chose j'ai besoin de deux éléments :
    - Que faut-il intégrer ?
    - Où faut-il l'intégrer ?

    Pour la première question, je me doute qu'il s'agisse du code que j'ai donné Razz
    Par contre pour la deuxième c'est à toi de me le dire XD

    Quoiqu'il en soit c'est du html, il faut donc une page de code pour l'intégrer, ou un emplacement où le html est accepté... (exemple sur les widgets, sur l'accueil, sur les descriptif des forums, ou encore sur les templates... le tout sur les Forum-Actif bien entendu, mais pas uniquement Wink )




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Stef-Sensei
    FémininAge : 28Messages : 1490

    le Lun 13 Oct 2008 - 22:21

    super question RA, je vais demander celui qui ma demandé la 1ère question x'DD...
    enfaite c'est un de mes copains, il a parlé de vouloir faire un truc du genre sur l'acceuil de son fow, mais ne savait pas comment faire, alors en voyant ton astuce, je lui en ai parler, alors il m'a demandé comment on intègre... alors je vais lui demander et je te préviens dès qu'il me réponde ^^ (c'est surtout dès que je tombe sur lui à la fac >.<)
    merci RA ^^




    Each Day Is A Gift & Not A Given Right, Leave No Stone Unturned, Leave Your Fears Behind
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Jeu 16 Oct 2008 - 16:34

    Pour placer ça sur l'accueil, il suffit d'activer le HTML du cadre d'édition (dans Affichage > page d'accueil | Généralité) et de copier coller ce code.
    Ensuite il remplace les liens d'images par les siens.

    Il peut très bien placer des images fixes de chaque côté, et placer plusieurs de ces types d'images "animées' un peu partout sans problème.
    Le seul truc c'est que je lui déconseille de passer en mode "aperçu" pour voir ce que ça donne, il vaut mieux sauvegarder sans aperçu Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Stef-Sensei
    FémininAge : 28Messages : 1490

    le Jeu 16 Oct 2008 - 18:19

    oki compris RA, donc j'essaye le truc sur mon Fow test pour être sur de bien lui expliquer aussi !!!
    merci Riku ^^




    Each Day Is A Gift & Not A Given Right, Leave No Stone Unturned, Leave Your Fears Behind
    Yosuke
    MasculinAge : 22Messages : 2664

    le Mar 31 Mar 2009 - 18:22

    Riku ...
    J'ai voulue essayé la méthode dans la description du site...
    Mais sa met un texte après je passe la souris dessus sa met l'image xD
    Hors je ne veux pas du texte mais seulement mes deux images.

    Je voulait donc faire une sorte de rotateur d'image avec ce code, lorsque l'on touche sa change l'image. Mais rien à faire... Sa me met le texte qu'il y a écrit dans le ' alt="texte"/>

    Merci de me dire si c'est possible ou pas d'enlevé ce texte et de faire sa comme un header en Javascript donc ^^




    Kit by Yosuke
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mar 31 Mar 2009 - 22:27

    En fait ça fait ça tout simplement parce que IMAGE_2.jpg est mal renseignée :
    Rappel du code
    Code:
    <img  onmouseover="src='IMAGE_1.JPG'; " onmouseout="src='IMAGE_2.JPG';" src="IMAGE_2.JPG" alt="Texte Alternatif" />
    Vérifies que onmouseout="src='IMAGE_2.JPG'; " soit bien renseigné (donc que ton image est bien un lien d'image), et que src="IMAGE_2.JPG" le soit de même.

    Sinon envoie le code sur le topic que je regarde ça ^^
    Bise




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    SpanK
    MasculinAge : 23Messages : 1295

    le Mar 23 Juin 2009 - 12:37

    Est ce que c'est possible de créer la même chose, pour les boutons de navigation ?
    Je m'explique, lorsque l'on passerais la souris sur "acceuil" par exemple, le bouton s'allumerais (du moins l'autre image apparaitrais).
    Merci d'avance Wink
    Okhmhaka
    FémininAge : 31Messages : 31717

    le Mar 23 Juin 2009 - 13:11

    Bien sûr, mais tu ne pourras pas te servir de la navigation normale, il te faut tout mettre dans les templates, j'avais fais ça pour le thème précédent.



    Caly
    MasculinAge : 24Messages : 16

    le Sam 31 Oct 2009 - 13:02

    Merci pour cette méthode, je l'utilise partout maintenant.
    Merci. :)



    Si j'en tue un, c'est un meurtre, si j'en tue des millions, c'est une statistique.
    fascicularia
    MasculinAge : 48Messages : 181

    le Lun 7 Déc 2009 - 19:34

    Génial, merci Riku
    Mymz
    FémininAge : 24Messages : 24

    le Mer 6 Juin 2012 - 23:25

    Hello !

    Je voudrais savoir s'il y a une version qu'on pourrait faire afficher dans les sujets normaux... Genre pour un arrangement d'images pour le staff on pourrait dire. L'effet est vraiment bien, je l'avais vu y'a longtemps sur un forum dans un formulaire de fiche et j'aimerais vraiment le retrouver. En cherchant, celui-ci est le seul que j'ai vu et vu que ça ne fonctionne pas à l'endroit désiré, je me demandais x)

    Merci d'avance pour ta réponse !



    :friends:
    Reiõ
    MasculinAge : 23Messages : 193

    le Lun 9 Juil 2012 - 14:05

    Merci Wink
    Aelita
    FémininAge : 23Messages : 277

    le Jeu 26 Juil 2012 - 2:03

    Thank !
    Capouccino
    FémininAge : 18Messages : 165

    le Mer 6 Nov 2013 - 13:33

    Merci bien ^^



    "Espérer l'inespérable c'est croire en l'impossible."
    Contenu sponsorisé

    Aujourd'hui à 19:18


      La date/heure actuelle est Mer 7 Déc 2016 - 19:18