<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>Div's leren besturen JAVA</TITLE>
<style type="text/css">
/* afgeronde hoeken */
.arhoeken {background:transparent; width:200px; /* boxbreedte */}
.arb1, .arb2, .arb3, .arb4 {display:block; overflow:hidden; background:transparent; font-size:1px;}
.arb1, .arb2, .arb3 {height:1px;}
.arb2, .arb3, .arb4 {background:white; border-left:1px solid #000000; border-right:1px solid #000000;}
.arb1 {margin:0 5px; background:white;}
.arb2 {margin:0 3px; border-width:0 2px;}
.arb3 {margin:0 2px;}
.arb4 {height:2px; margin:0 1px;}
.arboxinhoud {
display:block;
background:white;
border:0 solid #000000;
border-width:0 1px;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.div {
filter: alpha(opacity=70); // IE syntax
opacity: .70; /* De rest*/;
text-align: center;
color: white;
}
.style10 {
background-color: #FFFFFF;
font-family: "Agent Orange";
}
.style11 {
color: black;
text-align: center;
background-color: white;
font-family: "Agent Orange";
}
</style>
<script type="text/javascript">
function getobject(objx){
if (document.getElementById)
return document.getElementById(objx)
else if (document.all)
return document.all[objx]
}
var start=0;
image = new Array(); //--->array aanmaken voor de foto's
<?PHP
$url = "image/studio";
$dir = opendir($url);
// Haal de gegevens uit dir
$count = 1;
while (false !== ($file = readdir($dir))) {
if (($file !== ".") and ($file !== "..")) {
list($filename, $ext) = explode(".", $file);
if ($ext == "jpg" or $ext == "png" or $ext == "gif") {
echo 'image['.$count.'] = new Array ("image/studio/'.$file.'", "test = '.$count.'");';
$count++;
}
}
}
?>
function show(slide){
if (slide == 'false')
{
start++;
if (start > image.length)
{
start = 1;
}
getobject("pic").width='520';
getobject("pic").height='346';
getobject("pic").src = image[start][0];
getobject("kopschrift").innerHTML = image[start][1];
}
else
{
start--;
if (start < 1)
{
start = 6;
}
getobject("pic").width='520';
getobject("pic").height='346';
getobject("pic").src = image[start][0];
getobject("kopschrift").innerHTML = image[start][1];
}
}
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try {
xmlhttp=new XMLHttpRequest();
} catch(e) {
try {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e1) {
xmlhttp=false;
}
}
}
return xmlhttp;
}
function link(strURL) {
var req = getXMLHTTP(); // fuction to get xmlhttp object
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) { //data is retrieved from server
if (req.status == 200) { // which reprents ok status
document.getElementById('id').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n");
}
}
}
req.open("GET", strURL, true); //open url using get method
req.send(null);
}
}
function toggle(id,x,y)
{
// ---- hoogte en breedte
var ie=document.all && !window.opera //
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var x =(ie)? iebody.clientWidth : window.innerWidth // ----scherm breedte
var y=(ie)? iebody.clientHeight : window.innerHeight // ----scherm hoogte
x
var obj = document.getElementById(id);
if(obj.style.visibility == 'visible')
{
toggleObject(obj, true,x-3,y-3);
}else{
toggleObject(obj, false,x-3,y-3);
}
}
var inc = 10;
function toggleObject(obj,close,x,y)
{
var w, h, go;
w = parseInt(obj.style.width);
h = parseInt(obj.style.height);
go = false;
if(close === false)
{
obj.style.visibility = 'visible';
if(w < x)
{
obj.style.width = w + inc + 'px';
go = true;
}
if(h < y)
{
obj.style.height = h + inc + 'px';
go = true;
}
if( x == w)
{
link('test5.php');
}
}else{
obj.innerHTML = "";
if(w > 0)
{
obj.style.width = w - inc + 'px';
go = true;
}
if(h > 0)
{
obj.style.height = h - inc + 'px';
go = true;
}
}
if(go === true)
{
var f = function(){ toggleObject(obj, close,x,y); }
setTimeout(f, 5);
}else{
if(close === true)
{
obj.style.visibility = 'hidden';
}
}
}
</script>
</HEAD>
<BODY>
<h1>Div sturen leren</h1>
<form id="form" >
<input id="x" type="text" value= "test">
<input type="button" value="Show DIV" onclick="toggle('id','600','150');">
</form>
<div class="div" style="position: absolute; visibility: hidden; background-color: black; width: 0px; height: 0px; z-index: 1; left: 0px; top: 0px;" id="id">
</div>
<p>jfsakf;ajsf;jg;asf</p>
<p> </p>
<p>asdfhgasfgkasdv.sdv.c.sahgdlfglasdgfk;sdsfc;afh;oaysf;ysifkbv.xzc .nlxnofglwclxflsf</p>
</BODY>
</HTML>
