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.


    Images aléatoires (ou rotateur d'image)

    Partagez
    avatar
    Soulmate!
    Age : 30Messages : 148

    le Dim 18 Jan 2009 - 14:34


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Images aléatoires (ou rotateur d'image)



    Edit Responsable (Onyx) : Le sujet étant devenu désuet, l'astuce a été remplacée par celle sur les bannières de Margii et adaptée pour fonctionne pour n'importe quelle image.




    Salut !

    Il y eu des demandes pour un rotateur d'images , c'est à dire une insertion d'image qui change à chaque fois que la page est actualisée. Cette astuce est pour vous permettre d'atteindre ce résultat.


    Étape 1


    Allez où vous voulez mettre votre image aléatoire et mettez-là comme cela :
    Code:
    <img src="url de image de base" alt="description de l'image" id="IDIMAGE" />

    url de image de base = L'url de l'image de base de votre image.
    description de l'image = Description de l'image pour les personnes avec handicaps visuels.
    IDIMAGE = Id de l'image qui va servir à sélectionner l'image dans le javascript.

    C'est tout pour cette étape ~


    Étape 2


    Rendez-vous dans la gestion des javascripts :
    (Panneau Administration > Modules > Gestion des javascripts)

    Assurez-vous d'avoir activé vos javascript.

    Créez un nouveau javascript et mettez-y un titre comme 'Image aléatoire'. Choisissez le placement "Sur toutes les pages".

    Ensuite collez-y ce code :
    Code:
    $(function(){

      var image_aleatoire = new Array();

      image_aleatoire[0] = 'URL IMAGE 1';
      image_aleatoire[1] = 'URL IMAGE 2';


      var random = image_aleatoire[Math.floor(Math.random()*image_aleatoire.length)];

      $('#IDIMAGE').attr('src', random);
    });

    L'url de l'image de "image_aleatoire" 0 devra être celle de votre première image.
    Quant à l'url de l'image de "image_aleatoire" 1, elle devra être votre deuxième image.
    Personnellement je vous conseille de faire des images de la même taille.
    Le IDIMAGE est à remplacer par l'id de l'image que vous avez installée sur votre forum/site.

    Vous pouvez bien sûr rajouter des images, il vous suffit de copier ce code :
    Code:
    image_aleatoire[chiffre] = 'URL IMAGE';

    Et de le placer en-dessous de "image_aleatoire" 1.

    N'oubliez surtout pas de modifier le chiffre, si deux images ont le même chiffre entre crochets ça risquerai de ne pas marcher.
    Vous pouvez bien entendu placer autant d'images que vous voulez
    Enregistrez votre javascript et ce sera bon !

    Enjoy!

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    Merci à Never Utopia et à tous les graphistes ici présent pour leur efforts .. vraiment bravo et merci.
    avatar
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Lun 19 Jan 2009 - 12:07

    Excellent, merci beaucoup.
    Un code vraiment tout ce qu'il y a de plus simple, compréhensible par tous le pense.
    Petite précision, logique, mais je préfère...
    Le dernier code se met bien entendu à l'endroit où vous souhaitez placer votre (vos) bannière.

    Je pense que d'ici peu je ferais un script pour faire tourner l'affichage en fonction des heures... pas mal pour un RPG je pense Wink

    (je préfère vous en fournir un en php, qu'en javascript pour le moment).

    Il est possible d'utiliser ce script sur les forums de type Forum Actif, enfin je pense...
    L'idée serait de concevoir une page script.php contenant le code que nous fourni notre ami Soulmate.
    Ensuite dans le template overall_header_new il suffirait de placer une iframe appelant notre script :
    Code:
    <iframe src="script.php" width="LARGEUR" height="HAUTEUR" frameborder="0" ></iframe>
    Balise à placer à l'endroit où vous voulez mettre votre bannière

    Pour plus d'info sur l'iframe : info iframe

    J'ai pas essayé encore, mais ça doit être faisable je pense.

    Bises.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Soulmate!
    Age : 30Messages : 148

    le Lun 26 Jan 2009 - 18:47

    de rien ..
    je me souviens que le iframe est une balise qui marche seulement sur IE (faites par microsoft) .. je sais pas si son utilisation s'est étendu ..
    si c'est le cas , ça serai vraiment génial ...

    pour un rotateur selon l'heure .. je vais voir ce que je peux faire , ça serai excellent pour un RPG bien entendu ..



    Merci à Never Utopia et à tous les graphistes ici présent pour leur efforts .. vraiment bravo et merci.
    avatar
    Onyx
    FémininAge : 23Messages : 2881

    le Ven 31 Mar 2017 - 17:19

    Bonjour!

    L'astuce a été remplacé par celle de Margii qui est moins lourde et plus facile à mettre en place.



    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Avr 2017 - 6:02