3 résultats trouvés pour auteur_Lucky_Number

Salut c'est encore moi ! Disons que j'ai du répondant en ce qui concerne les astuces, soit aujourd'hui je viens vous proposer la mise en place d'un menu déroulant ! Avec le code suivant vous pourrez rendre vos forum un peu moins encombrés par les liens .

IMPORTANT : Cette astuce ne fonctionne pas dans les messages.

Code:

<form name="Menuderoulant" method="post">
  <select name="wxlmenu" size="1" style="border: medium double; background: rgb(239, 239, 239) none repeat scroll 0% 0%; font-family: verdana; color: rgb(0, 0, 0); font-size: 12px;">
    <option value="urllien">texte</option>
    <option value="urllien">texte</option>
    <option value="urllien">texte</option>
  </select>
  <input style="border: medium double; background: rgb(197, 195, 201) none repeat scroll 0% 0%; font-family: verdana; color: rgb(0, 0, 0); font-size: 12px;" onclick="location = document.Menuderoulant.wxlmenu.options[document.Menuderoulant.wxlmenu.selectedIndex].value;" value="Go" type="button"></input></form>

Ce qui donne :

textetextetexte

Vous devez juste remplacer le lien et le texte pour que ça fonctionne. Amusez vous bien !

Hello c'est encore moi x)

Édit Responsable (Onyx) : La balise marquee est une balise dépréciée, donc il est mieux d'utiliser des animations keyframes ou d'autres méthodes afin d'obtenir le défilement. Néanmoins, puisque la balise est encore utilisée à certains endroits, voilà encore le tuto.

Maintenant je vais vous donner le secret des marquee ! Vous en rêviez, bien le voilà *.*

Voilà la balise marquee toute seule donne ceci:
c'est bidon

Code:

<marquee>c'est bidon</marquee>

---

On peut ensuite utiliser le "behavior" pour lui indiquer comment se comporter.

Voilà le behavior "slide" où le texte/image part d'un bord, va jusqu'à l'autre bord et s'arrête :
YEAH !

Code:

<marquee behavior="slide"> YEAH ! </marquee>

---

Voilà le behavior "scroll" où le texte/image part d'un bord, va jusqu'à l'autre bord, y disparait et recommence :
YEAH !

Code:

<marquee behavior="scroll"> YEAH ! </marquee>

---

Voilà le behavior "alternate" où le texte/image part d'un bord, va jusqu'à l'autre bord et rebondi :
YEAH !

Code:

<marquee behavior="alternate"> YEAH ! </marquee>

---

Ajoutez à cela le fait que vous pouvez donner une "direction" au défilement (down, right, left, up);
Ainsi que le "scrollamount" permettant d'accélérer (quand on augmente le nombre) ou de ralentir (quand on diminue le nombre) la vitesse de défilement.
De cette manière on peut obtenir une balise complète du style.

Exemple complet :
YEAH !

Code:

<marquee behavior="alternate" direction="right" scrollamount="50"> YEAH ! </marquee>

---

Afin que le mouvement s'arrête lorsqu'on survole la balise, on peut utilise le "onmouseover" et "onmouseout" comme cela :

Code:

<marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="alternate" direction="right" scrollamount="50">blablabla je suis trop fort, blablabla</marquee>

À noter que le onmouseover et le onmouseout ne fonctionne pas dans les messages.

---

C'est tout pour le moment, le reste nous vous laisserons le découvrir de vous-même ^^

Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS.

Petit exemple :


Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".

Code:

<div class="zoom">
  <img src="URL DE L'IMAGE" alt="NOM DE L'IMAGE" />
</div>

Il suffit ensuite de rajouter dans votre CSS ce petit qui bien évidemment est personnalisable selon les besoins.

Code:

.zoom {
height:XXXpx;
margin:auto;
text-align:center;
}

/*Largeur et hauteur image sans survol*/
.zoom img {
width:XXXpx;
height:XXXpx;
-webkit-transition: 0.5s; /*Rendre le mouvement fluide*/
transition: 0.5s;/*Rendre le mouvement fluide*/
}
/*Largeur et hauteur image au survol*/
.zoom img:hover {
width:XXXpx;
height:XXXpx;
}

Voilà c'est tout pour cette première astuce, enjoy !
P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...