Custom Banner Using Random Images and Graphic Overlay?

[SamirDarji]

I got this idea when I saw the random images at the top of www.dgrin.com and started seeing the dhtml/ajax popups that sites are now using.

Since it is possible to overlay graphics on top graphics with transparency, how hard would it be to overlay a graphic onto a series of images like at the top of www.dgrin.com ? Since you can use some sort of transparancy, you would have a completely dynamic banner that changes constantly.

This is what I'm set out to do, but I have no real experience in coding. I can figure out syntax and methods/functions and how to implement things, but I need almost an exact example for me to be able to reverse-engineer it and then use it for my purposes.

I've built a vbadvanced module which is basically just a table with the images just like www.dgrin.com. Now I need to figure out how to overlay my graphic over the table.

Any assistance or guidance appreciated.

[SamirDarji]

No one has any idea on how to do this?

[Brother Malachi]

Have you looked on dynamicdrive website? They might have something like this for you.
Actually, this isn't that hard using php. One way you can do it is using a php script that loads a random image. You make a directory and put all your images in there including the php script. Then you insert the php file as an image (ie <img src="/randomImages/random.php">) and it will load a random image for you each time. This makes it server side (doesn't rely on javascript) and you don't have to modify any vb php files. Below is the script.

PHP Code:

<?php
$folder = '.';

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

$img = null;

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

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $imgType[ 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( $imgType[ 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: '.$imgType[ $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);
    }
}
?>

[SamirDarji]

The random file part I've already coded, but the code you've posted is interesting as I've been interested in writing a script for another purpose that returns not only the image, but a clickable image that can go to a link.

The hard part about this project is I don't know how to do an overlay of a graphic over the resulting table of graphics, which I've already got working. I've read enough to know it can be done with CSS and two divs, one overlaying on the other, but I don't know how to do that.

[Brother Malachi]

Originally Posted by SamirDarji

The random file part I've already coded, but the code you've posted is interesting as I've been interested in writing a script for another purpose that returns not only the image, but a clickable image that can go to a link.

The hard part about this project is I don't know how to do an overlay of a graphic over the resulting table of graphics, which I've already got working. I've read enough to know it can be done with CSS and two divs, one overlaying on the other, but I don't know how to do that.

I'm confused...you can't return a clickable image using the php script.

[SamirDarji]

Originally Posted by Brother Malachi

I'm confused...you can't return a clickable image using the php script.

That's true, you can't. But the script returns an image, which I didn't know how to do before. I can use that for another project I wanted to work on.