nicht angemeldet
Hi,
Im Studium habe ich gelernt, Java zu programmieren. Da ich schon lange mit HTML / CSS rumwurschtel wollte ich mich jetzt mal an JavaScript machen. Allerdings habe ich arge Probleme!! Ich verstehe nicht, wie die Objektorientiertheit realisiert ist. Ich vermisse meine schönen Klassen, in denen alles gekapselt ist.
Folgendes brauche ich:
- DIVs relativ zur Fenstergröße ausrichten (hierfür gibt es auch schon Quellcode, welcher allerdings eher mäßig ist, glaube ich *grins*)
- Bildwechsel bei onMouseOver.
Wie realisiere ich das? Wohl am besten mit Objekten, oder? Gibt's da schon Quellcode. Schön kurz und prägnant?
Hier erstmal meine kreativen Schöpfungen: :)
//////////////////////////////
//format.css:
//////////////////////////////
body {
background-color:#004F35;
}
.yellowDiv {
position:absolute;
background-color:#CCAE2E;
top:0px;
width:100%;
min-width:100%;
max-width:100%;
height:304px;
min-height:304px;
max-height:304px;
border:none;
z-index:1;
}
.circle {
position:absolute;
width:584px;
height:584px;
background:url(./images/backCircle2.gif) fixed no-repeat;
border:none;
z-index:2;
}
.menuHome {
position:absolute;
border:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
/* font-weight:bold;*/
color:#CCAE2E;
z-index:3;
}
/*--- link menuHome ---*/
a.menu:link {
color:#CCAE2E;
text-decoration:none;
}
a.menu:visited {
color:#CCAE2E;
text-decoration:none;
}
a.menu:hover {
color:#F3E8B7;
text-decoration:underline;
}
a.menu:active {
color:#F4F0E0;
text-decoration:none;
}
//////////////////////////////
// index.htm:
//////////////////////////////
<html>
<head>
<title>Felix Manke · index.htm</title>
<link rel="stylesheet" href="format.css" type="text/css" />
<script type="text/javascript">
<!--
//--- simple Browser-Check
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
var yellowHeight = 304;
var circleSize = 584;
function switchImage(id, dest){
document.getElementById(id).src = dest.src;
}
function getClientWidth(){
if (window.innerWidth)
return window.innerWidth;
else if (document.body && document.body.offsetWidth)
return document.body.offsetWidth;
}
function getClientHeight(){
if (window.innerHeight)
return window.innerHeight;
else if (document.body && document.body.offsetHeight)
return document.body.offsetHeight;
}
function init(){
var clWidth = getClientWidth();
var clHeight = getClientHeight();
var halfWidth = clWidth / 2;
var halfHeight = clHeight / 2;
//--- yellowDiv
var yellowTop = halfHeight - (yellowHeight / 2);
if(ns4)
document.layers["yellowDiv"].top = yellowTop;
else if(ie4)
document.all["yellowDiv"].style.pixelTop = yellowTop;
else if(ie5 || ns6)
document.getElementById("yellowDiv").style.top = yellowTop;
//--- circle
var circleLeft = (halfWidth * 0.6667) - (circleSize / 2);
var circleTop = halfHeight - (circleSize / 2);
if(circleLeft < 0)
circleLeft = 0;
if(ns4){
document.layers["circle"].left = circleLeft;
document.layers["circle"].top = circleTop;
}
else if(ie4){
document.all["circle"].style.pixelLeft = circleLeft;
document.all["circle"].style.pixelTop = circleTop;
}
else if(ie5 || ns6){
document.getElementById("circle").style.left = circleLeft;
document.getElementById("circle").style.top = circleTop;
}
//--- menuHome
var menuLeft = circleLeft + circleSize;
var menuTop = yellowTop + yellowHeight + 5 ;
if(ns4){
document.layers["menuHome"].left = menuLeft;
document.layers["menuHome"].top = menuTop;
}
else if(ie4){
document.all["menuHome"].style.pixelLeft = menuLeft;
document.all["menuHome"].style.pixelTop = menuTop;
}
else if(ie5 || ns6){
document.getElementById("menuHome").style.left = menuLeft;
document.getElementById("menuHome").style.top = menuTop;
}
}// init
//-->
</script>
</head>
<body onLoad="init()">
<div class="yellowDiv" id="yellowDiv">
</div>
<div class="circle" id="circle">
<img src="./images/frame02a.gif" width="584" height="584"/>
</div>
<div class="menuHome" id="menuHome">
<a class="menu" href="index.htm">home</a> ·
<a class="menu" href="sitemap.htm">sitemap</a> ·
<a class="menu" href="contact.htm">contact</a>
</div>
</body>
</html>