kto potrafi zmontowac cos takiego:
http://img242.imageshack.us/img242/6948/ocochodzifw4.gif
+ aby dopasowywal automatycznie dlugosc, wysokosc okna do tekstu (jest to chyba w css wykonywalne, nie? chyba, ze sie myle)

tutaj grafiki: http://www.sendspace.pl/file/BhO23GMi/

Jak dla mnie czysta patologia. Szacunek wielki kto potrafi to namalowac.

Sprecyzuj, co chcesz osiągnąć, bo nic z tego nie rozumiem.

Może gotowiec? tooltip_e

Tak trudno jest się troszkę wysilić i poszukać ? Całe 20 sekund szukałem.
http://php-ajax-code.blogspot.com/2007/07/...nd-balloon.html

@vokiel: problem w tym, ze ten "gotowiec" zajmuje nieco ponad 45kb...
@Pilsener: chce narysowac w htmlu takie cos jak na rysunku.

probowalem cos takiego

[HTML] pobierz, plaintext 
<style type="text/css">
<!--
body{margin:5px;font-family:Tahoma,Verdana,Arial;font-size:11px;color:#000;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,
d{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var
{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
-->
</style>
<table>
 <tr>
   <td><img src=lt.gif /></td>
   <td><img src=t.gif /></td>
   <td><img src=rt.gif /></td>
 </tr>
 
 <tr>
   <td><img src=t.gif /></td>
 
   <td style="background-color: #fffbcc;">Serwis Wikileaks.org ujawnił, że władze Stanów Zjednoczonych i
pozostałych krajów grupy G8 intensywnie pracujš nad wielostronnym
porozumieniem handlowym, zwanym ACTA, które całkowicie zdelegalizuje
nawet niedochodowš wymianę zastrzeżonej prawem autorskim informacji. Nie
chodzi tu tylko o tak banalnš sprawę, jak delegalizacja
   </td>
   <td><img src=t.gif /></td>
 </tr>
 <!--
 <tr>position:relative;top:1px;z-index:1;displayasd:none;"
   <td width=1 height=6 style="position:relative;padding:0px;margin:0px;overflow:hidden;background-image:url('t.gif');">&nbsp;</td>
   <td width=1 height=6 style="background-color:#e2e2e2;">SDSDSNDNSJKDNKSJDNKSDNJKSDNKSD</td>
   <td width=1 height=6 style="position:relative;padding:0px;margin:0px;overflow:hidden;background-image:url('t.gif');">&nbsp;</td>
 </tr>
 -->
</table>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
Jest na to taki kod:
Kod:
if(tt_aV[BALLOONIMGPATH] == config.BalloonImgPath)
      aImg = balloon.aDefImg;
   // ...or load images from different directory
   else
      aImg = Balloon_CacheImgs(tt_aV[BALLOONIMGPATH]);
   sCssCrn = ' style="position:relative;width:' + tt_aV[BALLOONEDGESIZE] + 'px;padding:0px;margin:0px;overflow:hidden;line-height:0px;';
   sVaT = 'vertical-align:top;" valign="top"';
   sVaB = 'vertical-align:bottom;" valign="bottom"';
   sCssImg = 'padding:0px;margin:0px;border:0px;';
   sImgZ = '" style="' + sCssImg + '" />';
 
   tt_sContent = '<table border="0" cellpadding="0" cellspacing="0" style="width:auto;padding:0px;margin:0px;left:0px;top:0px;"><tr>'
            // Left-top corner
            + '<td' + sCssCrn + sVaB + '>'
            + '<img src="' + aImg[1].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
            + '</td>'
            // Top border
            + '<td valign="bottom" style="position:relative;padding:0px;margin:0px;overflow:hidden;">'
            + '<img id="bALlOOnT" style="position:relative;top:1px;z-index:1;display:none;' + sCssImg + '" src="' + aImg[9].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
            + '<div style="position:relative;z-index:0;padding:0px;margin:0px;overflow:hidden;width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[2].src + ');">'
            + '</div>'
            + '</td>'
            // Right-top corner
            + '<td' + sCssCrn + sVaB + '>'
            + '<img src="' + aImg[3].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
            + '</td>'
            + '</tr><tr>'
            // Left border
            + '<td style="position:relative;padding:0px;margin:0px;width:' + tt_aV[BALLOONEDGESIZE] + 'px;overflow:hidden;background-image:url(' + aImg[8].src + ');">'
            // Redundant image for bugous old Geckos that won't auto-expand TD height to 100%
            + '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[8].src + sImgZ
            + '</td>'
            // Content
            + '<td id="bALlO0nBdY" style="position:relative;line-height:normal;'
            + ';background-image:url(' + aImg[0].src + ')'
            + ';color:' + tt_aV[FONTCOLOR]
            + ';font-family:' + tt_aV[FONTFACE]
            + ';font-size:' + tt_aV[FONTSIZE]
            + ';font-weight:' + tt_aV[FONTWEIGHT]
            + ';text-align:' + tt_aV[TEXTALIGN]
            + ';padding:' + balloon.padding + 'px'
            + ';width:' + ((balloon.width > 0) ? (balloon.width + 'px') : 'auto')
            + ';">' + tt_sContent + '</td>'
            // Right border
            + '<td style="position:relative;padding:0px;margin:0px;width:' + tt_aV[BALLOONEDGESIZE] + 'px;overflow:hidden;background-image:url(' + aImg[4].src + ');">'
            // Image redundancy for bugous old Geckos that won't auto-expand TD height to 100%
            + '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[4].src + sImgZ
            + '</td>'
            + '</tr><tr>'
            // Left-bottom corner
            + '<td' + sCssCrn + sVaT + '>'
            + '<img src="' + aImg[7].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
            + '</td>'
            // Bottom border
            + '<td valign="top" style="position:relative;padding:0px;margin:0px;overflow:hidden;">'
            + '<div style="position:relative;left:0px;top:0px;padding:0px;margin:0px;overflow:hidden;w
idth:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[6].src + ');"></div>'
            + '<img id="bALlOOnB" style="position:relative;top:-1px;left:2px;z-index:1;display:none;' + sCssImg + '" src="' + aImg[10].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
            + '</td>'
            // Right-bottom corner
            + '<td' + sCssCrn + sVaT + '>'
            + '<img src="' + aImg[5].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
            + '</td>'
            + '</tr></table>';
[HTML] pobierz, plaintext 

ale po podmienieniu wszystkiego kod w ogole nie przypomina niczego ;/
moglbys to mi naszkicowac? gdybym potrafil to bym nie pisal postu na forum...

Kod html jest bardzo prosty, nie chce mi się pisać pod Twój, bo nie do końca chce mi sie go analizować, ale mniej więcej pokażę jak może to wyglądać.

[HTML] pobierz, plaintext 
<script type="text/javascript">
function pokazBalonik(id) {
if(document.getElementById(id).style.display = "none")
   document.getElementById(id).style.display = "block";
else
   document.getElementById(id).style.display = "none";
}
</script>
<p onclick="pokazBalonik('pokazBalonik1');">Tutaj tekst nad którym pokaże się balonik</p>
<div style="display: none;" id="pokazBalonik1">Tutaj kod balonika</div>
[HTML] pobierz, plaintext 

Pozycja i style to sprawa drugorzędna myślę. Jeśli dobrze ostylujesz i podobierasz tła powstanie balonik - wystarczy użyć przezroczystości w gifach, a będzie przezroczysty. Do uzyskania balonika o zmiennej szerokości i wysokości poczytaj o zaokrąglonych rogach, a na sam dół daj tło z tym kierunkowym czymś. Ten balonik jest na kliknięcie, ale podobnie można zrobić na inne akcje.

Oczywiście to tylko zarys potrzebnego skryptu, coś w stylu naprowadzenia bardziej.

Bierz gotowy skrypt i go zminimalizuj - są do tego narzędzia w sieci

Odpada dużo roboty i zniechęcenia

chodzi mi wlasnie o to, ze SKRYPT MAM tylko mam spory problem z NARYSOWANIEM tego co sie wyswietla; czy ktos moglby wiec mi pomoc ? chociaz do polowy pokazac czy cos