Lecteur mp3 en Javascript

Je suis tombé par hasard dessus et c’est plutôt très intéressant ! Voici un Player Mp3 en JavaScript réalisé par Yahoo

Commençons par le javascript, hebergé directement chez yahoo

	<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Puis le html très facile d'utilisation

<a href="votre_musique">Musique 1</a>
<a href="votre_musique">Musique 2</a>
<a href="votre_musique">Musique 3</a>

Voici le résultat, il ne reste plus qu'a cliquer et le player se lance.

Agent K & Bella - Sierra Leone (The Phat RiderZ Remix)
crossfire - hydra


Merci Yahoo...

Création de Roxette

Apres un petit dessin fait vite fais en cours voici 2 créations graphique de Roxette.



@+ Roxette...

Maquillage virtuel avec Taaz

Taaz.com est site qui permet de faire du maquillage virtuel c'est-à-dire, envoyer votre photo et amusez vous à vous maquiller selon vos envies

Voici un exemple de ce qui est possible…


Merci à gwladys pour le lien du site...

Menu sympathique Jquery

Exemple d'utilisation Jquery

Vous aller vous en rendre compte très vite mais c'est plutot tres simple... Il suffit d'un css basique un UL,LI et deux fonction Jquery

• animate( params, [duration], [easing], [callback] )
• siblings( [expr] )

Commençons par le css...

    .clear { clear: both }
    #menu_holder ul{ list-style-type: none;}
    #menu_holder ul li { float:left;width:100px;}
    #menu_holder ul li a {display:block; width:100%; padding:10px; text-decoration:none;color:white;}
    #menu_holder ul { margin:0px; padding:0px; }
    #menu_holder ul li { color:white; font-size:20px; font-weight:bold; border:1px solid #000;}
    #first_li{ background:url(./images_articles/img_1.jpg); height:300px}
    #second_li{ background:url(./images_articles/img_2.jpg); height:300px}
    #third_li{  background:url(./images_articles/img_3.jpg); height:300px}

Puis le Javascript utiliant les fonctions de Jquery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
	$(document).ready(function(){

        //declaration des variables
        var speed = 200; //vitesse
        var min_width = 100; //largeur minimum
        var max_width = 350; //largeur maximum

        //aanimation jusqu'a la largeur maximale
        $('.selected').animate( { width : max_width } );

        /* utilisation des fonctions Jquery '*/
        $('#menu_holder ul li').hover(function(){
            $(this).animate({ width : max_width }, { queue:false , duration:speed});
            $(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});

        });
    });
</script>

Le HTML...

       <div id="menu_holder">
            <ul>
                <li id="first_li"></li>
                <li id="second_li"></li>
                <li id="third_li"   class="selected"></li>
            </ul>
         <div class="clear">
        </div>

Et voici le résultat...

Une fille Gothique by Roxette

Cet après-midi en cours d’anglais, bon je sais ce n’est pas terrible, mais Roxette m’as fait un petit dessin comme ca en 5 minutes d’une gothique. Je vous laisse juger du coup de crayon…

Personnellement je suis plutôt fan, désolé de la qualité de l’image mais je n’ai pas de scanner chez moi.



Au prochain dessin ^^