Ich habe endlich ein JavaScript zum Laufen gekriegt, das meinen Layer einblendet.
Allerdings habe ich jetzt ein neues Problem, bei dem ich nicht weiterkomme:
Der Layer ("about") wird hinter dem background-image angezeigt!
Ich dachte, ich könnte das umgehen, indem ich dem Layer einen höheren z-index zuweise, aber das scheint nicht zu gehen. Der Layer ("home") der beim Laden der Seite sichtbar ist, liegt ja über dem Bild, aber der Layer, den man einblendet, nicht!?
Hier mal der Quellcode der Seite (die Position des Layers stimmt noch nicht, aber das ist ja zunächst egal):
Allerdings habe ich jetzt ein neues Problem, bei dem ich nicht weiterkomme:
Der Layer ("about") wird hinter dem background-image angezeigt!
Ich dachte, ich könnte das umgehen, indem ich dem Layer einen höheren z-index zuweise, aber das scheint nicht zu gehen. Der Layer ("home") der beim Laden der Seite sichtbar ist, liegt ja über dem Bild, aber der Layer, den man einblendet, nicht!?
Hier mal der Quellcode der Seite (die Position des Layers stimmt noch nicht, aber das ist ja zunächst egal):
Code:
<html>
<head>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1)">
<meta http-equiv="Site-Enter" content="blendTrans(Duration=1)">
<style type="text/css">
<!--
#back {margin-left: -400px; margin-top: -300px}
#home {margin-left: -200px}
#homebutton {margin-top: -27px}
BODY,A {
scrollbar-face-color:#1F1F20;
scrollbar-highlight-color:#9C9C9C;
scrollbar-3dlight-color:#9C9C9C;
scrollbar-darkshadow-color:#9C9C9C;
scrollbar-shadow-color:#9C9C9C;
scrollbar-arrow-color:#9C9C9C;
scrollbar-track-color:#9C9C9C;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
//JavaScript Disjointed Imagemap Code
//copyright daxassist, 2000-2004
//visit http://www.daxassist.com for this and other javascripts with full tutorials.
if(document.images) {
pics = new Array();
pics[01] = new Image();
pics[01].src = "Bilder/menuprepress.gif";
pics[02] = new Image();
pics[02].src = "Bilder/menuservice.gif";
pics[03] = new Image();
pics[03].src = "Bilder/menuagb.gif";
pics[04] = new Image();
pics[04].src = "Bilder/menukontakt.gif";
pics[05] = new Image();
pics[05].src = "Bilder/menuimpressum.gif";
pics[06] = new Image();
pics[06].src = "Bilder/homeon.gif";
pics[07] = new Image();
pics[07].src = "Bilder/menu.gif";
pics[08] = new Image();
pics[08].src = "Bilder/homeoff.gif";
}
function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
</script>
<script language="JavaScript">
//fades layer in
ie5 = (document.all && document.getElementById);
ns6 = (!document.all && document.getElementById);
function fadeIn(id)
{
var mydiv = document.getElementById(id);
if(document.all && !window.opera)
{
mydiv.filters.blendTrans.Apply();
mydiv.style.visibility="visible";
mydiv.filters.blendTrans.Play();
}
}
</script>
<script language="JavaScript">
//fades layer in
function fadeIn(id)
{
var mydiv = document.getElementById(id);
if(document.all && !window.opera)
{
mydiv.filters.blendTrans.Apply();
mydiv.style.visibility="visible";
mydiv.filters.blendTrans.Play();
}
}
</script>
<title>*** FrankPye - PrePress - Service ***</title>
</head>
<body bgcolor="#000000">
<div id="back" style="z-index: 1;POSITION: absolute; top: 50%; left: 50%">
<table border="0" background="Bilder/back.gif" width="800" height="600">
<tr>
<td>
</tr>
</table>
<div id="menu" style="z-index: 2;POSITION: absolute; top: 29px">
<map name="FPMap0">
<area shape="polygon" coords="119, 24, 124, 2, 274, 3, 274, 26" href="#" alt="PrePress-Service" onMouseOver="changer('holder',01);"
onMouseOut="changer('holder',07);"
onclick=javascript:fadeIn('about')>
<area shape="rect" coords="276, 4, 433, 28" href="#" alt="Serviceleistungen" onMouseOver="changer('holder',02);"
onMouseOut="changer('holder',07);"
onclick=javascript:show_service()>
<area shape="rect" coords="433, 3, 564, 28" href="#" alt="AGB / Preise" onMouseOver="changer('holder',03);"
onMouseOut="changer('holder',07);"
onclick=javascript:show_agb()>
<area shape="rect" coords="564, 2, 671, 28" href="#" alt="Kontakt" onMouseOver="changer('holder',04);"
onMouseOut="changer('holder',07);"
onclick=javascript:show_kontakt()>
<area shape="rect" coords="671, 4, 793, 28" href="#" alt="Impressum" onMouseOver="changer('holder',05);"
onMouseOut="changer('holder',07);"
onclick=javascript:show_impressum()>
</map>
<img name="holder" src="Bilder/menu.gif" border="0" usemap="#FPMap0" width="800" height="29">
</div>
<div id="homebutton" style="z-index: 3">
<map name="FPMap1">
<area href=# shape="rect" coords="247, 7, 480, 19"
onMouseOver="changer('button',06);"
onMouseOut="changer('button',08);"></map>
<img src="Bilder/homeoff.gif" name="button" border="0" width="800" height="27" usemap="#FPMap1">
</div>
</div>
<div id="home" style="z-index: 10;POSITION: absolute; top: 50%; left: 50%">
<font face="Chicago" size="1" color="#9A9A9A">
<center>
Willkommen bei www.frankpye-prepress-service.de!<br><br>
Diese Internetpräsenz liefert alle nötigen Information von und über den FrankPye - PrePress - Service.</font>
</center>
</div>
<div id="about" style="z-index: 11;width:10em; height:2em; font-face: Arial; font-size:3em; font-weight:none; color:#9A9A9A; visibility:hidden; filter:blendTrans(Duration=2) POSITION: absolute; top: 50%; left: 50%">
<font face="Arial" size="2">
<center>
<u>Über FrankPye-PrePress-Service</u>
<br><br><br>
<font size="1">
FrankPye-PrePress-Service ist ein neues Unternehmen
<br>
in der Techniker-Servicebranche,<br>
gegründet und geführt von Francis Pye.
<br><br>
Nach über 17-jähriger Tätigkeit bei der Scangraphic Prepress Technology GmbH machte ich mich im Oktober 2005 selbstständig.
<br><br>
Ich habe große Erfahrung im nationalen, wie auch internationalen Techniker-Service. Weiterhin habe ich regelmäßig internationale Schulungen geleitet.
<br><br>
FrankPye-PrePress-Service bietet Ihnen ein umfangreiches und hochwertiges Angebot an Service und Betreuung von Fotosatzbelichtern zu akkuraten Preisen.
<br><br>
Viele Kunden kennen mich aus der<br>langjährigen Zusammenarbeit und wissen meine Kompetenz, Einsatzbereitschaft und Flexibilität zu schätzen.
</center>
</font>
</font>
</div>
</body>
</script>
Zuletzt bearbeitet: