nicht angemeldet
hallo,
ich habe folgendes Problem.
Ich habe eine Tabelle aus Div-Containern erstellt. Die einzelnen Div-Container lassen sich per Drag & Drop verschieben. Wenn man mit der Maus über die Divs fährt, öffnet sich ein Pop-Up-Bild. Das Problem an der Sache - sobald ich die Divs per Drag & Drop verschiebe, ist das Pop-Up nicht mehr im Vordergrund.
Was muss ich machen??
hier mal ein auszug...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Drag and Drop Example</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
// Make all the divs draggables from draggables division.
$A($('Semester1').getElementsByTagName('div')).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);
$A($('Semester2').getElementsByTagName('div')).each(
function(item) {
new Draggable(
item,
{
revert: true,
ghosting: true
}
);
}
);
Droppables.add(
'Semester1',
{
hoverclass: 'hoverActive',
onDrop: moveItem,
accept: ['E-BWL','OFP','MikroI','MakroI','Mathe','Marketing','ACTI','Ratio','IT-Systeme','StatistikII']
}
);
Droppables.add(
'Semester2',
{
hoverclass: 'hoverActive',
onDrop: moveItem,
accept: ['Bilanzen','MikroII','ACTII','Recht','StatistikI','Fima','MakroII','ACTIII']
}
);
}
function moveItem( draggable,droparea){
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
function da(disableobj){ zobj = document.getElementById(disableobj);
zobj.style.display = "none";
}
function ena(enableobj){ zobj = document.getElementById(enableobj);
zobj.style.display = "inline";
}
</script>
<style type="text/css">
#Semester1,#Semester2,#Semester3,#Semester4,#Semester5,#Semester6 {
float: left;
background-color: #D4D4D4;
font-size: 14px;
width: 82px;
padding: 2px;
}
.hoverActive {
background-color: #4A6BA5;
}
div.E-BWL, div.ACTI, div.Bilanzen, div.ACTII, div.Marketing, div.OFP, div.Ratio, div.ACTIII, div.Fima { margin: 2px;
padding: 0px;
background-color: #e5b8b7;
font-size:11px;
text-align: center;
cursor: move;
width:78px;
height:50px;
border-width:1px;
border-color: black;
border-style: solid;
}
div.MikroI, div.MakroI, div.MikroII, div.MakroII { margin: 2px;
padding: 0px;
background-color: #e5b8b7;
font-size:11px;
text-align: center;
cursor: move;
width:78px;
height:50px;
border-width:1px;
border-color: black;
border-style: solid;
}
div.Mathe, div.Recht, div.StatistikI, div.IT-Systeme, div.StatistikII { margin: 2px;
padding: 0px;
background-color: #e5b8b7;
font-size:11px;
text-align: center;
cursor: move;
width:78px;
height:50px;
border-width:1px;
border-color: black;
border-style: solid;
}
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover {z-index:1000; cursor:help; color:#c30; background:white; }
a.infobox span { visibility:hidden;margin-top:1.5em; padding:1em; text-decoration:none; position:absolute;left:1px;top1px; }
a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
visibility:visible; left:1em;
border:1px solid #c30; color:blue; background:#D4D4D4; }
</style>
</head><body>
<div id="Semester1">
<div id="item_2" class="E-BWL"><p><a class="infobox" href="#INFO">E-BWL<span style="width: 90px; height: 120px; z-index: 1001;"><img src="Professoren/kabst.bmp" alt="Professoren/kabst.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="ACTI"><p><a class="infobox" href="#INFO">ACT I<span style="width: 90px; height: 120px; z-index: 1001;"><img src="Professoren/wehrheim.bmp" alt="Professoren/wehrheim.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="MikroI"><p><a class="infobox" href="#INFO">Mikro I<span style="width: 90px; height: 120px; z-index: 1001;"><img src="Professoren/goetz.bmp" alt="Professoren/goetz.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="MakroI"><p><a class="infobox" href="#INFO">Makro I<span style="width: 90px; height: 120px; z-index: 1001;"><img src="Professoren/goecke.bmp" alt="Professoren/goecke.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="Mathe"><p><a class="infobox" href="#INFO">Mathe<span style="width: 90px; height: 120px; z-index: 1001;"><img src="Professoren/reimer.bmp" alt="Professoren/reimer.bmp" width="90" border="0" height="120"></span></a></p></div>
</div>
<div id="Semester2">
<div id="item_2" class="Bilanzen"><p><a class="infobox" href="#INFO">Bilanzen<span style="width: 90px; height: 120px; z-index: 1000;"><img src="Professoren/wehrheim.bmp" alt="Professoren/wehrheim.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="ACTII"><p><a class="infobox" href="#INFO">ACT II<span style="width: 90px; height: 120px; z-index: 1000;"><img src="Professoren/weissenberger.bmp" alt="Professoren/weissenberger.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="MikroII"><p><a class="infobox" href="#INFO">Mikro II<span style="width: 90px; height: 120px; z-index: 1000;"><img src="Professoren/goecke.bmp" alt="Professoren/goecke.bmp" width="90" border="0" height="120"></span></a></p></div>
<div id="item_2" class="Recht"><p><a class="infobox" href="#INFO">Recht<span style="width: 90px; height: 120px; z-index: 1000;">kein Bild vorhanden</span></a></p></div>
<div id="item_2" class="StatistikI"><p><a class="infobox" href="#INFO">Statistik I<span style="width: 90px; height: 120px; z-index: 1000;"><img src="Professoren/winker.bmp" alt="Professoren/.bmp" width="90" border="0" height="120"></span></a></p></div>
</div>
</body></html>