Доброго времени суток
Я пытаюсь заставить отображаться на одном и том же месте строчный блок содержимое которго меняется с одинаковым интервалом времени поверх сменяющихся картинок.
Вото то что я навоял-"
<script type="text/javascript">
var image_count = 4;
var interval = 5000;
var time_out = 10;
var i = 0;
var s = 1;
var timeout;
var opacity = 100;


function change_image() {
opacity--;
var current_text = 'text_' + s;
var j = i + 1;
var current_image = 'image_' + i;
if (i == image_count) j = 1;
if (s == image_count) q = 1;
var next_image = 'image_' + j;
var usertext = document.getElementById(current_text).data-title;
document.getElementById(current_image).style.opacity=opacity/100; if (opacity==0.5) s = s + 1;if (s>image_count) s=1;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity=(100-opacity)/100;
document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
}

setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
-->
</script>
<style>
.onthetop {
display: inline-block;
position: relative;
}
.onthetop {
content: attr(data-title);
position: absolute;
left: 0px; top: 108px;
z-index: 1;
background: rgba(255,255,250,0.9);
font-size: 15 px;
padding: 3px 3px;
border: 0px solid #333;
}
</style>
HTM
<div class="onthetop" usertext id="text_1" data-title="какой-то там текст" >
<usertext id="text_2" data-title="еще какой-то" >
<usertext id="text_3" data-title= ="и еще" >
<usertext id="text_4" data-title= ="вообще другой" ></div>
" Я может не туда ушел не в ту степь, помогите пожалуйста я в 'этом не силен.