2011-08-02 19:57:57 +02:00
< ? php
$files = scandir ( " . " );
$fn = sizeof ( $files );
for ( $i = 0 ; $i < $fn ; $i ++ ) {
$link = $files [ $i ];
$imglink = explode ( " . " , $link );
$imglink = $imglink [ 0 ] . " .png " ;
2011-08-05 02:49:23 +02:00
if ( ! is_dir ( $link ) && $link != " . " && $link != " .. " && $link != " index.php " && $link [ 0 ] != '.' ) {
2011-08-02 19:57:57 +02:00
$fo = fopen ( $link , " r " );
$fr = fread ( $fo , filesize ( $link ));
fclose ( $fo );
$fr = explode ( " <title> " , $fr );
$fr = explode ( " </title> " , $fr [ 1 ]);
$title = $fr [ 0 ];
$sites .= " <a href=' " . $link . " ' style='background-image:url(img/ " . $imglink . " )'> " . $title . " </a> " ;
}
}
?>
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www.w3c.org/1999/xhtml " >
< head >
< title > Experimenting with canvas </ title >
< style type = 'text/css' >
* {
margin : 0 ;
padding : 0 ;
}
#wrapper {
width : 700 px ;
margin : 0 auto ;
}
#header {
width : 700 px ;
height : 100 px ;
margin - bottom : 5 px ;
background : #eee url(img/header.png) no-repeat;
}
#content {
width : 690 px ;
padding : 5 px 5 px 20 px 5 px ;
background : #eee;
font : 14 px arial ;
float : left ;
position : relative ;
}
#experiments {
width : 690 px ;
float : left ;
margin - bottom : 5 px ;
}
#experiments a:link, #experiments a:visited {
width : 211 px ;
height : 144 px ;
margin : 0 0 10 px 10 px ;
padding : 3 px ;
float : left ;
background : #ddd;
opacity :. 7 ;
filter : alpha ( opacity = 70 );
- moz - opacity :. 7 ;
display : block ;
color : #0000ff;
t ext - decoration : none ;
position : relative ;
z - index : 2 ;
}
#experiments a:hover {
background : #ccc;
opacity : 1 ;
filter : alpha ( opacity = 100 );
- moz - opacity : 1 ;
color : #0000aa;
}
h1 {
font : normal 24 px georgia ;
margin : 15 px 0 10 px 0 ;
}
#canvas {
position : absolute ;
right : 0 ;
bottom : 0 ;
}
#error {
display : none ;
font : 16 px arial ;
color : #ff0000
}
</ style >
< script type = 'text/javascript' >
function ani () {
if ( x == 0 ) {
x = 700
y = Math . floor ( Math . random () * 200 )
ctx . strokeStyle = " rgb( " + ( Math . floor ( Math . random () * 128 ) + 50 ) + " , " + ( Math . floor ( Math . random () * 128 ) + 50 ) + " , " + ( Math . floor ( Math . random () * 128 ) + 50 ) + " ) "
}
ctx . beginPath ()
ctx . moveTo ( x , y )
if ( x < 11 ) {
x = 0
}
else {
x -= Math . floor ( Math . random () * 10 ) + 1
do {
ny = y - ( Math . floor ( Math . random () * 11 ) - 5 )
} while ( ny < 2 || ny > 197 )
y = ny
}
ctx . lineTo ( x , y )
ctx . stroke ()
setTimeout ( " ani() " , 40 )
}
window . onload = function (){
ctx = document . getElementById ( " canvas " )
if ( ! ctx . getContext ) {
document . getElementById ( " error " ) . style . display = " block "
return
}
ctx = ctx . getContext ( " 2d " )
x = 0
ani ()
}
</ script >
</ head >
< body >
< div id = 'wrapper' >
< div id = 'header' ></ div >
< div id = 'content' >
< canvas id = 'canvas' width = '700' height = '200' ></ canvas >
A new tag has entered the realms of internet browsing : CANVAS ! With the canvas tag , people are now able to generate images in HTML ! Not all browsers support it , but they probably will at some point . The point is , I 've been experimenting a little with it, and to my delight it' s actually pretty easy to work with . If you see something in one of my experiments that you like , feel free to copy - paste . Consider it free software .
< div id = 'error' > Your browser doesn 't support use of the canvas tag. I haven' t included error detection in my experiments , so your browser is likely to show an error . Browsers that support canvas include Firefox , Opera and Safari .</ div >
< h1 > Here it is :</ h1 >
< div id = 'experiments' >
< ? php echo $sites ; ?>
</ div >
Hopefully your browser won ' t crash ..
</ div >
</ div >
</ body >
</ html >
