nicht angemeldet
Ich suche einen Link der nichts tut! Ich habe nemlich ein Problem mit ein bisschen CSS:
Ich möchte einen Editor für BB-Code schreiben und da hab ich die Button mit CSS gestaltet, oder besser: es versucht! Denn es werden nur die CSS Angaben benutzt wenn in href etwas steht!
Zur veranschaulichung:
CSS code:
#####Beginn#####
/* Edit Links */
.edit:link
{
border:1px solid #DDDDDD;
margin:2px;
}
.edit:visited
{
border:1px solid #DDDDDD;
margin:2px;
}
.edit:hover
{
border:1px solid #0000DD;
margin:2px;
}
.edit:active
{
border:1px solid #DDDDDD;
margin:2px;
}
#####Ende#####
HTMLcode:
#####Start#####
html>
<head>
<title>BBCode Editor</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form name="formular" action="">
<script type="text/javascript">
<!--
function insert(aTag, eTag) {
var input = document.forms['formular'].elements['eingabe'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('[1]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//-->
</script>
<a href="index.php">Index</a>
<table border=0>
<tr><td></td><td><center><a onClick="insert('[b]', '[/b]')"><img alt="Fett" src=".\images\editor\b.png"></a>
<a class="edit" onClick="insert('[i]', '[/i]')"><img alt="Kursiv" src=".\images\editor\I.png"></a>
<a class="edit" onClick="insert('[size=1]', '[/size]')"><img alt="klein" src=".\images\editor\A1.png"></a>
<a class="edit" onClick="insert('[size=5]', '[/size]')"><img alt="mittelgroß" src=".\images\editor\A2.png"></a>
<a class="edit" onClick="insert('[size=9]', '[/size]')"><img alt="groß" src=".\images\editor\A3.png"></a><br>
<a class="edit" onClick="insert('[color=FF0000]', '[/color]')"><img class="edit" alt="rot" src=".\images\editor\rot.png"></a>
<a class="edit" onClick="insert('[color=00FF00]', '[/color]')"><img alt="grün" src=".\images\editor\gruen.png"></a>
<a class="edit" onClick="insert('[color=0000FF]', '[/color]')"><img alt="blau" src=".\images\editor\blau.png"></a>
<a class="edit" onClick="insert('[color=DDDDDD]', '[/color]')"><img alt="grau" src=".\images\editor\grau.png"></a>
</center></td><tr>
<tr>
<td></td><td><textarea name="eingabe" cols="60" rows="10">Ihre Nachricht</textarea></td></tr>
<tr><td></td><td><input type="button" value="Einfügen" onClick="insert('[link]', '[/link]')"></td></tr>
</table>
</form>
</body>
</html>
#####Ende#####
0-9 ↩︎