Just nu i M3-nätverket
Gå till innehåll

Tips på pratbubbla?


Kristianstad

Rekommendera Poster

Hej!

Jag har en bild på mig själv och tänkte göra en pratbubbla.

Ungefär som den som är på http://www.expressen.se, fast kanske lite snyggare! :)

 

Hur skall jag bära mig åt?

 

Tack på förhand!

/ Kristoffer

Windows kunde inte hitta något tangentbord. Tryck F1 för att försöka igen eller F2 för att avbryta.

Länk till kommentar
Dela på andra webbplatser

Jag skulle ta en pratbubblebild och lägga den som bakgrund i en tabell och lägga texten ovanpå. Antigen med css eller som vanligt. Tror det är det smidigaste sättet.

 

Länk till kommentar
Dela på andra webbplatser

precis som lillen säger. Antingen tar du en bild som du lägger som bakgrund i en tabell eller så delar du upp bilden i flera delar och lägger bitarna runt pratbubbletexten med en tabell.

 

/JANspeed

 

Länk till kommentar
Dela på andra webbplatser

Eller helt enkelt öppna pratbubble-bilden i ett bildbehandlingsprogram (PhotoShop, PaintShopPro mfl) och lägg in texten för att sedan spara om bilden.

 

Nackdelen är väl att det blir lite mer omständligt att byta ut texten mha denna lösning. ;)

 

Mvh

-Cat [Var är min arbetslust? Å vem har ätit upp alla lussebullar?!]

_________________________________________________

”Varför vara besvärlig

när man med lite fantasi kan bli helt omöjlig.”

okänd

 

Länk till kommentar
Dela på andra webbplatser

Jag tror det får bli så att jag delar upp tabellen i olika delar och gör det som en ram!

 

Tack för tipsen!

 

Till Cat: ...också tar det bandbredd också ;)

/ Kristoffer

Windows kunde inte hitta något tangentbord. Tryck F1 för att försöka igen eller F2 för att avbryta.

 

Länk till kommentar
Dela på andra webbplatser

precis som lillen säger. Antingen tar du en bild som du lägger som bakgrund i en tabell eller så delar du upp bilden i flera delar och lägger bitarna runt pratbubbletexten med en tabell.

Detta kan vara farligt om man inte gör bilderna på rätt sätt. För om texte i pratbubblorna blir lång kan texten förskjuta bilderna så att pratbubblan inte längre är någon pratbubbla. Man får inte sätta någon höjd på de sidobilderna eftersom de MÅSTE anpassas efter hur stort innehållet är. höjden på sidobilderna måste vara 100% för att inget hål i pratbubblan skall uppstå

 

Länk till kommentar
Dela på andra webbplatser

Tjena!

 

Här kommer en julklapp i form av en dynamisk pratbubblelösning mha. css. (funkar ej i Netskräp, men det får man ta...) (Man kan förstås göra motsvarande på serversidan så kan man få det att funka i alla browsers...)

 

(bygger på runda gifar i hörnen, osv... Hela alltet hittar man här: http://www.bwwwe.net/experiment/pratbubbla/test.html )

 

 

<script language="JavaScript1.2">
function convert_br(text){

re = /\n/g;
text = text.replace (re, "<br>");

return(text);
}
</script>

<div id="pratis" style="position: absolute; top: 55px; left: 55px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
	<td align="left" valign="top"><img src="images/ul_point.gif" width=23 height=14 border=0 alt=""></td>
	<td align="left" valign="top" background="images/up.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
	<td align="left" valign="top"><img src="images/ur.gif" width=23 height=14 border=0 alt=""></td>
</tr>
<tr>
	<td align="left" valign="top" background="images/left.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
	<td align="left" valign="top"><div id="pratbubbla">testa pratbubblans fina dynamiska egenskaper genom att skriva något i textarean...</div></td>
	<td align="left" valign="top" background="images/right.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
</tr>
<tr>
	<td align="left" valign="top"><img src="images/ll.gif" width=23 height=19 border=0 alt=""></td>
	<td align="left" valign="top" background="images/down.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
	<td align="left" valign="top"><img src="images/lr.gif" width=23 height=18 border=0 alt=""></td>
</tr>
</table>

<form name="svejsan">
<textarea name="hoppsan"></textarea>
<input type="button" value="fixa" onClick="pratbubbla.innerHTML=convert_br(this.document.svejsan.hoppsan.value);">
</form>

 

/ Johan

 

 

Länk till kommentar
Dela på andra webbplatser

Tack så jättemycket Nollis!

 

Tror du förresten att man bara kan ta koden? Jag hittar ingen mailadress att fråga...

 

God jul!

/ Kristoffer

Windows kunde inte hitta något tangentbord. Tryck F1 för att försöka igen eller F2 för att avbryta.

 

[inlägget ändrat 2002-12-13 16:58:13 av Kristianstad]

Länk till kommentar
Dela på andra webbplatser

Till Cat: ...också tar det bandbredd också ;)

 

Mjaa...vette tusan om en s/v gif tar så mkt plats i anspråk. ;)

 

Mvh

-Cat

_________________________________________________

”Varför vara besvärlig

när man med lite fantasi kan bli helt omöjlig.”

okänd

 

Länk till kommentar
Dela på andra webbplatser

Hur ser den ut i Phoenix?

/ Kristoffer

Windows kunde inte hitta något tangentbord. Tryck F1 för att försöka igen eller F2 för att avbryta.

 

Länk till kommentar
Dela på andra webbplatser

Tjena!

 

Som tidigare nämnt, så är det ju inga problem att göra motsvarande lösning mha. ASP eller motsvarande.

 

<%@language=JScript%>
<%
function convert_br(text){

text = ""+text;

re = /\n/g;
text = text.replace (re, "<br>");

if (text=="undefined") text="knappa in bara..."

return(text);
}
%>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><img src="images/ul_point.gif" width=23 height=14 border=0 alt=""></td>
<td align="left" valign="top" background="images/up.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
<td align="left" valign="top"><img src="images/ur.gif" width=23 height=14 border=0 alt=""></td>
</tr>
<tr>
<td align="left" valign="top" background="images/left.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
<td align="left" valign="top"><%=convert_br(Request.Form("hoppsan"))%></td>
<td align="left" valign="top" background="images/right.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/ll.gif" width=23 height=19 border=0 alt=""></td>
<td align="left" valign="top" background="images/down.gif"><img src="images/empty.gif" width=1 height=1 border=0 alt=""></td>
<td align="left" valign="top"><img src="images/lr.gif" width=23 height=18 border=0 alt=""></td>
</tr>
</table>

<form method="POST">
<textarea name="hoppsan"></textarea>
<input type="submit" value="fixa">
</form>

 

..och då fungerar det förstås prickfritt i Phoenix, Netskräp eller whatsoever...

 

(exempel på http://www.bwwwe.net/experiment/pratbubbla/test.asp )

 

/ Johan

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...