Tag Tag
also ich möchte ne seite wie diese machen:http://www.millionen-pixel-page.de/
jetzt hab ich dashier:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title><style type="text/css">
<!--
body{
margin:0;
padding:0;
font-family:verdana;
font-size:11px;
line-height:16px;
}
#tausend{
position:absolute;
top:10px;
left:0;
width:1000px;
height:1000px;
}
-->
</style>
<script type="text/javascript">
<!--
texte=new Array();
for (var i=1;i<=10000;i++){
texte[i]='you can buy it '; //texte[i]='you can buy it '+i;
}
var x,y,b,h,ieDoof=2,ie=typeof document.all=='object';
function holKoord(e) {
if(!e)e=window.event;
var scrollPos;
if(typeof window.pageXOffset!='undefined'){
x=window.pageXOffset+e.clientX;
y=window.pageYOffset+e.clientY;
b=window.innerWidth+window.pageXOffset;
h=window.innerHeight+window.pageYOffset;
}
else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
d=document.documentElement;
x=d.scrollLeft+e.clientX;
y=d.scrollTop+e.clientY;
b=d.clientWidth+d.scrollLeft;
h=d.clientHeight+d.scrollTop;
}
else if(typeof document.body!='undefined'){
d=document.body;
x=d.scrollLeft+e.clientX;
y=d.scrollTop+e.clientY;
b=d.clientWidth+d.scrollLeft;
h=d.clientHeight+d.scrollTop;
}
if(ie){
x-=ieDoof;
y-=ieDoof;
}
tip();
}
function tip(){
xZehn=Math.ceil(x/10);
yZehn=Math.ceil(y/10);
xZehn=x%10==0?xZehn+=1:xZehn;
yZehn=y%10==0?yZehn+=1:yZehn;
t=document.getElementById('tTip');
if(x<0||x>999||y<0||y>999){
t.style.display='none';
return;
}
else t.style.display='block';
document.getElementById('tTipU').innerHTML=''; //document.getElementById('tTipU').innerHTML='x='+x+', y='+y;
document.getElementById('tTipM').innerHTML=texte[xZehn+(yZehn-1)*100];
n="t_"+xZehn+"_"+yZehn;
if(t.name!=n){
t.name=n;
document.getElementById('tTipO').innerHTML='field ('+xZehn+','+yZehn+')';
if(t.offsetWidth+xZehn*10+10<b){
t.style.left=xZehn*10+10+'px';
}
else t.style.left=xZehn*10-10-t.offsetWidth+'px';
if(t.offsetHeight+yZehn*10+10<h){
t.style.top=yZehn*10+10+'px';
}
else t.style.top=yZehn*10-10-t.offsetHeight+'px';
}
}
document.onmousemove=holKoord;
//-->
</script></head>
<body>
<table border="0" cellspacing="0" width="1000" height="1000"><tr><td style="background-image:url(zehnMalZehn.gif); ">
<div id="tausend"></div>
<div id="tTip" style="border: 2px solid black; position: absolute; width: 100px; background-color: #eeeeee; left: 0px; top: 9999px; display: block; z-index:3;">
<div id="tTipO">you can buy</div>
<div id="tTipM">pixels</div>
<div id="tTipU" >dd</div>
</div>
</td></tr></table>
[img]./pic.gif[/img]
</body></html>nun möchte ich, dass wen man über das bild fährt ein anderes tooltip kommt, als die x, y angaben.
wie mach ich das???? ich bin nicht so gut in javascript.
unten hab ich das hintergrundbild hinzugefügt. das pic.gif ist einfach 100 x 100 groß.
gruß ich