Submit Your Article Forum Rules

Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: image change behind navigation when page reloads? how?

  1. #1

    image change behind navigation when page reloads? how?

    i would like to duplicate this sites home page:
    http://www.sukshuglie.com/ i do not see the answer in the source...each time you visit the site or reload the page a new image is displayed behind the navigation..
    I want the image to change along with the accomanying background color(s).
    i do not want the whole background to be a tiled changing image, just the main image and colors.....thank you!!
    rebekah lyn schiller
    Hidden Content

  2. #2
    Senior Member MuNKyonline's Avatar
    Join Date
    Jun 2004
    Posts
    762
    It's in the ASP server-side script. I thought it might be javascript changing the css or something but unfortunately it's not. You could ask the design company how they did it. Is there anyone else here who knows a way of doing this?

  3. #3
    Senior Member ADAM Web Design's Avatar
    Join Date
    Dec 2003
    Posts
    2,100
    I haven't done it this exact way myself, but I have done something very similar to it on a website I worked on 3 years ago (hence the reason the HTML code isn't the greatest):
    Code:
    <%
    Randomize
    Dim RandomPic
    RandomPic = CInt (rnd * 3) + 1
    if RandomPic < 1 then
    	RandomPic = 1
    end if
    if RandomPic > 3 then
    	RandomPic = 3
    end if
    Response.Write "<TR>"
    Response.Write "<TD COLSPAN=3>[img][/img]</TD>"
    Response.Write "</TR>"
    %>
    To see the code in action, click here and refresh the page a few times. It should rotate between 3 backgrounds.

  4. #4
    WebProWorld MVP
    Join Date
    Aug 2003
    Posts
    1,021
    You can use PHP to dynamically generate a style sheet to control just the elements you need to colour. You can probably use ASP but I'm not an ASP person.

    There's a couple of articles at http://codewalkers.com/tutorials/75/1.html and http://www.barelyfitz.com/projects/csscolor/ which show style sheet generation with PHP.

    In your normal style sheet you have the default definition e.g.:
    Code:
    .random {
        width: 300px;
        height: 300px;
    }
    Then after you've included the default style sheet include the dynamic one with:
    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="style.php" />
    The style.php is:
    Code:
    <?php
    header("Content-type: text/css");
    switch(rand(0, 2)) {
    case 0:
    ?>
    .random { background-color: #f00; }
    <?php
        break;
    case 1:
    ?>
    .random { background-color: #0f0; }
    <?php
        break;
    case 2:
    ?>
    .random { background-color: #0f0; }
    <?php
        break;
    }
    ?>
    Then in the HTML simply assign the .random class to the element to style randomly. I've only changed the background colour but you can change any property and also change many classes at once with this method.

    If you use this method don't put all your styles in the PHP, only put what you have to as the PHP style sheet won't be cached by the browser.

    If you don't have server side scripting support then you can use JavaScript to change the styling on elements, if you do this you need to ensure that the default style looks reasonable for people who run with JavaScript disabled.

  5. #5
    wow..thanks guys...i am neither a php or an asp person....not even sure what they are, though am aware of their existence....i guess it's not a simple thing to duplicate this pages dynamic...? i don't really understand how to implement either of the responses...I'm a noob of sorts and that stuff just flew over my little head....i use css, simple java scripts and can create simple flash animations, but just am not sure how to procedd witht the answers that you all have given me....can your replies be "dumbed" down a bit for this thick head of mine??
    thks....
    rebekah lyn schiller
    Hidden Content

  6. #6
    Senior Member ADAM Web Design's Avatar
    Join Date
    Dec 2003
    Posts
    2,100
    ASP and PHP are server-side programming languages. This means that, unlike a client-side language such as HTML or Javascript, the code that generates the final output isn't accessible via viewing the source. All of it is processed on the server, and then outputted to the browser via a client-side language.

    In other words, you use ASP and PHP in conjunction with HTML, CSS, and/or Javascript to create a dynamic page.

    What you need to do from here is figure out which server-side languages (if any) your host supports. From there, you need to learn the language(s) supported.

  7. #7
    WebProWorld MVP
    Join Date
    Aug 2003
    Posts
    1,021
    If we assume your server can support PHP then upload the style.php from my last post, if you then access that file from the browser you will see a style sheet with 1 class in it called .random. If you keep refreshing then you will see that the background colour changes, there are 3 possible colours.

    To actually use the style sheet add:
    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="style.php" />
    To the head area of normal web page, then locate the element that you want to apply the style to, so for example if it's a table cell <td> you would edit the <td> to be <td class="random">

    Now each time you refresh the page the style sheet should be reloaded and the table cell should change colour to one of the 3 possibilities.

    In the PHP where you have:
    Code:
    ?>
    .random { background-color: #f00; }
    <?php
    you can add more CSS styles before and after the line holding .random, you will need to add the additional styles in all 3 positions within the PHP.

    I hope that is a little clearer.

  8. #8
    thank you...it's sort of becoming clearer as I read and re-read and try to appply it to my html pages...but i must still be doing something wrong as it's not working...maybe i'll let it go for the night and try agin tomorrow...again thank you so much for your expertise...sorry for my thick head....urg...:~%
    rebekah lyn schiller
    Hidden Content

  9. #9
    WebProWorld MVP
    Join Date
    Aug 2003
    Posts
    1,021
    If it's not working then it may be because your server doesn't support PHP or ASP whichever you are using.

    If you access the style.php from a web browser do you see a style sheet i.e.
    Code:
    .random { background-color: #f00; }
    If not then either there's a typo in the script or your server doesn't support PHP.

    If your test page is on a public web server post the URL then we can have a look.

  10. #10
    Senior Member MuNKyonline's Avatar
    Join Date
    Jun 2004
    Posts
    762
    Do you mind if I have a copy of that speed? I recon that'll come in handy at some point! I've been wondering how to do something like that for a while.

Similar Threads

  1. Navigation Links on EVERY page
    By emersonworldwide in forum Search Engine Optimization Forum
    Replies: 2
    Last Post: 09-19-2007, 06:50 PM
  2. JavaScript Image Change
    By webmasterjunkie in forum Web Programming Discussion Forum
    Replies: 8
    Last Post: 07-24-2006, 09:41 AM
  3. Navigation Change from JavaScript to ?
    By incrediblehelp in forum Search Engine Optimization Forum
    Replies: 11
    Last Post: 03-21-2006, 06:09 PM
  4. Q. How can I change the background image of the Microsoft S
    By WPW_Feedbot in forum IT Discussion Forum
    Replies: 0
    Last Post: 01-21-2005, 03:01 PM
  5. making dropdown change image
    By jmdb71 in forum Web Programming Discussion Forum
    Replies: 3
    Last Post: 06-04-2004, 12:14 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •