Results 1 to 13 of 13

Thread: HTML - random loading of selected images.

  1. #1
    Member
    Join Date
    Sep 2005
    Location
    Minehead, Somerset.
    Posts
    197
    Thanks
    0
    Thanked
    0 times in 0 posts

    HTML - random loading of selected images.

    To save going into some fancy flash design, I'm looking to load a different version of my companies websites' logo/picture each time the page is refreshed, or a new page is selected.

    Basically are are currently 4 versions...same logo same colour but a different picture on the right hand side.

    Heres a sample of the top logo picture (the photo on the right is the area that changes between each version as stated above):



    This is all 1 picture to save trying to align up 2/3 pictures on the website (which in most cases has ending up looking very messy).

    Can anyone prescribe a good code string or 2?

    Much obliged

  2. #2
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    Client side javascript or server side PHP, ASP, etc?

  3. #3
    Member
    Join Date
    Sep 2005
    Location
    Minehead, Somerset.
    Posts
    197
    Thanks
    0
    Thanked
    0 times in 0 posts
    Just vanilla Javascript or HTML - basically somthing a twonce like me can edit over time

  4. #4
    Funking Prink! Raz316's Avatar
    Join Date
    Jul 2003
    Location
    Deal, Kent, UK
    Posts
    2,978
    Thanks
    130
    Thanked
    62 times in 52 posts
    http://javascript.internet.com/misce...dom-image.html is what I mucked with a while back

  5. #5
    Flower Child stytagm's Avatar
    Join Date
    Aug 2004
    Location
    London
    Posts
    754
    Thanks
    47
    Thanked
    23 times in 18 posts
    Quote Originally Posted by Raz316
    That looks straightforward enough, but make sure you cope with people who have javascript turned off , after the bit of script that goes in the html body
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    showImage();
    //  End -->
    </script>
    make sure you insert something like the following
    Code:
    <noscript>
    <img src="/oneVersionOfYourlogo.jpg" alt="our logo" />
    </noscript>
    That way, non javascripters at least see one version of your logo, rather than none.
    They told me I was gullible ... and I believed them.

  6. #6
    Funking Prink! Raz316's Avatar
    Join Date
    Jul 2003
    Location
    Deal, Kent, UK
    Posts
    2,978
    Thanks
    130
    Thanked
    62 times in 52 posts
    thats a good point

  7. #7
    Member
    Join Date
    Sep 2005
    Location
    Minehead, Somerset.
    Posts
    197
    Thanks
    0
    Thanked
    0 times in 0 posts
    stytagm -That has kid confused me - while I see there is a point in getting a non java script logo up there, is the top bit of code needed or the bottom that you gave?

    OK I setup the original code and its working fine...that is, out of a table. As soon as I set it to be inside a table it wont display whether its on frontpage or a live webpage. Any help?

    Many thanks so far

  8. #8
    Flower Child stytagm's Avatar
    Join Date
    Aug 2004
    Location
    London
    Posts
    754
    Thanks
    47
    Thanked
    23 times in 18 posts
    Quote Originally Posted by nev_payne
    stytagm -That has kid confused me - while I see there is a point in getting a non java script logo up there, is the top bit of code needed or the bottom that you gave?
    Both
    The top bit I copied from the script that Raz316 posted, but if someone has javascript turned off, their browser will ignore the top code, resulting in no logo at all. To solve this, add the second bit of html as well (the <noscript> stuff), which will only be shown to people with javascript turned off. So you provide script and noscript, and the browser decides which to use depending on settings.

    Quote Originally Posted by nev_payne
    OK I setup the original code and its working fine...that is, out of a table. As soon as I set it to be inside a table it wont display whether its on frontpage or a live webpage. Any help?
    Don't know, any chance you could post some html, or a link so we can have a look?

    Thanks - Andrew.
    They told me I was gullible ... and I believed them.

  9. #9
    Member
    Join Date
    Sep 2005
    Location
    Minehead, Somerset.
    Posts
    197
    Thanks
    0
    Thanked
    0 times in 0 posts
    YEY!

    Its all working great except for the index.htm - it will happily display my java menu (dont through a Server Side Include), but will not display the title picture - script or no script - just the red-cross of doom. All other pages work, and the index.htm code is using the same SSI code as the other pages. The only difference is ofcourse the Index.htm file is not in a folder.

    Anyone shed some light? Big thank you so far

  10. #10
    Flower Child stytagm's Avatar
    Join Date
    Aug 2004
    Location
    London
    Posts
    754
    Thanks
    47
    Thanked
    23 times in 18 posts
    Big red cross of doom sounds like you might have got the path to the images wrong. Is the index in a different folder level to the rest of the site? Could you post a link so we can have a look?

    Failing that, open firefox (or ie) and right-click on the red cross, and click on "properties", that will tell you where the browser is looking for that image, if it's not where the image really is then either modify the path or move the image.

    Cheers - Andrew.

    Edit: I Just re-read your post and it sounds like it's definately the path. Try writing the paths to the images as (I'm guessing the details):
    Code:
    <img src="/images/logo.jpg" alt"Our Logo" />
    instead of
    Code:
    <img src="images/logo.jpg" alt"Our Logo" />
    (Note the extra slash before "images" in the path.)
    Last edited by stytagm; 29-06-2006 at 06:47 PM.
    They told me I was gullible ... and I believed them.

  11. #11
    Flower Child stytagm's Avatar
    Join Date
    Aug 2004
    Location
    London
    Posts
    754
    Thanks
    47
    Thanked
    23 times in 18 posts
    I just found a very nice website that explains relative image paths better than I could:
    http://www.communitymx.com/content/a...0AD&print=true
    They told me I was gullible ... and I believed them.

  12. #12
    Member
    Join Date
    Sep 2005
    Location
    Minehead, Somerset.
    Posts
    197
    Thanks
    0
    Thanked
    0 times in 0 posts
    Hey mate,

    Yeh the index.htm is directly placed into the root directory, the rest of the site is divided up to folders...example - search.asp is under its own directory called Search. Can't see why this would cause a problem as the top title html (through the server side include) is trying to display, but as I've said just cannot display the pictures, yet it will happily do so for every other page....very wierd.

    Heres a screenshot of the directory with index.htm preview:


    Code for the top section of the index.htm table:

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    </head>

    <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">



    <div align="center">



    <center>
    <table width="800" height="632" cellspacing="0" cellpadding="0" border="1" id="table1">
    <tr>
    <td height="142" valign="top" align="left" width="800">
    <!--webbot bot="Include" U-Include="menu/MENUTOP.html" TAG="BODY" --></td>
    </tr>
    <tr>
    <td height="32" valign="top" align="center">
    <!--webbot bot="Include" U-Include="menu/javamenu.html" TAG="BODY" --></td>
    </tr>
    <tr>
    <td height="456" valign="top" align="center">
    <o>



    <div align="center">
    and for the Server side included title bar:

    <html>

    <!-- retirement, retirement property, renting, property, landlord, retirement property, retirement homes, sheltered housing, retirement property letting, property search-->

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="en-gb">
    <title>Girlings Retirement Options Ltd - Retirement property rental specialists for UK and Spain.</title>
    <meta name="Description"
    content="Girlings Retirement Options Ltd offers a specialist nationwide service to landlords and tenants of retirement property.">
    <meta name="keywords"
    content="retirement, retirement property, property, retirement renting, retirement rentals , landlord, retirement homes, homes, sheltered housing, sheltered retirement housing, retirement property letting, property search, retirement property search">
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <base target="1">
    </head>

    <body topmargin="0" leftmargin="0">
    <SCRIPT LANGUAGE="JavaScript">
    var theImages = new Array()


    theImages[0] = '../images1/Webpics/TITLE-TOP.jpg'
    theImages[1] = '../images1/Webpics/TITLE-TOP2.jpg'
    theImages[2] = '../images1/Webpics/TITLE-TOP3.jpg'
    theImages[3] = '../images1/Webpics/TITLE-TOP4.jpg'

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()

    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));

    function showImage(){
    if(whichImage==0){
    document.write('<a href ="../index.htm"><img src="'+theImages[whichImage]+'" border=0 width=800 height=140></a>');
    }
    else if(whichImage==1){
    document.write('<a href ="../index.htm"><img src="'+theImages[whichImage]+'" border=0 width=800 height=140></a>');
    }
    else if(whichImage==2){
    document.write('<a href ="../index.htm"><img src="'+theImages[whichImage]+'" border=0 width=800 height=140></a>');
    }
    else if(whichImage==3){
    document.write('<a href ="../index.htm"><img src="'+theImages[whichImage]+'" border=0 width=800 height=140></a>');
    }
    else if(whichImage==4){
    document.write('<a href ="../index.htm"><img src="'+theImages[whichImage]+'" border=0 width=800 height=140></a>');
    }

    }

    showImage();</script>

    <noscript>
    <img src="../images1/Webpics/TITLE-TOP.jpg" alt="Girlings Retirement Options LTD." />
    </noscript>

    </body>

    </html>

  13. #13
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    All your images have ../ in front of them which means it's trying to look one level above your root folder. This presumably works on other pages as they are all one folder down. I suggest you move the Javascript to an include and get it to work out the location of the file relative to the root before adding the relevant number of ../.

    That way it will work no matter how many folders you have down from the root

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 2
    Last Post: 17-08-2004, 02:55 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
  •