Testetana
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Testetana

- Salut Invité -
 
AccueilAccueil  PortailaaaPortailaaa  GalerieGalerie  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Mai 2024
LunMarMerJeuVenSamDim
  12345
6789101112
13141516171819
20212223242526
2728293031  
CalendrierCalendrier

 

 Html : marquee défilant sur une image

Aller en bas 
AuteurMessage
Adminb
Ce que tu veux comme texte
Adminb


Messages : 230
Réputation : 0
Date d'inscription : 12/06/2009
Umore : &

En savoir plus sur moi
test:

Html : marquee défilant sur une image Empty
07122009
MessageHtml : marquee défilant sur une image

Bonjour,


On peut faire un "up" après 24 heure sans réponse à un message, donc pas de problème ;)

Pour ce qui est de ce que vous voulez, voilà ce que j'ai essayé :

Code:
<div style="width:1024px;height: 174px;background-image:url(http://i84.servimg.com/u/f84/11/54/55/36/album10.jpg);position:relative;">
   <marquee style="position: absolute;top: 34px; left: 276px;width:478px;height:105px;">
      <img src="http://2img.net/i/fa/i/smiles/icon_mrgreen.png" alt="mrgreen"/>
      <img src="http://2img.net/i/fa/i/smiles/icon_batman.png" alt="batman"/>
      <img src="http://2img.net/i/fa/i/smiles/icon_mrgreen.png" alt="mrgreen"/>
      <img src="http://2img.net/i/fa/i/smiles/icon_batman.png" alt="batman"/>
      <img src="http://2img.net/i/fa/i/smiles/icon_mrgreen.png" alt="mrgreen"/>
      <img src="http://2img.net/i/fa/i/smiles/icon_batman.png" alt="batman"/>
   </marquee>
</div>
Je crée un bloc ( avec la balise <div> et sa balise de fin </div> ) de 1024 pixels de largeur et 174 pixels de hauteur auquel je met l'image voulue comme image de fond.

Ensuite à l'intérieur de ce bloc, je crée une zone de défilement ( par défaut cela défile de la droite vers la gauche ) que je positionne au bonne endroit et à laquelle je donne la bonne largeur et hauteur.

Pour des explications supplémentaire :

  • L'attribut d'une balise style="..." permet de définir du code CSS s'appliquant à cette balise ( ce code CSS se trouvera à la place des ... ).
  • <div> et </div> sont des balises destinées à faire de blocks.
  • <marquee> et </marquee> sont des balises propriétaires ( c'est à dire que c'est juste une possibilité donné en plus par certain navigateur mais que ce n'est pas quelque chose de définit comme étant une partie devant faire partie du html ).
  • "<img src="adresse" alt="texte"/>" permet d'afficher une image, qui aura comme adresse l'adresse se trouvant à côté de src et le texte se trouvant après alt sert aux non-voyants et dans le cas où si l'image serait inaccessible.
  • "width: 1024px;" permet de dire que la largeur doit être de 1024 pixels.
  • "height: 174px;" permet de dire que la hauteur doit être de 174 pixels.
  • "background-image:url(https://i.servimg.com/u/f84/11/54/55/36/album10.jpg);" permet de dire que le bloc doit avoir comme image de fond l'image https://i.servimg.com/u/f84/11/54/55/36/album10.jpg.
  • "position:relative;" permet que le bloc soit considéré comme positionné, ce qui permet de positionner un bloc à enfant ( c'est à dire se trouvant à l'intérieur ) par rapport à lui.
  • "position: absolute;" permet de dire qu'on pourra positionner le bloc par rapport au premier élément parent positionné ( dans notre cas on a positionné le div juste au dessus, donc on pourra positionner le marquee par rapport aux coordonnée de ce div.
  • "top: 34px;" permet de dire que l'élément doit être positionné à 34 pixels du bord haut du premier élément parent positionné.
  • "left: 276px;" permet de dire que l'élément doit être positionné à 276 pixels du bord gauche du premier élément parent positionné.

Cordialement.
Revenir en haut Aller en bas
Partager cet article sur : reddit

Html : marquee défilant sur une image :: Commentaires

Aucun commentaire.
 

Html : marquee défilant sur une image

Revenir en haut 

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Testetana :: Script :: HTML-
Sauter vers: