Domain Manage

Automated changing banner

Discussion in 'Services Wanted' started by SF, Jul 14, 2010.

Thread Status:
Not open for further replies.
  1. SF

    SF (217) Well-Known Member Trusted Trader

    Joined:
    Jun 2005
    Posts:
    7,515
    Likes Received:
    57
    Hi Guys,

    I am building my own website and I am trying to figure out how to change the main picture at the top of the website so that it keeps changing every few seconds, ie keeping a fresh feel to the website.

    Can anyone help?

    Thanks
    DB
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
     
  3. EnglishTeacher

    EnglishTeacher (0) Active Member New Trader

    Joined:
    Apr 2010
    Posts:
    83
    Likes Received:
    1
    For Example Make A GIF File

    For example make a GIF file - I use SWISH Max3, but there are easier and cheaper ones out there that focus on GIFs and not other areas. Alternatively, if you are using a CMS like Joomla, there will be free components for this.

    Regards,

    Philip
     
  4. alex

    alex (17) Active Member Trusted Trader

    Joined:
    Sep 2007
    Posts:
    769
    Likes Received:
    21
    Do you mean it changes each time the page loads, or do you mean it changes in front of the person viewing the page every few seconds?

    If it is each time the page loads then I use the php include function and randomly select files. This removes the need to use JavaScript which I tend to avoid if I want it to be accessed by mobiles etc, but obviously there are JavaScript and other solutions that work fine. I do the following:

    PHP:
    <?php
    $select 
    rand(1,3);
    if (
    $select == 1)
    include(
    "url1.php");
    else if (
    $select == 2)
    include(
    "url2.php");
    else if (
    $select == 3)
    include(
    "url3.php");
    ?>
    There are probably much better ways, but hopefully this is of use.

    edit: you don't have to randomly select files either, it was just an example. You could link it to a database and bring up different banners, images etc based on the information you have on specific users, location, landing page etc.

    You could also do it like this:

    PHP:
    <?php
    $select 
    rand(1,3);
    switch (
    $select)
        {
        case 
    '1':
            include(
    "url1.php");        
            break;
            
        case 
    '2':
            include(
    "url2.php");        
            break;
        
        case 
    '3':
            include(
    "url3.php");
            break;
            
        default:
            include(
    "url1.php");
        }
    ?>
     
    Last edited: Jul 14, 2010
  5. SF

    SF (217) Well-Known Member Trusted Trader

    Joined:
    Jun 2005
    Posts:
    7,515
    Likes Received:
    57
    Hi Alex,

    Yes I am trying to get it to change even if the user stays on the home page,

    so if i want random this image what do i do

    <img src="img/strawberries.jpg" class="float_right" alt="Strawberries" />
     
  6. alex

    alex (17) Active Member Trusted Trader

    Joined:
    Sep 2007
    Posts:
    769
    Likes Received:
    21
    I don’t think I’m going to be too helpful here because I don’t have a script to hand, but if you look on Google for a JavaScript image rotator there are plenty of examples. The example I posted was for each time a page loads rather than a rotation every few seconds. I’ve just looked a few scripts on Google, but I haven’t tested them. I’ll have a look through them now. Once example I found was:

    http://www.re-vision.com/webwork/22_javascript/random-images/randomimagerotator.html
     
  7. SF

    SF (217) Well-Known Member Trusted Trader

    Joined:
    Jun 2005
    Posts:
    7,515
    Likes Received:
    57
    Hi Alex.

    ive looked in css code and found this,

    #page_header {
    height: 120px;
    background: #9ACD34 url('../img/header.jpg') top right no-repeat;
    clear: both;

    where do i put that code that you showed me?
     
  8. SF

    SF (217) Well-Known Member Trusted Trader

    Joined:
    Jun 2005
    Posts:
    7,515
    Likes Received:
    57
    what about if i sent you the index file and css could you implent it?
     
  9. alex

    alex (17) Active Member Trusted Trader

    Joined:
    Sep 2007
    Posts:
    769
    Likes Received:
    21
    Sure, I'll have a look and see what I can do.
     
  10. Aaron Clifford United Kingdom

    Aaron Clifford (62) Well-Known Member Trusted Trader

    Joined:
    Jun 2010
    Posts:
    2,236
    Likes Received:
    29
  11. nullnet

    nullnet Member

    Joined:
    Jul 2010
    Posts:
    21
    Likes Received:
    0
    STEP 1 - Insert this into the <head> section of your page. Configure the images and corresponding links

    Code:
    //specify interval between slide (in mili seconds)
    var slidespeed=3000
    
    //specify images
    var slideimages=new Array("image1.gif","image2.gif","image3.gif")
    
    //specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com")
    
    var newwindow=1 //open links in new window? 1=yes, 0=no
    
    var imageholder=new Array()
    var ie=document.all
    for (i=0;i<slideimages.length;i++){
    imageholder[i]=new Image()
    imageholder[i].src=slideimages[i]
    }
    
    function gotoshow(){
    if (newwindow)
    window.open(slidelinks[whichlink])
    else
    window.location=slidelinks[whichlink]
    }
    
    //-->
    </script>
    STEP 2 - Insert the below into the <body> section of your page

    Code:
    <a href="javascript:gotoshow()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
    
    <script language="JavaScript1.1">
    <!--
    
    var whichlink=0
    var whichimage=0
    var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
    function slideit(){
    if (!document.images) return
    if (ie) document.images.slide.filters[0].apply()
    document.images.slide.src=imageholder[whichimage].src
    if (ie) document.images.slide.filters[0].play()
    whichlink=whichimage
    whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
    setTimeout("slideit()",slidespeed+blenddelay)
    }
    slideit()
    
    //-->
    </script>
    
    <p align="center"><font face="arial" size="-2">This free script provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
    Inside the code, modify the HTML so the src property correctly points to the first image within the slide.

    Hope this helps :D
     
  12. SF

    SF (217) Well-Known Member Trusted Trader

    Joined:
    Jun 2005
    Posts:
    7,515
    Likes Received:
    57
    Thanks mate your a star cheers
     
  13. nullnet

    nullnet Member

    Joined:
    Jul 2010
    Posts:
    21
    Likes Received:
    0
  14. domainer10

    domainer10 Member

    Joined:
    Jul 2010
    Posts:
    24
    Likes Received:
    0
    you can use an xml to configure its changes
     
Thread Status:
Not open for further replies.

Share This Page