nicht angemeldet
ausfahrbare div box
Gunnar BittersmannHallo zusammen,
ich hoffe ich bin hier richtig..
ich habe einen div-layer der sich per javascrip bei "mouseover" ausfahren und "onmouseout" wir einfahren soll...
<html>
<head>
<title>divbox</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{ background: #fff;}
#divKO{ border:1px solid #804000;
background-color:#906;
width: 120px;
height: 40px;
position:fixed; bottom:10px; right:50px;}
//-->
</style>
<script type="text/javascript">
<!--
var intMin = 40; // Min. höhe des DIVs
var intMax = 100; // Max. höhe des DIVs
var intStep = 2; // Schrittweite, um die das DIV in seiner Grösse geändert wird
var intDelay = 5; // Verzögerung in Millisekunden
var blnBig = false;
var hTimer = null;
function initResize(){
blnBig = (blnBig)? false : true; // false => verkleinern, true => vergrössern
// Falls noch ein Timer läuft -> beenden
if(hTimer != null) window.clearTimeout(hTimer);
// Resize-Funktion verzögert aufrufen
hTimer = window.setTimeout("resizeDiv()", intDelay);
}
function resizeDiv(){
// Vorzeichen zum Vergrössern (1)/Verkleinern (-1) bestimmen
var intSgn = (blnBig)? 1 : -1;
// Element ermitteln, das in der Grösser verändert werden soll
var objDiv = document.getElementById("divKO");
// Falls der Brower die Methode "getComputedStyle" kennt (W3C-DOM)
if(window.getComputedStyle){
var strHeight = window.getComputedStyle(document.getElementById("divKO"), null).getPropertyValue("height");
// Falls der Browser die Methode "currentStyle" kennt (neuere IEs)
}else if(document.getElementById("divKO").currentStyle){
var strHeight = document.getElementById("divKO").currentStyle["height"];
}
// Neue Grösse zuweisen
objDiv.style.height = (parseInt(strHeight) + intSgn*intStep) + "px";
// Falls die neue Grösse noch innerhalb der Grenzen liegt -> Resize-Funktion erneut aufrufen
if((parseInt(objDiv.style.height) >= intMin) && (parseInt(objDiv.style.height) <= intMax)){
hTimer = window.setTimeout("resizeDiv()", intDelay);
}
}
//-->
</script>
</head>
<div id="divKO" onmouseover="initResize();" >
<p align="center">KONTAKT</p>
</div>
</body>
</html>
nun funktioniert das aus bzw einfahren nicht wirklich sauber...
ich bin in javascript leider überhaupt nicht fit und wäre daher für verbesserungsvorschläge sehr dankbar..
-
Hallo,
warum nimmst du dafür javascript? würde es nicht auch so gehen:
#divKO { height: 40px; } #divKO:hover { height: 100px; }Schöner kann man es immer noch mit CSS Animation machen.
Gruß
Ole-
@@Ole.:
nuqneH
Schöner kann man es immer noch mit CSS Animation machen.
Du meinst Transitions.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry) -
-
-
@@Njeb:
nuqneH
ich bin in javascript leider überhaupt nicht fit
Nicht schlimm. JavaScript wird für sowas nur von Leuten verwendet, die in CSS nicht fit sind.
und wäre daher für verbesserungsvorschläge sehr dankbar..
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Qapla'
1000dank!
-