Background in en uit faden

Broertjuhhh · 20 dec 2008

Hallo mensen,

Ik wil graag (pagina1.php) in een frame kunnen in en uit faden, bijv.

onmouseover fade in pagina1.php in frame 2

onmousout fade out pagina1.php in frame 2

Ik hoop dat het zo duidelijk is... enzo ja alvast bedankt !

Glest · 20 dec 2008

het beste wat je kunt doen is een div vóór je complete pagina1.php plaatsen die je in en out fade.

Voor het faden zelf kun je dan met window.setTimeout gaan werken en elke x miliseconden de tranparantie aanpassen. En om zeker te zijn dat je geen vreemde problemen krijgt met muiskliks enzo kun je het beste ook de div compleet verbergen zodra hij compleet transparant is.

Hier een voorbeeld:

HTML:

<html>
<head>

<style type="text/css">
*
{
  color: #FF00FF
}

div#div_fader
{
  background-color: #000000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100000px; /* Moet genoeg zijn :P */
  height: 100000px;
  z-index: 100; /* Dan komt het element voor andere elementen */
}

a#a_example
{
  position: absolute;
  z-index: 101;
  color: #DDDDDD;
}
</style>


<script type="text/javascript">
function setOpacity(element, opacity)
{
  opacity = Math.max(0, Math.min(100, opacity));  // opacity is nu tussen 0 en 100
  element.style.opacity = opacity / 100;  // Normale browsers
  element.style.filter = "alpha(opacity=" + opacity+ ")";  // Internet Explorer
  element.my_opacity = opacity;

  if (opacity == 0)
  {
    element.style.display = "none";
  }
  else
  {
    element.style.display = "block";
  }
}

function fadeIn(element, step)
{
  if (element.currentTimer)
  {
    window.clearTimeout(element.currentTimer);
    element.currentTimer = false;
  }

  if (element.my_opacity < 100)
  {
    setOpacity(element, element.my_opacity + step);
    element.currentTimer = window.setTimeout(fadeIn, 10, element, step);
  }
}

function fadeOut(element, step)
{
  if (element.currentTimer)
  {
    window.clearTimeout(element.currentTimer);
    element.currentTimer = false;
  }

  if (element.my_opacity > 0)
  {
    setOpacity(element, element.my_opacity - step);
    element.currentTimer = window.setTimeout(fadeOut, 10, element, step);
  }
}
</script>

</head>
<body>

<div id="div_fader"></div>

<script type="text/javascript" language="JavaScript">
  var div_fader = document.getElementById("div_fader");
  setOpacity(div_fader, 0);
</script>

<a id="a_example" onmouseover="fadeIn(div_fader, 5)" onmouseout="fadeOut(div_fader, 5)" >Test test test</a>

<br />Lalalalalala<br />
<br />Lalalalalala<br />
<br />Lalalalalala<br />
<br />Lalalalalala<br />
<br />Lalalalalala<br />
<br />Lalalalalala<br />

</body>
</html>

Broertjuhhh · 20 dec 2008

Bedankt voor de moeite, ik heb inmiddels het volgende scriptje gevonden, een beetje aangepast en dat werkt als een speer.

PHP:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<html>
<head> 

<SCRIPT LANGUAGE="JavaScript"> 

function fadeInPage()
{ 
if(document.getElementById("fadeDiv").filters("alpha").opacity < 100)
{ 
document.getElementById("fadeDiv").filters("alpha").opacity += 1; 
setTimeout("fadeInPage()",20); 
} 
else
{ 
document.getElementById('fadeDiv').style.visibility = "visible";
} 
} 
</script> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> 
<body leftmargin="0" topmargin="0" onLoad="fadeInPage()"> 
<body onLoad="fadeInPage()"> 
<DIV ID="fadeDiv" style="filter:Alpha(opacity=0); width:100%"><img src="jou foto.jpg" width="420" height="847"> 
</DIV>
</body> 
</html>

Background in en uit faden

Broertjuhhh

Gebruiker

Glest

Gebruiker

Broertjuhhh

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy