hola,
bueno, al final lo he hecho creando divs vacíos y cambiándoles la clase dependiendo del evento.
Aquí va el código por si a alguien le interesa.
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);
var scoreDiv = document.getElementById('score_cont'+i);
if(elem != seeClick){
keyframe.className = 'keyframesBig';
scoreDiv.className = 'scoreClass_sel';
scoreDiv.innerHTML = value;
}
}
/**************************************/
function keyHide(elem, i){
var keyframe = document.getElementById('keyFrame'+i);
var scoreDiv = document.getElementById('score_cont'+i);
if(elem != seeClick){
keyframe.className = 'keyframes';
scoreDiv.className = 'scoreClass_no';
scoreDiv.innerHTML = '';
}
}
/**************************************/
function keyVisibleClick(elem, i, value){
limpiar();
var keyframe = document.getElementById('keyFrame'+i);
var scoreDiv = document.getElementById('score_cont'+i);
keyframe.className = 'keyframesBig';
scoreDiv.className = 'scoreClass_sel';
scoreDiv.innerHTML = value;
seeClick = elem;
}
/**************************************/
function limpiar(){
var arrKeyframes = document.getElementById('keyFrames_cont').getElementsByTagName('div');
for(j=0; j<arrKeyframes.length; j++){
//ahora parece que está bien. Comprobamos dentro de los elementos div, el classname y si hay alguno
//con el del score seleccionado, lo ponemos en su estado normal, el resto que aparecerán en normal,
//los mantenemos con esa clase y borramos su contenido y el resto, los ponemos a su clase normal
if(arrKeyframes[j].className == 'scoreClass_sel'){
arrKeyframes[j].className = 'scoreClass_no';
arrKeyframes[j].innerHTML = '';
}
else if(arrKeyframes[j].className == 'scoreClass_no'){
arrKeyframes[j].className = 'scoreClass_no';
arrKeyframes[j].innerHTML = '';
}
else 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+","+segments[i].score+");' 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 id='score_cont"+i+"' class='scoreClass_no'><\/div><\/div>";
}
}
</script>
<style type="text/css">
.scoreClass_no{
background-color:transparent;
}
.scoreClass_sel{
background-color:#063;
opacity:.80;
}
.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>
Por cierto, si no es abusar demasiado y se os ocurre alguna forma mejor de plantearlo ya sabeis.
Gracias y un saludo!