[css] wyzwanie Opcje

[AndyPSV]

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.

[Pilsener]

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

[vokiel]

Może gotowiec? tooltip_e

[revyag]

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

[AndyPSV]

@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...

[Shili]

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.

Ten post edytował Shili 29.05.2008, 14:21:41

[pest]

Bierz gotowy skrypt i go zminimalizuj - są do tego narzędzia w sieci (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Odpada dużo roboty i zniechęcenia (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[AndyPSV]

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