HTML goodies – Unix antiperfect explained

Colors for websites:

Overview of special characters for HTML and others

Jump to another page

In the header, before anything else is send to output
<meta http-equiv=”REFRESH” content=”0;URL=/index.html”>
The number in content is the number of seconds to wait before the redirect page is loaded.
Anywhere else on a webpage, using javascript
<script language=”javascript”>window.location=”index.html”;</script>

CSS (Cascading Style Sheets)

Use a browser like Chromium to see what style is used for the things you see and in which style-sheet it is located (Inspect Element)

#<someid>

Style applied to a id, e.g. <div id=<someid> >
.<someclass>: Style applied to a class, e.g. <div class=<someclass> >
*: Style applied to all tags

Image Maps

Define clickable areas in an image. Very well described in http://www.yourhtmlsource.com/images/imagemaps.html.

The html for the image will look like:

<img src="img/image1.jpg" usemap="#mapname" ismap="ismap">

The map will look like:
<map name="mapname"> <area shape="rect" coords="0,51,254,226" href="/wheretogoto1" /> <area shape="circle" coords="257,51,22" href="/wheretogoto2" /> <area shape="poly" coords="119,154,100,154,97,166,109,176" href="/wheretogoto3" /> </map>

rect: Coordinates of top-left and bottom-right corner.
circle: Coordinates of center and radius.
poly: Coordinates of all corners of the shape.

In the Gimp there is a great plugin by Maurits Rijk to generate image maps (Filters – Web – Image Map…)

Background picture, not moving with content (not tested yet)

CSS:
BODY { background: url(/images/mybackground.gif) fixed }
or in the page:

Rotating pictures

In the head section define functions for each picture, calling the next picture

<head>

<title>Untitled Document</title>

img2 = new Image()

seconds = “3.5”;

function imgOne() {
document.myimg.src = ‘http://www.antiperfect.org/images/image1.jpg’;
setTimeout(“imgTwo()”, seconds * 1000);

}
function imgTwo() {
document.myimg.src = ‘http://www.antiperfect.org/images/image2.jpg’;
setTimeout(“imgThree()”, seconds * 1000);
}

function imgThree() {
document.myimg.src = ‘http://www.antiperfect.org/images/image3.jpg’;
setTimeout(“imgOne()”, seconds * 1000);

}

</script>
</head>

Then in the body section load the first function and assign the correct name to the image

<body onLoad="imgOne();">

Or, (not tested yet)

<?php

/*

	AUTOMATIC IMAGE ROTATOR
	Version 2.2 - December 4, 2003
	Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
	All Rights Reserved.

	http://www.hiveware.com/imagerotator.php

	http://www.automaticlabs.com/

	DISCLAIMER
	Automatic, Ltd. makes no representations or warranties about
	the suitability of the software, either express or
	implied, including but not limited to the implied
	warranties of merchantability, fitness for a particular
	purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
	shall not be liable for any damages suffered by licensee
	as a result of using, modifying or distributing this
	software or its derivatives.

	ABOUT
	This PHP script will randomly select an image file from a
	folder of images on your webserver.  You can then link to it
	as you would any standard image file and you'll see a random
	image each time you reload.

	When you want to add or remove images from the rotation-pool,
	just add or remove them from the image rotation folder.

	VERSION CHANGES
	Version 1.0
		- Release version

	Version 1.5
		- Tweaked a few boring bugs

	Version 2.0
		- Complete rewrite from the ground-up
		- Made it clearer where to make modifications
		- Made it easier to specify/change the rotation-folder
		- Made it easier to specify/change supported image types
		- Wrote better instructions and info (you're them reading now)
		- Significant speed improvements
		- More error checking
		- Cleaner code (albeit more PHP-specific)
		- Better/faster random number generation and file-type parsing
		- Added a feature where the image to display can be specified
		- Added a cool feature where, if an error occurs (such as no
		  images being found in the specified folder) *and* you're
		  lucky enough to have the GD libraries compiled into PHP on
		  your webserver, we generate a replacement "error image" on
		  the fly.

    Version 2.1
        - Updated a potential security flaw when value-matching
          filenames

    Version 2.2
        - Updated a few more potential security issues
        - Optimized the code a bit.
        - Expanded the doc for adding new mime/image types.

        Thanks to faithful ALA reader Justin Greer for
        lots of good tips and solid code contribution!

	INSTRUCTIONS
	1. Modify the $folder setting in the configuration section below.
	2. Add image types if needed (most users can ignore that part).
	3. Upload this file (rotate.php) to your webserver.  I recommend
	   uploading it to the same folder as your images.
	4. Link to the file as you would any normal image file, like this:

			<img src="http://example.com/rotate.php">

	5. You can also specify the image to display like this:

			<img src="http://example.com/rotate.php?img=gorilla.jpg">

		This would specify that an image named "gorilla.jpg" located
		in the image-rotation folder should be displayed.

	That's it, you're done.

*/

/* ------------------------- CONFIGURATION -----------------------

	Set $folder to the full path to the location of your images.
	For example: $folder = '/user/me/example.com/images/';
	If the rotate.php file will be in the same folder as your
	images then you should leave it set to $folder = '.';

*/

	$folder = '.';

/*

	Most users can safely ignore this part.  If you're a programmer,
	keep reading, if not, you're done.  Go get some coffee.

    If you'd like to enable additional image types other than
	gif, jpg, and png, add a duplicate line to the section below
	for the new image type.

	Add the new file-type, single-quoted, inside brackets.

	Add the mime-type to be sent to the browser, also single-quoted,
	after the equal sign.

	For example:

	PDF Files:

		$extList['pdf'] = 'application/pdf';

    CSS Files:

        $extList['css'] = 'text/css';

    You can even serve up random HTML files:

	    $extList['html'] = 'text/html';
	    $extList['htm'] = 'text/html';

    Just be sure your mime-type definition is correct!

*/

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';

// You don't need to edit anything after this point.

// --------------------- END CONFIGURATION -----------------------

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

?>

Colors for websites:

Jump to another page

CSS (Cascading Style Sheets)

Image Maps

Background picture, not moving with content (not tested yet)

Leave a Reply Cancel reply