Défilement image

Fermé

brahimich - 13 déc. 2013 à 16:12
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 13 déc. 2013 à 17:30

Bonjour,
j'aimerais que mes images défilent du haut vers le bas mais je ne sais pas comment faire, voici mon code ..

<marquee onmouseout="this.start();" onmouseover="this.stop();" loop="infinite" scrollamount="5" direction="down" behavior="slide">
        <a href="pageaddict.html" target="_blank"><img src="addict.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="givenchy.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="hypnose.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="logo" border="0" /></a>
</marquee>

Cordialement

A voir également:

Défilement image
Image iso - Guide
Barre de défilement - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image iso windows 10 - Guide

2 réponses

Réponse 1 / 2

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
13 déc. 2013 à 17:09

Salut,

La balise marquee n'est pas standard et présente des risques d'incompatibilité.
Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee

Tourne toi plutôt vers du javascript pour reproduire le comportement de la balise marquee.
Tu peux par exemple utiliser ce plugin jQuery : https://plugins.jquery.com/marquee/
Démo : http://jquery.aamirafridi.com/jquerymarquee/

Bonne journée

Réponse 2 / 2

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 13/12/2013 à 17:33

Salut

comme la dit Pitet

La balise marquee n'est pas standard et présente des risques d'incompatibilité. .........Tourne toi plutôt vers du javascript

si tu ne pige pas jquery ou que tu prefere utiliser du js de base pour x raisons , voila le meme script que j avais donner pour du texte https://forums.commentcamarche.net/forum/affich-29058125-modifier-mon-scripts-svp#3

mais avec des images :-))

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
body{
      margin: 0;
      padding: 0;
    }

    .cadre {
      background: #DBFFFF url('http://visiocam-sitefr.sitego.fr/fichiers_sites/37247/gti.png');
      border: 5px outset #e0e0e0;
      height: 800px;
      margin: auto;
      width: 611px;
    }

    #defboite {
      background: white;
      border: black 3px solid;
      text-align: center;
      height: 250px;
      width: 250px;
      margin: auto; /* centre horizontalement */
      margin-top: 275px;/* centre verticalement = 275px + la moitie du height (125px)=400px=centre de la div cadre (800px/2=400px) */
      overflow: hidden; /* cache le texte hors de cette div */
    }

    #defile {
      position: relative;
      margin-top: 1px;
      background-color: transparent;
    }

    p.texte {
      color: red;
    }

    </style>
  </head>
  <body>
    <div class="cadre">
      <div id="defboite">
        <p id="defile" class="texte">
           <a href="pageaddict.html" target="_blank"><img src="addict.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="givenchy.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="hypnose.jpg" border="0" /></a>
        <a href="siteàfaire" target="_blank"><img src="logo.png" border="0" /></a>
        </p>
      </div>
    </div>
    <script>
//<![CDATA[
    var defile;// l'element a deplacer
    var posinit = 250; // position de depart horizontal minimum = height de #defboite
    var poscrnt = posinit;
    function Defile() {
    if (!defile) defile = document.getElementById('defile');
    if (defile) {
      if(poscrnt < ( - defile.offsetHeight) ){
         poscrnt = posinit;
                } else {
         poscrnt+= -1; // pixel par deplacement
      }
      defile.style.top = poscrnt+"px";
    }
    }
    setInterval("Defile()",20); // delai de deplacement
    //]]>
    </script>
  </body>
</html>

ne t occupe pas du cadre !! c est <div id="defboite"> ses enfants ,sa css (essentiellement le height a cause du reglage de la var posinit dans le js et de la taille de tes images )+ le js en bas de la page qui t interesse

a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Discussions similaires