Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help Request for Random Images

    Hello,

    I would like to include random images on the page detailed bellow. Could anyone tell me how to do it?

    Thank you

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
    .box1-services {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFF;
    	background-color: #868686;
    	text-align: center;
    	vertical-align: middle;
    	font-size: 18px;
    	text-transform: capitalize;
    }
    .box2-services {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	text-transform: capitalize;
    	color: #FFF;
    	background-color: #999;
    	text-align: center;
    	vertical-align: middle;
    }
    .box3-services {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	text-transform: capitalize;
    	background-color: #00003E;
    	text-align: center;
    	vertical-align: middle;
    	color: #FFF;
    }
    .box4-services {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	color: #FFF;
    	background-color: #CCC;
    	text-align: center;
    	vertical-align: middle;
    	text-transform: capitalize;
    }
    .contentbox-homepage {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    	background-color: #CCC;
    	text-align: center;
    	vertical-align: super;
    }
    .homepage-titlebellowlogo {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #CCC;
    	background-color: #003;
    	text-align: center;
    	vertical-align: middle;
    }
    .homepage-relevantinfo {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #CCC;
    	background-color: #003;
    }
    .tittleletters-boxeshomepage {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #FFF;
    	background-color: #666;
    	text-align: center;
    	vertical-align: middle;
    	font-weight: bold;
    }
    a:link {
    	color: #000033;
    }
    a:visited {
    	color: #003;
    }
    </style>
    </head>
    <body class="single">
    <div id="wrapper">
      <div id="header">
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
    			<tr valign="top">
    				<td><div id="logo">
    						<h1><a href="#">BusinessName.com</a></h1>
    					</div></td>
    				<td><div id="menu">
    						<ul>
    							<li class="first"><a href="#" accesskey="1" title=""><a href="homepage final.html" title="homepage" target="_self">Home</a></a></li>
    							<li><a href="#" accesskey="2" title=""><a href="About EMC.html" title="About" target="_self">About</a></a></li>
    							<li><a href="#" accesskey="3" title=""><a href="services.html" title="services" target="_self">Services</a></a></li>
    							<li><a href="#" accesskey="3" title="">Join</a></li>
    							<li><a href="#" accesskey="4" title="">Contact</a></li>
    						</ul>
    					</div></td>
    			</tr>
    		</table>
    	</div>
    	<table width="100%" border="0" cellpadding="0" cellspacing="0" id="page">
    		<tr>
    			<td id="page-bgtop"><div id="page-bgbtm">
    			  <table width="100%" border="0" cellspacing="0" cellpadding="0" id="content">
    				  <tr>
    							<td><div class="box5 box-sytle">
    							  <div class="content">
    								  <div class="bgtop">
    									<div class="bgbtm">
    									  <table width="797" height="475" border="0">
    												  <tr>
    												    <td height="240" colspan="3"><img src="images/1-BoxEMCis.jpg" alt="" name="brain" width="791" height="300" id="brain" /></td>
    											      </tr>
    										        <tr class="box1-services">
    												    <td width="268" height="32" class="tittleletters-boxeshomepage">About EMC</td>
    											      <td width="268" height="32" class="tittleletters-boxeshomepage">Services 
    </td>
    												    <td class="tittleletters-boxeshomepage">EMCQ </td>
    								        </tr>
    												  <tr class="box1">
    												    <td height="76" class="box1"><p class="box1"><a href="About EMC.html" title="About EMC" target="_self">See more</a>...</p></td>
    												    <td class="box1"><p class="box1"><span class="box1"></span><strong><a href="services.html" title="Services" target="_self">See More</a></strong>...</p></td>
    												    <td class="box1"><p class="box1"><a href="" title="EMCQ Web" target="_new">See More</a>...</p></td>
    											      </tr>
    											  </table>
    									</div>
    								</div>
    							  </div>
    								</div></td>
    				</tr>
    			  </table>
    				</div></td>
    		</tr>
    	</table>
    </div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="footer-content">
    	<tr>
    		<td class="bgtop"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    				<tr>
    					<td class="bgbtm"><div id="two-columns">
    					  <div id="column1">
    					    <h2>EMCQ Database</h2>
    						<p><a href="https://www.pe-online.org/PUBLIC/MAATWERK/EMC/index.aspx" title="EMCQ Database" target="_new">Access Database...</a>.<br />
    						</p>
    </div>
    							<div id="column2">
    								<h2 class="box1">marketing  by our members<img src="images/homepage15.jpg" alt="" name="" width="80" height="80" align="left" />  </h2>
    								<p></p>
                          </div>
    						</div></td>
    				</tr>
    			</table></td>
    	</tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="footer">
    	<tr>
    		<td valign="top"><p></p></td>
    	</tr>
    </table>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Hi,

    Could not find any code linking to pictures ? What do you like to do exactly ? Like a banner who changes every time the page is newly visited or loaded randomly, or a picture that changes randomly all the time ?

    I may have some time tomorrow and code you something. Please let me know.

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Cool

    I searched the coding forums, because the question about random images turned up a few times. There is already a shuffle() function in existence. On a google search I found it on a Dutch website . http://www.wrwrwr.org/2008/january/javascript-shuffle

    Halleluuuja

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi

    Thank you so much for your quick support offer, sorry I was not able to reply you yesterday. What I would like to do is a picture that changes randomly all the time. I know the topic has been in coding forums several times, but being honest I am more than new in all this (moreover I do not have much knowledge on all this staff) so I do not know if there is a general formula for all pages or it has to be something specific each time... In your last entrance you sent a link to a function, thank you so much...(I mean it), but how do I use it? where do I insert that in my page's code?

    Really hope you can continue helping me


    Maria
    Last edited by MariaCdH; 02-17-2012 at 01:27 PM.

  • #5
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts
    This will make use of the shuffle funciton:
    Code:
    <script type="text/javascript">
    var z = 1;
    var a = new Array("pictures/ani1.jpg", "pictures/ani2.jpg", "pictures/ani3.jpg", "pictures/ani4.jpg", "pictures/ani5.jpg");
    shuffle(a);
    
    function pp44() {
    gt45=document.getElementById("banner");
    (z === (a.length -1) ) ? z=0 : z++ ;
    
    gt45.style.background="url("+a[z]+")";
    setTimeout("pp44()",9000);
    }
    window.onload=pp44;
    
    </script>
    Next, You need to place a
    Code:
    <div id="banner"> </div>
    By the way, if you use Dreamweaver, there is something like - I can't remember how it is called now - a API you can use for inserting all kinds of JavaScripts. You may not getting this random effect but a changing banner should be possible.


  •  

    Posting Permissions

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