nicht angemeldet
Ich kann sie leider nicht hochladen... aber hier copy paste der Quelltext meiner kleinen Testseite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Glossar Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="toolTip" style="display:none; background-color:#ffffff;padding:15px;width:300px;color:#666666;font-size:12px;position:absolute;box-shadow: 0 0 5px rgba(0, 0, 0.4, 0.4) inset;">
</div>
<div class="produkttext">
Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus. Ein Haus ist ein Gebäude. Aus diesem gehen Menschen hinaus.
</div>
<div id="glossar" style="display: none;">
<div id="aus">
bla bla bla
</div>
</div>
<script type="text/javascript">
function hideLexInfo() {
var info_layer = document.getElementById("toolTip");
toolTip.style.display = 'none';
}
function showLexInfo(entry, acelement) {
var doc = document;
var info = doc.getElementById(entry).innerHTML;
var toolTip = doc.getElementById("toolTip");
toolTip.innerHTML = '<b>'+entry+'</b><br /><br />'+info;
toolTip.style.zIndex = 9000;
toolTip.style.display = 'block';
$(acelement).mousemove(function(e){
var x = acelement.offsetLeft-280;
var y =acelement.offsetTop-380;
toolTip.style.marginTop = y+'px';
toolTip.style.marginLeft = x+'px';
});
}
function getLexInfo() {
var doc = document;
var infolayer = $('#glossar').children();
var descs = $('.produkttext');
for (var j=0; j<descs.length; j++) {
for (var i=0;i<infolayer.length; i++) {
var exp = new RegExp(infolayer[i].id, "g");
descs[j].innerHTML = descs[j].innerHTML.replace(exp, '<strong class="cue" onMouseOver="javascript:showLexInfo(this.innerHTML, this)" onMouseOut="javascript:hideLexInfo()">'+infolayer[i].id+'</strong>');
}
}
}
getLexInfo();
</script>
</body>
</html>
Grüße, Leila
JürgenB