SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed with javascript - rotating images

    Code:
    http://javascript.internet.com/miscellaneous/random-image-rotator.html
    Questions:

    1. How and where do I insert my images in this script?

    Code:
    <img src="images/PUNCHB%7E1.jpg" width="300" height="199">
    2. How do I insert
    Code:
    <BODY OnLoad="rotateImage('rImage')">
    when I already have "body unload for swap images"

    ie

    Code:
    <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('menu/omelettesov.jpg','menu/hd="images/BLACK_%7E5.gif">
    Thanks
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That body code is malformed, either you've written it wrong or posted it wrong.

    To add more than one function call to the onLoad event, just put them all in the quotes and separate them with semicolons, thusly:
    Code:
    <body onload="functionOne(); functionTwo(); functionThree();">

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would this be correct - I placed it in a table, however the script still does not work

    HTML Code:
     <td bgcolor="#FFFFFF" onLoad="rotateImage('rImage')"> <center> 
    <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg"]http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg[/url]" width=300 height=199 alt="punch bowl"> 
    </center></td>
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code of the page, that I can't get to work in when I preview it:

    HTML Code:
     <html>
    <head>
    <title>Untitled Document</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original:  Robert Bui ([email="astrogate@hotmail.com"]astrogate@hotmail.com[/email]) -->
    <!-- Web Site:  [url="http://astrogate.virtualave.net/"]http://astrogate.virtualave.net[/url] -->
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! [url="http://javascript.internet.com/"]http://javascript.internet.com[/url] -->
    <!-- Begin
    var interval = 2.5; // delay between rotating images (in seconds)
    var random_display = 1; // 0 = no, 1 = yes
    interval *= 1000;
    var image_index = 0;
    image_list = new Array();
    image_list[image_index++] = new imageItem("[url="http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg"]http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg[/url]");
    image_list[image_index++] = new imageItem("[url="http://javascript.internet.com/img/image-cycler/BUFFET.jpg"]http://javascript.internet.com/img/image-cycler/BUFFET.jpg[/url]");
    image_list[image_index++] = new imageItem("[url="http://javascript.internet.com/img/image-cycler/BUFFET&CHEF.jpg"]http://javascript.internet.com/img/image-cycler/BUFFET&CHEF.jpg[/url]");
    image_list[image_index++] = new imageItem("[url="http://javascript.internet.com/img/image-cycler/DANISH.jpg"]http://javascript.internet.com/img/image-cycler/DANISH.jpg[/url]");
    image_list[image_index++] = new imageItem("[url="http://javascript.internet.com/img/image-cycler/FRUITDISPLAY.jpg"]http://javascript.internet.com/img/image-cycler/FRUITDISPLAY.jpg[/url]");
    var number_of_image = image_list.length;
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    function generate(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
    }
    function getNextImage() {
    if (random_display) {
    image_index = generate(0, number_of_image-1);
    }
    else {
    image_index = (image_index+1) % number_of_image;
    }
    var new_image = get_ImageItemLocation(image_list[image_index]);
    return(new_image);
    }
    function rotateImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "rotateImage('"+place+"')";
    setTimeout(recur_call, interval);
    }
    //  End -->
    </script>
    <link rel="stylesheet" href="site.css" type="text/css">
    <script language="JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('menu/omelettesov.jpg','menu/homeov.jpg')" background="images/BLACK_%7E5.gif">
    <table width="100%" border="5" cellspacing="0" cellpadding="5" align="center" bordercolor="#333333" bgcolor="#FFFFFF">
      <tr>
    	<td>
    	  <table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
    		<tr> 
    		  <td width="1%" height="52">&nbsp;</td>
    		  <td width="15%" height="52">&nbsp;</td>
    		  <td width="1%" height="52">&nbsp;</td>
    		  <td width="2%" height="52">&nbsp;</td>
    		  <td width="79%" height="52"> 
    			<div align="center"> <img src="images/header2.gif" width="400" height="50"></div>
    		  </td>
    		  <td width="2%" height="52">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td rowspan="8" align="center" valign="top"> 
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','menu/homeov.jpg',1)"><img name="home" border="0" src="menu/home.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes','','menu/omelettesov.jpg',1)"><img name="omelettes" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes1','','menu/omelettesov.jpg',1)"><img name="omelettes1" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes2','','menu/omelettesov.jpg',1)"><img name="omelettes2" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes3','','menu/omelettesov.jpg',1)"><img name="omelettes3" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes4','','menu/omelettesov.jpg',1)"><img name="omelettes4" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes5','','menu/omelettesov.jpg',1)"><img name="omelettes5" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    			<div align="center"><a href="index2.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('omelettes6','','menu/omelettesov.jpg',1)"><img name="omelettes6" border="0" src="menu/omelettes.jpg" width="95" height="29"></a></div>
    		  </td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td rowspan="8" align="left" valign="top">
    			<p class="text">This is the opening paragraph for omelette chefThis 
    			  is the opening paragraph for omelette chefThis is the opening paragraph 
    			  for omelette chefThis is the opening paragraph for omelette chefThis 
    			  is the opening paragraph for omelette chefThis is the opening paragraph 
    			  for omelette chefThis is the opening paragraph for omelette chefThis 
    			  is the opening paragraph for omelette chef</p>
    			<table width="300" border="1" cellspacing="0" cellpadding="0" align="center">
    			  <tr>
    				<td bgcolor="#FFFFFF" onLoad="rotateImage('rImage')"> <center> 
    <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg"]http://javascript.internet.com/img/image-cycler/PUNCHB%7E1.jpg[/url]" width=300 height=199 alt="punch bowl">
     <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/BUFFET.jpg"]http://javascript.internet.com/img/image-cycler/BUFFET.jpg[/url]" width=300 height=199 alt="buffet"> 
     <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/BUFFET&CHEF.jpg"]http://javascript.internet.com/img/image-cycler/BUFFET&CHEF.jpg[/url]" width=300 height=199 alt="buffet&chef">
      <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/DANISH.jpg"]http://javascript.internet.com/img/image-cycler/DANISH.jpg[/url]" width=300 height=199 alt="danish"> 
      <img name="rImage" src="[url="http://javascript.internet.com/img/image-cycler/FRUITDISPLAY.jpg"]http://javascript.internet.com/img/image-cycler/FRUITDISPLAY.jpg[/url]" width=300 height=199 alt="fruit display"> 
    </center></td>
    
    			  </tr>
    			</table>
    			<p align="center">&nbsp;</p>
    			<p align="center">&nbsp;</p>
    		  </td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%" height="20">&nbsp;</td>
    		  <td width="1%" height="20">&nbsp;</td>
    		  <td width="2%" height="20">&nbsp;</td>
    		  <td width="2%" height="20">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		</tr>
    		<tr> 
    		  <td width="1%">&nbsp;</td>
    		  <td width="15%">&nbsp;</td>
    		  <td width="1%">&nbsp;</td>
    		  <td width="2%">&nbsp;</td>
    		  <td width="79%">
    			<div align="center">
    			  <table width="70%" border="1" cellspacing="0" cellpadding="2" bordercolor="#000000" bgcolor="#FFFFFF">
    				<tr>
    				  <td>
    					<table width="100%" border="1" cellspacing="0" cellpadding="2" align="center" bordercolor="#000000">
    					  <tr>
    						<td bgcolor="#990000">
    						  <div align="center" class="textwhite">Please contact 
    							Leslie, Booking Co-ordinator at:<br>
    							Main: (301) 464-4334 Fax: (301) 464-2887</div>
    						</td>
    					  </tr>
    					</table>
    				  </td>
    				</tr>
    			  </table>
    			  <br>
    			  <img src="images/cclogos.jpg" width="164" height="25"> </div>
    		  </td>
    		  <td width="2%"></td>
    		</tr>
    	  </table>
    	</td>
      </tr>
    </table>
    </body>
    </html>
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's really no such thing as 'body onload' (or an 'onload event', for that matter).
    It's actually window.onload, and it doesn't matter where you put it since it's not called until the entire page is read.
    I should qualify that by saying it does matter if you use correct JS syntax!

    A table cell doesn't have an onload handler, btw. Stick this at the bottom of either of those script blocks:
    Code:
    onload = function()
    {
    	MM_preloadImages('menu/omelettesov.jpg','menu/homeov.jpg');
    	rotateImage('rImage');
    }
    The images go here:
    Code:
    image_list[image_index++] = new imageItem("image_url");
    ...one line per. The image you're replacing is the one named 'rImage'. Should be only one HTML tag for it. Remove the 'onload' from your BODY tag.
    ::: certified wild guess :::

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot - however it's still not working

    http://www.ihost-websites.com/leslie/index4.htm

    What am I missing?
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <img name="DANISH.jpg" src="http://javascript.internet.com/img/image-cycler/04.jpg" width=120 height=90>
    <img name="rImage" src="http://javascript.internet.com/img/image-cycler/05.jpg" width=120 height=90></p>
    <p align="center">&nbsp;</p>

    That just cycles one image. Might want to do more...
    ::: certified wild guess :::


Bookmarks

Posting Permissions

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