Défilement image

brahimich -
RAD ZONE Messages postés 5362 Statut Contributeur - 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

Afficher la suite

2 réponses

Réponse 1 / 2
Pitet Messages postés 2845 Statut Membre 530

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
0

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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. ♣

Défilement image

2 réponses

Discussions similaires

Newsletters