Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Do 25.10.2007 10:20
Titel Layer an Cursor positionieren |
  |
|
Hallo liebe Forengemeinde,
ich habe hier ein Problem bei dem ich nicht weiter komme.
Und zwar habe ich in ein website dokument welches in 2 teile aufgeteilt ist.
auf der rechten seite habe ich eine liste mit artikelnummern und auf der linken ein Form element (<input type="image" ... />). Auf dieses Bild möchte ich die Artikelnummern ziehen.
Also bei klick auf eine Artikelnummer wird ein Layer sichtbar der die selbe Artikelnummer enthält.
Dieser layer sollte sich an dem Cursor orientieren damit ich den auf den ImageButton ziehen kann.
Jetzt habe ich mir eine JavaScript funktion gesucht die das realisiert. Nur ist der layer bei klick auf den Link direkt am Cursor und sobald der cursor sich bewegt ist der layer nach rechts verschoben mit einem sehr großen abstand (evtl 200 - 300px)
hier mein dokument.
| Code: |
<!--#include virtual="/inc/db_open.asp" -->
<!--#include virtual="/inc/func.asp" -->
<%
function clean(txt)
txt=replace(txt,".","")
txt=replace(txt,"-","")
txt=replace(txt," ","")
txt=replace(txt,"'","")
clean=txt
end function
artikelnr=clean(request.form("artikelnr"))
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Site</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
div#main {
background: #ffffff;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
width: 100%;
}
div#right {
position:absolute;
background: #ff3300;
min-height: 100%;
height: auto !important;
height: 100%;
width: 200px;
right:0px;
}
div#left {
position:absolute;
background: #ffffff;
min-height: 100%;
height: auto !important;
height: 100%;
left:0px;
}
.tooltip {
position:absolute;
display:none;
}
</style>
</head>
<script type="text/javascript">
<!--
var tooltips=1, tt=null;
document.onmousemove = updateTooltip;
function updateTooltip(e) {
if (tooltips != 0) {
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
if (tt != null) {
tt.style.left = (x + 20) + "px";
tt.style.top = (y + 20) + "px";
}
}
}
function showTooltip(strId,objSelf) {
if (tooltips != 0) {
tt = document.getElementById(strId);
tt.style.display = "block"
//objSelf.onmouseout = new Function('fx','tt.style.display = "none"');
}
}
//-->
</script>
<body>
<%
SQL = "SELECT * FROM Ersatzteil WHERE ArtikelNr='" & artikelnr &"' ORDER BY ArtikelNrErsatzteil"
Set rs = Server.CreateObject("ADODB.Recordset")
rs. open SQL, db, 3, 3
SQL2 = "SELECT * FROM sortiment WHERE ArtikelNr='" & artikelnr &"'"
Set rs2 = Server.CreateObject("ADODB.Recordset")
rs2.open SQL2, db, 3, 3
BereichID = rs("bereichID")
if BereichID = 1 then
imgurl="http://www.site.de/ersatzteilbestellung/images/"&trim(left(rs("ArtikelNr"),7))&"xx.jpg"
else
imgurl="http://www.site.de/ersatzteilbestellung/images/"&trim(rs("ArtikelNr"))&".jpg"
end if
%>
<form>
<div id="main">
<div id="left">
<input type="image" name="artikelnrersatzteil<%=rs("ArtikelNrErsatzteil")%>" src="<%=imgurl%>" border="0" />
</div>
<div id="right">
<div style="padding-left:30px;padding-top:20px;">
<img src="http://www.site.de/images/l_28rev_mit.gif" border="0" />
</div>
<div style="padding-left:10px;padding-top:20px;padding-right:10px;">
<font style="font-family:arial,verdana,sans-serif;color:#ffffff;font-size:10pt;">
<b>Artikel: </b><%=request.form("artikelnr")%><br />
<b>Bereich: </b><%=rs2("Bereich")%>
<br /><br />
<b>Ersatzteile:</b>
<br /><br />
<% do while not rs.eof%>
<div onClick="showTooltip('Tooltip<%=rs("ArtikelNrErsatzteil")%>',this)" style="cursor:hand;">» <%=rs("ArtikelNrErsatzteil")%></div>
<div id="Tooltip<%=rs("ArtikelNrErsatzteil")%>" class="tooltip" style="background:#cccccc;">
<font style="font-family:arial,verdana,sans-serif;color:#ffffff;font-size:10pt;"><b><%=rs("ArtikelNrErsatzteil")%></b></font>
</div>
<br /><br />
<% rs.movenext
loop
%>
</font>
</div>
</div>
</div>
</form>
</body>
</html>
<%
rs.close
rs2.close
%>
<!--#include virtual="/inc/db_close.asp" -->
|
kann mir bitte jemand dabei helfen?
wo ist der fehler im javascript dokument?
danke für eure unterstützung
gruß kash
|
|
Willkommen auf dem Portal für Mediengestalter
