Hejsa, jeg har lige en sidste ting, og så skal jeg ikke plage dig mere.
<html>
<head>
<title>PoshTown</title>
<style>
#board td {
width: 80px;
height: 80px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
#figure {
width: 60px;
height: 80px;
font: 1px verdana;
background-image: url('Poshmand.gif');
position:absolute;
Ctop:100px;
left:100px;
z-index:1;
}
#Bubble {
width : 250px;
height : 125px;
visibility : hidden;
overflow : hidden;
}
#BubbleTable {
background : url(bobbel.gif) no-repeat;
}
</style>
<script language='JavaScript'>
lineLength = 10; // Antallet af tegn pr. linie.
// Tjekker hvilken browser der bruges, og sætter event captures:
if (navigator.appName == 'Microsoft Internet Explorer'){
document.onkeypress = InternetExplore;
document.onkeydown = blockkeys; // Blokerer backspace.
}
if (navigator.appName != 'Microsoft Internet Explorer'){
document.onkeypress = OtherBrowsers;
}
function blockkeys() {
if (window.event && window.event.keyCode == 8) {
// try to cancel the backspace
InternetExplore(event); // Udfører det der skal udføres. (Sletter et tegn, opdaterer tekst osv.)
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
}
function InternetExplore(e){
which = window.event.keyCode; // Finder koden for tasten.
if(which == 16) { // Hvis der er tastet shift, må den ikke indsætte et tegn.
return false;
} else if(which == 13) { // Hvis der er tastet enter, skal den submitte formen.
document.getElementById("form").submit();
return false;
}
document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
lineLength_nobr = value.replace(/<br \\/>/g,""); // Fjerner alle <br />.
chars = lineLength_nobr.length/lineLength; // Dividerer længden af linien u. <br /> med lineLength.
chars = chars+""; // Parser til String.
if(chars.indexOf(".") == "-1" && which != 8 && 0<value.length) {// Hvis divisionen går op, giver et heltal.
value += "<br />"; // Indsættes <br /> (liniskift)
}
if(which == 8) { // Hvis der tastes backspace, skal der slettes et tegn.
tmp = ""; // Initialiserer en midlertidig variabel.
for(i = 6; i >= 1; i = i-1) { // Tjekker de 6 sidste tegn.
tmp += value.charAt(value.length-i); // Indsætter værdierne i variablen.
}
if(tmp === "<br />") { // Hvis de seks sidste tegn er <br />, skal de slettes.
for(i = 6; i >= 1; i = i-1) {
value = value.slice(0,value.length-1);
}
} else {
value = value.slice(0,value.length-1); // Hvis ikke, skal der blot slettes eet tegn.
}
} else { // Ellers skal der indsættes et tegn.
value += String.fromCharCode(which);
}
document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
if(value.length == 0) // Er der ingen tekst i input-boksen, bliver boblen lukket.
setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
return false; // Browseren skal ikke reagerer på tasterne.
}
function OtherBrowsers(e){
if(e.which == 16) { // Hvis der er tastet shift, må den ikke indsætte et tegn.
return false;
} else if(e.which == 13) { // Hvis der er tastet enter, skal den submitte formen.
document.getElementById("form").submit();
return false;
}
document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
lineLength_nobr = value.replace(/<br \\/>/g,""); // Fjerner alle <br />.
chars = lineLength_nobr.length/lineLength; // Dividerer længden af linien u. <br /> med lineLength.
chars = chars+""; // Parser til String.
if(chars.indexOf(".") == "-1" && e.which != 8 && 0<value.length) {// Hvis divisionen går op, giver et heltal.
value += "<br />"; // Indsættes <br /> (liniskift)
}
if(e.which == 8) { // Hvis der tastes backspace, skal der slettes et tegn.
tmp = ""; // Initialiserer en midlertidig variabel.
for(i = 6; i >= 1; i = i-1) { // Tjekker de 6 sidste tegn.
tmp += value.charAt(value.length-i); // Indsætter værdierne i variablen.
}
if(tmp === "<br />") { // Hvis de seks sidste tegn er <br />, skal de slettes.
for(i = 6; i >= 1; i = i-1) {
value = value.slice(0,value.length-1);
}
} else {
value = value.slice(0,value.length-1); // Hvis ikke, skal der blot slettes eet tegn.
}
history.go(1);
} else { // Ellers skal der indsættes et tegn.
value += String.fromCharCode(e.which);
}
document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
if(value.length == 0) // Er der ingen tekst i input-boksen, bliver boblen lukket.
setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
return false; // Browseren skal ikke reagerer på tasterne. Virker ikke i IE.
}
</script>
<script type="text/javascript">
var last_field = null;
function moveElement(idx) {
obj = document.getElementById(idx);
if (last_field != null) last_field.innerHTML = " ";
document.getElementById(idx).innerHTML = '<div style="width:60px;height:80px;z-index:1;><img src="Postmand.gif"><div id="Bubble" style="width:10px;height:10px;position:absolute;bottom:50px;left:50px;z-index:2;"><table callpadding="0" cellspacing="0" width="50" height="50" style="position:absolute;bottom:50px;left:50px;z-index:3;"><tr><td id="BubbleTable" align="center" valign="middle"></td></tr></table></div></div>';
last_field = obj;
}
</script>
</head>
<body class="right" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-color :transparent" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<table id="board" background="bg.gif" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="1_1" onclick="moveElement(this.id)"> </td>
<td id="1_2" onclick="moveElement(this.id)"> </td>
<td id="1_3" onclick="moveElement(this.id)"> </td>
<td id="1_4" onclick="moveElement(this.id)"> </td>
<td id="1_5" onclick="moveElement(this.id)"> </td>
</tr><tr>
<td id="2_1" onclick="moveElement(this.id)"> </td>
<td id="2_2" onclick="moveElement(this.id)"> </td>
<td id="2_3" onclick="moveElement(this.id)"> </td>
<td id="2_4" onclick="moveElement(this.id)"> </td>
<td id="2_5" onclick="moveElement(this.id)"> </td>
</tr><tr>
<td id="3_1" onclick="moveElement(this.id)"> </td>
<td id="3_2" onclick="moveElement(this.id)"> </td>
<td id="3_3" onclick="moveElement(this.id)"> </td>
<td id="3_4" onclick="moveElement(this.id)"> </td>
<td id="3_5" onclick="moveElement(this.id)"> </td>
</tr><tr>
<td id="4_1" onclick="moveElement(this.id)"> </td>
<td id="4_2" onclick="moveElement(this.id)"> </td>
<td id="4_3" onclick="moveElement(this.id)"> </td>
<td id="4_4" onclick="moveElement(this.id)"> </td>
<td id="4_5" onclick="moveElement(this.id)"> </td>
</tr><tr>
<td id="5_1" onclick="moveElement(this.id)"> </td>
<td id="5_2" onclick="moveElement(this.id)"> </td>
<td id="5_3" onclick="moveElement(this.id)"> </td>
<td id="5_4" onclick="moveElement(this.id)"> </td>
<td id="5_5" onclick="moveElement(this.id)"> </td>
</tr>
</table>
<script type="text/javascript">moveElement('1_1');</script>
<form action='bobbel.html' method="post" id="form">
<input type='hidden' id='besked' name="Besked" />
</form>
</body>
</html>
Jeg ønsker at få manden (Poshmand) og taleboblen vidst, at funktionerne virker, og at taleboblen vil følge manden når han rykker fra felt til felt.
Jeg har arbejdet adskillige timer på at få det til at lykkedes, men det er endnu ikke sket. Det vil være til stor lykke hos mig, hvis du vil prøve at få det til at virke.
Med venlig hilsen
Morten