Pole z avkiem wysuwane z boku

Czyli jak, wiedziesz myszka to się wysunie xD

<div><div id="wysuwane" style="left: -15px; " class=""> <div id="wewnatrz" style="float:left;width:155px; display:block; margin-left:0px;"><img src="LINK" border="0"><br><br>TEKST<br>TEKST<br>  TEKST <br>TEKST <br>TEKST<br>TEKST<br>TEKST<br>TEKST<br>TEKST<br>TEKST<br> TEKST<br></div></div><style>#wysuwane{ background: url("LINK") no-repeat scroll 0 0 transparent; padding: 10px; width: 231px; height:395px; position: fixed; margin-top: -222px; /*połowa wysokości panelu w górę */ left: 0px; top: 50%; color: white; /* Kolor czcionki */ }.zamknij{ background-position: 0px 0px -333px 0px;} </style><script type="text/javascript"> $(function(){ $("#wysuwane").css("left","-211px"); $("#wysuwane").hover( function () { $("#wysuwane").stop().animate({left: "0px"}, 600 ); $(this).addClass("zamknij"); }, function () { $("#wysuwane").stop().animate({left: "-211px"}, 500 ); $(this).removeClass("zamknij"); });}); </script></div>

Link do avatara na wyświetlanym pasku


Tam gdzie pisze TEKST wpisujecie tekst jaki ma się wyświetlać na wysuwanym pasku, odstęp między nimi <br> oznacza, że kolejny tekst będzie na dole. Jeśli chcecie mieć więcej przerw na pisanie tekstu na dole piszecie jeszcze raz <br> i tyle.


Tu dajecie link na tło wysuwanego paska, ale tak żeby miał odpowiedni kształt, przykłady: http://s4.ifotos.pl/img/topng_rphhper.png
http://s3.ifotos.pl/img/to-3png_rphhpwn.png
http://s4.ifotos.pl/img/to-1png_rphhpsh.png
http://s3.ifotos.pl/img/to-2png_rphhpss.png