pop up notes i layer
Hejjeg har følgende problem.
Jeg har noget tekst i et div tag, med nogle properties sat til en vis størrelse og med scroll sat til auto.
så har jeg lavet nogle pop up notes som skal vises hvis man gå over et link. men så istedet for at vises så laver den pludselig et vertical scroll istedet så man ikke ser pop up noten.
er der nogen der kan se hvordan man evt. kunne løse det?
kan ses her: http://www.tanzaweb.com/Statistik/
min kode kan ses her
<style type="text/css">
p {
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
a.special:link,a.special:visited {
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: underline;
}
a.special:hover {
color: #f00;
}
.note {
position: absolute;
top: 5px;
left: 0px;
background: #ffc;
padding: 10px;
border: 1px solid #000;
z-index: 2;
visibility: hidden;
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script language="javascript">
createNotes=function(){
showNote=function(){
// gets corresponding id for note element
var id=this.id.replace(/a/,'note');
note=document.getElementById(id);
// assigns X,Y mouse coordinates to note element
note.style.left=event.clientX;
note.style.top=event.clientY;
// makes note element visible
note.style.visibility='visible';
}
hideNote=function(){
// gets corresponding id for note element
var id=this.id.replace(/a/,'note');
note=document.getElementById(id);
// hides note element
note.style.visibility='hidden';
}
// gets all <a> elements
as=document.getElementsByTagName('a');
// iterates over all <a> elements
for(i=0;i<as.length;i++){
// assigns mouse event handlers to <a> elements with class name "special"
if(/\bspecial\b/.test(as[i].className)){
// shows note element when mouse is over
as[i].onmouseover=showNote;
// hides note element when mouse is out
as[i].onmouseout=hideNote;
}
}
}
// execute code once page is loaded
window.onload=createNotes;
</script>
<title>TanzaWeb Statistik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="main">
<div class="rightBar"><img src="Images/rightBar.gif" border="0"></div>
<div class="linkBox">
LINK<br />
LINK<br />
LINK<br />
SKÆRMOPLØSNING<br />
- undermenu<br />
- undermenu<br />
- undermenu<br />
- undermenu<br />
- undermenu<br />
GEOGRAFISK PLACERING<br />
BROWSER<br />
SØGNING<br />
HVOR KOMME BRUGEREN FRA<br />
LINK<br />
LINK<br />
LINK<br />
LINK<br />
LINK<br />
LINK<br />
</div>
<div class="textFieldTop">
<h3 class="header">Skærmoplysninger</h3>
HVILKEN SKÆRMOPLYSNING HAR DIN BRUGER.
</div>
<div class="textField">
Here there is going to be some text, and statistics with help info buttons like this.
<p>The pop up notes are explained here with the (<a href="#" id="a5" class="special">?</a>)</p>
<div id="note5" class="note">The pop up note is a note that pops up<br /> when you move your mouse over the link</div>
</div>
Style til <div class="textField"> er sat som følger:
.textField {
position: absolute;
left: 400px;
top: 95px;
height: 380px;
width: 520px;
margin: 10px;
overflow: auto;
scrollbar-arrow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-highlight-color: #FE6600;
scrollbar-face-color: #FE6600;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: #FE6600;
scrollbar-darkshadow-color: #FE6600
