by martijn » 19. November 2004 20:56
Im working with frames. The frame contains two parts. When the cursor is moved over the higher part of the frame, a picture is created and continuesly recreated in the lower part of the screen. Every time the cursor is moved in the in the higher part the picture in the lower part is recreated in a littlebit different way depending on the position of the cursor in the higher part. In the higherpart of the frame a timeline is visible including with a magnifying glass which can be moved move. In the lower part a magnified, short part of the timeline should be visible.
The code for the higher part of the frame is :
(The name of the file is:'makeTimeLine')
<HTML>
<HEAD>
<TITLE>Make timeline</TITLE>
<script language="javascript" src="findDOM.js"></SCRIPT>
<script language="javascript">
var evt=null;
var isNS=0;
var xleft=30;
var pixelsPerYear=4;
var year;
var isEeersteAanroep=1;
var tel=0;
var xPosi;
var yPosi;
var linkString;
if (navigator.appName.indexOf('Netscape') !=-1) {isNS=1;}
function defaultEvents(evt) {
if (isNS) {
document.captureEvents(Event.MOUSEMOVE)
}
if (isDHTML) {
document.onmousemove=followMe;
}
}
function followMe(evt) {
if (isNS) event=evt;
domStyle=findDOM('loep',1);
if (event.pageX !=null) {
domStyle.left=event.pageX-25;
domStyle.top=event.pagey-25;
setTimeOut("year=(event.pagex-xleft)/pixelsPerYear",50);
var linkString="makeTimeLineZomed.php?year=20";
SetCookie('year',year);
parent.timeLineZomed.document.url=linkString;
return;
}
else {
domStyle.left=event.x-25;
domStyle.top=event.y-25;
if (xPosi-event.x<-1 || xPosi-event.x>1){
xleft=30;
pixelsPerYear=4;
year=(event.x-xleft)/pixelsPerYear;
linkString='makeTimeLineZomed.php?year='+year;
parent.timeLineZomed.document.location.href=linkString;
}
xPosi=event.x;
yPosi=event.y;
return;
}
}
</SCRIPT>
<STYLE type="text/css">
#loep {
position:absolute;
top:70px;
left:20px;
z-index=0;
}
#timeLine {
z-index=1;
}
body {cursor:none;}
</style>
</HEAD>
<body onload="defaultEvents(event)">
<?php
$secondsInDay=86400;
$secondsInYear=365.25*$secondsInDay;
$image=imagecreate(600,175);
$white=imagecolorallocate($image,255,255,255);
$black=imagecolorallocate($image,0,0,0);
$pixelsPerYear=4;
$relXLetter=-5;$relYLetterA=-30;$relYLetterB=18;
$xleft=30;$yleft=70;$yearMax=120;
$heightLines=5;$heightLines5=10;$heightLines10=15;
imageline($image,$xleft,$yleft,$xleft+$yearMax*$pixelsPerYear,$yleft,$black);
for ($tel=0 ;$tel<=$yearMax ;$tel++) {
$xpos=$xleft+$pixelsPerYear*$tel;
if ($tel%5 !=0) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines,$black);}
if ($tel%5 ==0 && $tel%10!==0 ) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines5,$black);}
If ($tel%10==0) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines10,$black);}
if ($tel%10==0) {
$xLetter=$xleft+$relXLetter+$pixelsPerYear*$tel;
$yLetter=$yleft+$relYLetterA;
imagestring($image,3,$xLetter,$yLetter,$tel,$black);
}
}
$maxTimes100MillionSec=floor($yearMax*$secondsInYear/100000000);
$pixelsPer100MillionSec=$pixelsPerYear*100000000/$secondsInYear;
for ($tel=0;$tel<=$maxTimes100MillionSec;$tel++){
$xpos=$xleft+$pixelsPer100MillionSec*$tel;
if ($tel%5 !=0) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines,$black);}
if ($tel%5 ==0 && $tel%10!==0 ) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines5,$black);}
If ($tel%10==0) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines10,$black);}
if ($tel%10==0) {
$xLetter=$xpos+$relXLetter;
$yLetter=$yleft+$relYLetterB;
$string=100*$tel;
imagestring($image,3,$xLetter,$yLetter,$string,$black);
}
}
imagestring($image,3,$xleft+200,$yleft-60,"Jaren/Years",$black);
imagestring($image,3,$xleft+170,$yleft+45,"miljoen/million sec",$black);
imagejpeg($image,"timeLinePicture");
?>
<div id="timeLine">
<img src="timeLinePicture">
</div>
<span id="loep">
<img src="loep.gif">
</span>
</BODY>
</HTML>
The code for the lower part of the frame is (filename:makeTimeLineZomed):
<HTML>
<HEAD>
<TITLE>Make timeline</TITLE>
</HEAD>
<BODY>
<?php
$pixelsPerMonth=6;$maxPixels=500;
$relXLetter=-5;$relYLetterA=-30;$relYLetterB=18;
$xleft=30;$yleft=70;
$heightLines=5;$heightLines5=10;$heightLines10=15;
$year=$_GET["year"];
$month=12*$year;
$secondsInDay=86400;
$secondsInYear=365.25*$secondsInDay;
$secondsInMonth=$secondsInYear/12;
$times5MilSec=$year*$secondsInYear/5000000;
Header("Content-type: image/png");
$image=imagecreate(600,175);
$white=imagecolorallocate($image,255,255,255);
$black=imagecolorallocate($image,0,0,0);
// regel 20
$pixelsPer5MilSec=$pixelsPerMonth*5000000/$secondsInMonth;
$startMonth=ceil($month-0.5*$maxPixels/$pixelsPerMonth);
if ($startMonth<0) {$startMonth=0;}
$endMonth=floor($month+0.5*$maxPixels/$pixelsPerMonth);
if ($startMonth>0) {
imageline($image,$xleft,$yleft,$xleft+$maxPixels,$yleft,$black);}
else {imageLine($image,$xleft+0.5*$maxPixels-$month*$pixelsPerMonth,$yleft,$xleft+$maxPixels,$yleft,$black);}
for ($tel=$startMonth ;$tel<=$endMonth ;$tel++) {
$xpos=$xleft+0.5*$maxPixels+$pixelsPerMonth*($tel-$month);
if ($tel%6 !=0) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines,$black);}
if ($tel%6 ==0 && $tel%12!==0 ) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines5,$black);}
If ($tel%12==0) {
imageline($image,$xpos,$yleft,$xpos,$yleft-$heightLines10,$black);}
if ($tel%12==0) {
$xLetter=$xleft+$relXLetter+0.5*$maxPixels+$pixelsPerMonth*($tel-$month);
$yLetter=$yleft+$relYLetterA;
$string=round($tel/12);
imagestring($image,3,$xLetter,$yLetter,$string,$black);
}
}
$start=ceil($secondsInMonth*($month-0.5*$maxPixels/$pixelsPerMonth)/5000000); //regel 40
if ($start<0) {$start=0;}
$end=floor($secondsInMonth*($month+0.5*$maxPixels/$pixelsPerMonth)/5000000);
for ($tel=$start;$tel<=$end;$tel++){
$xpos=$xleft+0.5*$maxPixels+$pixelsPer5MilSec*($tel-$times5MilSec);
if ($tel%2 !=0) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines,$black);}
if ($tel%2 ==0 && $tel%10!==0 ) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines5,$black);}
If ($tel%10==0) {
imageline($image,$xpos,$yleft,$xpos,$yleft+$heightLines10,$black);}
if ($tel%10==0) {
$xLetter=$xpos+$relXLetter;
$yLetter=$yleft+$relYLetterB;
$string=5*$tel;
imagestring($image,3,$xLetter,$yLetter,$string,$black);
}
}
imagestring($image,3,$xleft+200,$yleft-60,"Jaren/Years",$black);
imagestring($image,3,$xleft+170,$yleft+45,"miljoen/million sec",$black);
$im=$image;
if (function_exists("imagegif")) {
header("Content-type: image/gif");
imagegif($im);
exit;
} elseif (function_exists("imagejpeg")) {
header("Content-type: image/jpeg");
imagejpeg($im, "", 0.5);
exit;
}elseif (function_exists("imagepng")) {
// header("Content-type: image/png");
imagepng($im);
exit;
} elseif (function_exists("imagewbmp")) {
header("Content-type: image/vnd.wap.wbmp");
// imagewbmp($im);
exit;
} else {
die("No image support in this PHP server");
}
?>
</BODY>
</HTML>