Jo. Jetzt. Danke!
"textContent" ist die richtige Bezeichnung.
Sodann, wer einen netten kleinen Diaschowplayer in moderner XHTML-Technik mit JavaScript haben möchte, bediene sich hier:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pictures</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="pictures, bilder, gallery" />
<meta name="description" content="pictures, bilder, gallery" />
<style type="text/css">
body{
margin:30px auto;
background-color:#121212;
}
.mainbox{
margin: 0px auto; width:800px; height: 550px;
position:relative;
font-size:10px;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #2e4ab2;
padding-left:40px;
border:2px solid #444444;
overflow: hidden;
background-color: #000000;
}
.screen{
margin: 0px auto; width: 760px; height: 510px;
position:absolute;
display: table;
overflow: hidden;
text-align: center;
font-size:10px;
background-color:#000000;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
border: #222222 1px solid;
}
.screen_in{
width: 760px; height: 510px;
position:relative;
text-align: center;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.navigation{
margin: 0px auto; width:440px; height: 36px;
position:absolute;
bottom:-14px; left:280px;
font-size:8px;
background-color:transparent;
font-family:Sans, Verdana, Lucidasans, sans-serif, monospace, serif;
color: #f49404;
}
.titlebox{
position:relative;
width:400px; height: 20px;
top: 505px;
text-align: left;
float:left;
font-size:11px;
font-weight: bold;
color: #2e7db0;
background-color:transparent;
}
.counterbox{
position:relative;
width:350px; height: 20px;
top: 505px;
right: 110px;
text-align: right;
float:right;
color: #2e7db0;
background-color:transparent;
}
a:link {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:visited {color:#000000; text-decoration:none; background-color:transparent; font-size:10px;}
a:hover {color:#c8ff20; text-decoration:none; background-color:transparent; font-size:10px;}
.num_info{margin:0; color:#f49404; font-size:10px; border:0px; background-color:transparent; cursor: pointer; text-align:center;}
</style>
</head>
<body onload="slide();">
<div class="mainbox">
<br />
<div class="screen">
<div class="screen_in">
<img id="pic1" src="photos/001.png" width="" height="" alt="No image found." />
</div></div>
<br />
<div class="titlebox">
::: <span id="id_title"></span>
</div>
<div class="counterbox">
image
<span class="num_info" id="id_counter"></span> /
<span id="id_number_pics"></span>
</div>
<div class="navigation">
<button id="button_home" name="button_home" value="home"><strong>home</strong></button>
<button id="button_go" name="button_go" value="slide"><strong>slide</strong></button>
<button id="button_pause" name="button_pause" value="pause"><strong>pause</strong></button>
<button id="button_last" name="button_last" value="last"><strong>last</strong></button>
<button id="button_next" name="button_next" value="next"><strong>next</strong></button>
</div> </div>
<script type="text/javascript">
var img = new Array();
var counter = 0;
var number_pics = 0;
var start = null;
var filesource = "photos/";
var filename = "";
var filetype = "";
var delayTime = 5000;
var liste = new werteliste(location.search);
var title = "pictures";
var button_home = document.getElementById('button_home');
var button_go = document.getElementById('button_go');
var button_pause = document.getElementById('button_pause');
var button_next = document.getElementById('button_next');
var button_last = document.getElementById('button_last');
button_home.onclick = function(){window.location.href='index.xhtml';}
button_go.onclick = function(){slide();}
button_pause.onclick = function(){pause();}
button_last.onclick = function(){last();}
button_next.onclick = function(){next();}
filename = liste.name1;
number_pics = liste.num_pix;
filetype = liste.typex;
title = liste.title;
function werteliste(querystring){
if(querystring == '') return;
var wertestring = querystring.slice(1);
var paare = wertestring.split("&");
var paar, name1, wert, type1, title;
name1 = paare[0];
wert = paare[1];
type1 = paare[2];
title = paare[3];
this.name1 = name1;
this.num_pix = wert;
this.typex = type1;
this.title = title;
}
function animate(){
counter++;
if(counter > number_pics) counter = 1;
document.getElementById("id_counter").textContent = counter; // show counter
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
if(counter == number_pics) counter = 0;
}
function slide(){
document.getElementById("id_counter").textContent = counter; // show counter
start = setInterval("animate()", delayTime);
button_go.disabled = true;
button_pause.disabled = false;
document.getElementById("id_title").textContent = title; // show title
document.getElementById("id_number_pics").textContent = number_pics; // show number pics
}
function pause(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
}
function next(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
counter++;
if(counter > number_pics) counter = 1;
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
document.getElementById("id_counter").textContent = counter; // show counter
if(counter == number_pics) counter = 0;
}
function last(){
clearInterval(start);
button_go.disabled = false;
button_pause.disabled = true;
if(counter > 0) counter --;
if(counter == 0) counter = number_pics;
img[counter] = new Image();
img[counter].src = filesource + filename + counter + filetype;
document.getElementById("pic1").src = img[counter].src;
document.getElementById("id_counter").textContent = counter; // show counter
}
</script>
</body></html>Tipps und Anregungen zur weiteren Verbesserung bitte posten.