nicht angemeldet
Pop-Up-Bilder nach Drag & Drop im VOrdergrund halten
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>
-
Was muss ich machen??
Du musst nach dem Drag&Drop ein popup.focus() aufrufen. Dabei natürlich "popup" durch deinen Fensternamen ersetzen.
In Selfhtml unter focus() findest du darüber einiges an Info.-
Es soll kein Popup Fenster im eigentlichen Sinne sein, sondern soll lediglich erscheinen, wenn man über die container mit der Maus fährt und verschwinden, sobald man mit der maus den container wieder verlässt.
-
Entweder ist es ein Popup oder es ist kein Popup.
Und wenn es ein Popup ist, kannst du es mit focus() in den Vordergrund holen.
-
-