nicht angemeldet
Soda, um nicht noch eine rechnung für die Glaskugelreinigung zu erhalten, hier der betroffene Code:
Zuert das html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Hörl EDV - Ihre kompetente EDV Betreuung aus Innsbruck</title>
<link rel="stylesheet" type="text/css" href="tooltip.css">
<style type="text/css">
body {
text-align: left; /* Zentrierung IE */
opacity: 0;
}
#seitenbereich {
text-align:left; /* Inhalt wieder links */
margin-top: 15%;
margin-left: 10%;
background-color:white;
}
#fusszeile {
text-align:center;
clear: both;
background-color:white;
border-top:1px solid black;
}
#navi {
float:left;
background-color:white;
}
#inhalte {
background-color:white;
margin-left: 30%;
}
.style1 {
font-family:Arial, Helvetica, Sans-Serif}
</style>
<script language="javascript" type="text/javascript" src="innertooltip.js"></script>
<script language="javascript" type="text/javascript" src="tooltip.js"></script>
<script language="javascript" type="text/javascript">
var inMoz = 0, inIE = 0;
var id;
function fadein()
{
inMoz = inMoz + 0.1;
inIE = inIE + 10;
if (inMoz<1)
{
document.getElementById('body').style.filter='alpha(opacity='+inIE+')';
document.getElementById('body').style.opacity = inMoz ;
window.setInterval("fadein('body')",200);
}
}
function init()
{
fadein();
tooltip();
}
</script>
</head>
<body id="body" onload="init()">
<div id="seitenbereich">
<hr>
<div id="navi" style="width: 11.6em; height: 452px">
<!--Fallbeispiel-->
<div><hr><img onmouseover="tooltip.show(
'<h1><b>Fallbeispiel:</b></h1><br> Sie haben ein Unternehmen mit 5 Arbeitsplätzen und einem Server. <br>'
+'Sie wollen wissen ob Ihr Internet- und Netzwerkstand aktuell ist.<br><br>'
+'<b>Wir gehen wie folgt vor:</b><br>'
+'1. Analyse des Netzwerks <br> 2. Empfehlungen <br> 3. Entweder Suche'
+'nach dem idealen Hardwarehändler für Neubeschaffung oder direkte Beseitigung von Fehlern / Verbesserung'
, 600,1)" src="fallbeispiel_grey.gif" alt="Fallbeispiel"><hr><br></div>
<!--Referenzen-->
<div><hr><img onmouseover="tooltip.show(
'<h1><b>Referenzen:</b></h1><br> <b>Auszug aus unserer Kundenliste:</b><br><br>'
+'Tiroler Zukunftsstiftung <br> Verkehrsverbund Tirol <br> Institut für Föderalismus <br> und viele mehr...'
, 300,0);" onmouseout="tooltip.hide();" src="referenzen_grey.gif" alt="Referenzen"><hr><br></div>
<!--Services-->
<div><hr><img onmouseover="tooltip.show(
'<h1><b>Services:</b></h1><br><b>Netzwerk:</b><br> -Beratung <br> -Installation<br> -Planung<br>'
+' -Wartung (zum Beispiel in Form eines Wartungsvertrags)<br> -Erweiterung<br><b>Consulting:</b>'
+'<br> -Beratung und Erstellung langfistiger Informationssystem-Konzepte<br>'
+'Unterstützung bei Kaufentscheidung, Investitionsberatung<br>'
+'Analyse und Optimierung bestehender Systeme<br>'
+'<b>Datenbank:</b><br>'
+'Ihre Datenbank, für Ihr Unternehmen!<br>'
+'<b>Internetapplikationen:</b><br>'
+'Wie zum Beispiel Onlinefragebögen'
, 300,0)" onmouseout="tooltip.hide();" src="services_grey.gif" alt="Services"><hr><br></div>
<!--Kontakt-->
<div><hr><img onmouseover="tooltip.show(
'<h1><b>Kontakt</b></h1><br><div onclick="innertooltip('Test',200);"></div>'
, 300,0);" onmouseout="tooltip.hide();" src="kontakt_grey.gif" alt="Kontakt"><hr><br></div>
</div>
<div id="inhalte" style="width: 0px; height: 449px">
<img src="bckgrnd.gif" style="z-index:0" width="546" height="448">
</div>
<div id="fusszeile">
</div>
</div>
</body>
</html>
und nun das dazugehörige Javascript (ist eine abgewandelte Version von http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/)
var tooltip=function(){
var id = 'tt';
var speed = 10;
var timer = 20;
var endalpha = 50;
var alpha = 0;
var tt,t,c,b,h,z;
var ie = document.all ? true : false;
return{
show:function(v,w,z){
//Funktion erzeugt das div-Element
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
tt.appendChild(c);
z = document.createElement('div');
z.setAttribute('id',id + 'cont');
tt.appendChild(z);
document.body.appendChild(tt);
z.style.marginTop = -30 +"%";
z.style.marginLeft = 10 + "%";
z.innerHTML = 'Habe die Ehre';
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
}
tt.style.display = 'block';
tt.style.width = 500 + 'px';
tt.style.height = 420 + 'px';
c.style.width = tt.style.width;
c.style.height = tt.style.height;
c.innerHTML = v;
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
Dem Javascript ist noch dieses kleine CSS beigelegt:
#tt {
position:absolute;
display:block;
top: 15px;
margin-top: 15%;
margin-left: 36%;
}
#ttcont {
display:block;
padding:2px 12px 3px 7px;
margin-left:5px;
background:#666;
color:#fff;
border:thin black solid;
}
Ich bin eigentlich EDV Betreuer und weiß, dass ich mich nicht ansatzweise al Programmierer oder WebDesigner beschimpfen darf, falls du aber doch Punkte im Code findest, die dir, auch vom Stil her, ganz übel aufstoßen, drück sie mir bitte ins Gesicht!
Zur Erläuterung:
Beim 1. Punkt Fallbeispiel habe ich einen 2. DivContainer eingefügt um zu veranschaulichen, was ich mit einem Klick zeigen will. Im letzten Punkt Kontakt habe ich versucht, per Unicode dynamisch ein div im div und das während der Parameterübergabe, zu erzeugen. Leider funktioniert das nicht :)
Vielen Dank
Northon
Der Martin