Main Image Banner

Discussion in 'Web Design & Coding' started by Bman, Jan 20, 2008.

  1. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    http://revision3.com/

    See the main image at the top, where you can click 1, 2, 3, 4 or just watch it change automatically.. How would I go about creating something like that. I am assuming it is flash. Should I search for a flash tutorial or got an idea?
     
  2. AllWeatherGal

    AllWeatherGal Not Just for Fair Weather Political User Folding Team

    Messages:
    253
    Location:
    SF Bay Area
    While that coulda been done in Flash very easily, looking at the source I'd say it's javascript. No idea how ... maybe check out some js idea sites.

    GL.
     
  3. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    I am going to try flash.
     
  4. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    I need help doing this. I was going to do flash but that means people might have to download and install flash and all that. I don't really want that.

    I can't seem to find a tutorial on how to do it in javascript.

    Anyone help please???!!!!
     
  5. muzikool

    muzikool Act your wage. Political User

  6. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    I am sorry, I was looking at the demos on that link and none of them do what the banner does? Unless I missed something. I am reading through the documentation right now..
     
  7. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    With regards my comments on your wamp thread. This will require you to read up and experiment with Javascript coding on your web pages to achieve. You will need to keep to specific queries. I don't want to see you asking for fully coded solutions.
     
  8. American Zombie

    American Zombie Moderator Staff Member Political User

    Messages:
    2,934
    Location:
    Seattle
  9. muzikool

    muzikool Act your wage. Political User

    You can see from the source code of the site you like that they use Javascript and all the libraries are Scriptaculous. You won't see demos of every possibility because it's up to the user to create different uses for it.
     
  10. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    Thanks for pushing me....

    With some searching, and annoyment... I found this code, well parts of it...



    <script LANGUAGE="JavaScript">
    <!-- Hide from JavaScript-Impaired Browsers
    number_of_sponsors=2;
    var sctr=0;
    var halt=0;
    var isn=new Array();
    for (i=0;i<number_of_sponsors;i++){
    isn=new Image();
    }
    isn[0].src="img/banner.png";
    isn[1].src="img/banner8.png";
    var durl=new Array();
    durl[0]="index.html";
    durl[1]="index.html";
    function rotateIt(){
    if (halt!=1){
    sctr++;
    if (sctr>number_of_sponsors-1){
    sctr=0;
    }
    document.sponsor.src=isn[sctr].src;
    setTimeout("rotateIt()",8000);
    }
    }
    function doIt(){
    halt=1;
    parent.location.href=durl[sctr];
    }
    function dispIt(){
    parent.window.status=durl[sctr];
    }
    // End Hiding -->
    </script>
    <a href="index.html" target="_blank" onClick="doIt();return false" onMouseover="dispIt();return true;"><img src="images/banner.png" width="789" height="170" NAME="sponsor" BORDER=0 NOSAVE></a>
    <script LANGUAGE="JavaScript">
    <!-- Hide JavaScript from Java-Impaired Browsers
    sctr=0;
    rotateIt();
    // End Hiding -->
    </script>



    Now that allows one image to change to another, at a set interval. Now the thing I can't seem to figure out is how to have that as my header/image. I have my header done with CSS. I don't belive you can put javascript within the .css file lol. Well that is what I read.

    I then found a way to do it with PHP, which I can't seem to get working.

    this is the PHP file...

    "

    <?php

    $folder = '.';

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

    $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);
    }
    }
    ?>

    "

    Now I put the rotate.php inside the folder of images I want to rotate. Yet it does not work, nothing happens. I was assuming you'd have to upload for real to test it, but thought wait no I am sure you don't have to. What am I doing wrong. Now I just realised that neither of these ways is the way that revision3.com is doing it. (i guess they are using javascript, but more to it then that) They have it fading into each other, and options to change it. I have searched and can't find the answer. I think my only option is to do a flash banner instead of all this and make people install flash if they don't have it.

    I will download it and play around with it and see what I can do.

    Sry for the long post...
     
  11. muzikool

    muzikool Act your wage. Political User

    You will be better off in the long-run to learn Javascript opposed to Flash, in my opinion. Javascript can do some really awesome, powerful stuff now and the libraries are very lightweight and automatically run on any browser, opposed to having to manually download and install a plugin like with Flash. Besides that, the Javascript libraries are usually free, and purchasing Flash will cost you a lot of money. Both will require time to learn -- you can't often do cool stuff like that without putting some time and effort into it.
     
  12. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    Thanks for the help. I will be trying to learn Javascript & PHP, I already know some of the language, it's just not anything advanced. And relating to LordOfLA, I guess I have become so used to just coming here and getting my answers I stopped using Google and stopped learning on my own, which is how I used to do it. In my defense a lot of the latest questions here are not so easy to find on Google, but then again I guess I didn't try that hard.

    Anyways, thanks for the help.
     
  13. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    Now you understand where I was headed with my comments. I have absolutely no problem with you or anyone asking questions. I will always help out where I can, however over recent months myself and others noticed you were asking us questions seemingly everytime you got stumped/confused and not looking things up for yourself.

    Whether or not that is the case, as soon as it seems that is what is happening, that is when there is a problem.

    If in future posts you drope a comment such as "I've looked at a, b and c and I've tried x, y and z and can't figure it out", instead of "how do I do that cool tabbed main header image" and seemingly expecting a coded sample you can modify to your needs you'll get much more help out of all of us that can :)