os pongo un código resumido de algo en lo que estoy ahora. Es un timeline que recoje unos valores dinámicamente (el ancho y el score) y crea unos divs entorno a esos valores. Cada segmento tiene a su vez asociado un Keyframe que se presenta en la parte de arriba. Todo esto lo podeís ver si salvais el código en el navegador (como he dicho, de forma un poco esquemática de lo que luego sería). Hasta aquí todo correcto.
El problema viene cuando intento crear un nuevo div en el contenedor del keyframe para el evento mouseover y click. Mi idea fué la que veis en el código, esto es crear un elemento div y luego borrarlo, pero no me funciona. Y no entiendo pq... si me podeís echar una mano os lo agradecería
codigo completo
Código PHP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tÃ*tulo</title>
<script language="javascript" type="text/javascript">
var segWidth, score, posX, posY, segmentNumber;
var seeClick;
var segments = new Array();
/******* FUNCION 1: CONSTRUCTOR************/
function segment(){
this.score = parseInt(Math.random()*100);
this.segWidth = parseInt(Math.random()*200);
}
/**************************************/
/********* 2: EVENTOS************/
function keyVisibleOver(elem,i, value){
var keyframe = document.getElementById('keyFrame'+i);
if(elem != seeClick){
keyframe.className = 'keyframesBig';
var scoreAd = document.createElement('div');
var scoreText = document.createTextNode("Score: "+value);
keyframe.appendChild(scoreAd);
scoreAd.id = "score_class";
scoreAd.appendChild(scoreText);
}
}
/**************************************/
function keyHide(elem, i){
var keyframe = document.getElementById('keyFrame'+i);
var scoreAd = document.getElementById('score_class');
if(elem != seeClick){
keyframe.className = 'keyframes';
keyframe.removeChild(scoreAd);
}
}
/**************************************/
function keyVisibleClick(elem, i, value){
var keyframe = document.getElementById('keyFrame'+i);
limpiar(i);
var scoreAd = document.createElement('div');
var scoreText = document.createTextNode("Score: "+value);
keyframe.className = 'keyframesBig';
keyframe.appendChild(scoreAd);
scoreAd.id = "score_class";
scoreAd.appendChild(scoreText);
seeClick = elem;
}
/**************************************/
function limpiar(i){
var arrKeyframes = document.getElementById('keyFrames_cont').getElementsByTagName('div');
var scoreAd = document.getElementById('score_class');
var keyframe = document.getElementById('keyFrame'+i);
for(j=0; j<arrKeyframes.length; j++){
keyframe.removeChild(scoreAd);
arrKeyframes[j].className = 'keyframes';
}
}
/******* FUNCION 6: CREAMOS LOS SEGMENTOS************/
function makeSegments(){
var i;
segmentNumber = 4;//por ejemplo
for(i=0; i<segmentNumber; i++){
var timeline = document.getElementById('timeline');
segments[i]= new segment();
var segmentDiv = "<div id='seg"+i+"' onclick='keyVisibleClick(this,"+i+");' onmouseover='keyVisibleOver(this,"+i+","+segments[i].score+");' onmouseout='keyHide(this,"+i+");' style='width:"+segments[i].segWidth+"px'";
if(segments[i].score>=0 && segments[i].score<=50) segmentDiv += "class='segClass score_10'><\/div>";
else if(segments[i].score>50 && segments[i].score<=100) segmentDiv += "class='segClass score_20'><\/div>";
timeline.innerHTML += segmentDiv;
/*******************/
posX = (document.getElementById('seg'+i).offsetLeft)+(parseInt(segments[i].segWidth/2))-25;
posY = 2;
document.getElementById('keyFrames_cont').innerHTML += "<div id='keyFrame"+i+"' class='keyframes'"+
"style='left:"+posX+"px; top:"+posY+"px'><img src='./images/keyFrame_sample.jpg' id='keyframe_img"+i+"'/><\/div>";
}
}
</script>
<style type="text/css">
.segClass{
border-right:1px solid #fff;
height:15px;
float:left;
cursor:pointer;
}
.score_10{
background:yellow;
}
.score_20{
background:green;
}
.keyframes{
background-color:red;
width:21px;
height:22px;
z-index:0;
}
.keyframesBig{
background-color:blue;
width:21px;
height:22px;
z-index:100;
}
#keyFrames_cont div{
padding:7px;
position:absolute;
}
#keyFrames_cont div img{
float:left;
}
</style>
</head>
<body onload="makeSegments();">
<div id="keyFrames_cont"></div>
<div id="timeline" style="height:15px; margin-top:60px"></div>
</body>
</html>
