JavaScript - Image Load Question

Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this:

http://piscesmike.com/Pages/recipes/onions.html

The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob!

How can I make it to where an image will load in the corner of a website?

Specifically, I have part of a template I want all people to see, however, some people either get it cut off or not shown at all because of their resolution.

Hello,

Can anyone figure out whats going on with this page and i need to finish the site by this evening? It is a wordpress site. the background image is shifting to the right on IE7 after the page loads on only the homepage. I think its the slider but im not sure

www.grapevineoutreach.org

thanks

I used DrDOS's solution from http://www.codingforums.com/showpost...17&postcount=8

and modyfied it a bit so I have 2 images, first without and 2nd with a link to other page.

It works just fine in FF but in Chrome and in IE it shows just 2nd image. On place where first image shall be it's just blank white space. I have javascript enabled in all browsers, btw.

Here's a code in head:
Code:

<script type="text/javascript">

function loadImg()

	{

	document.getElementById("loadimg").innerHTML="<img src=\"logo2.png\"";

	}
	
	
	function loadImg2()

	{

	document.getElementById("loadimg2").innerHTML="<a href=\"http://site.com\"><img src=\"logo2.png\"</a>";

	}

</script>

And here's body part:
Code:

<div class="bottleft">

<div id="loadimg"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg();",5000);</script>

  </div>
  
  <div class="bottright">
	
	<div id="loadimg2"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg2();",5000);</script>

  </div>

I'm trying to figure out this whole day but just can't see where I am making a mistake?

It must be a simple thing...

I am trying to change an image source on page load depending on the contents of a cookie:

Code:

function goVisited(cookiename,img_name,img_src) {
var visited = readCookie(cookiename);
if (visited == "1"){
//alert("visited!");
document[img_name].src=img_src;
}}

<img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18">

I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif.

It almost works, but I get a stack overflow.

How do you make an image begin to load after a certain amount of time? e.g 3 seconds.

Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide.

My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates).

Any help would be much appreciated, thanks.

HEAD: Code:

<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;width:880px;height:400px;
}

#paginate {
  position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}

#paginate .default {
  position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}

#paginate .active {
  background:url(images/imagehold_o.png);
}

/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// The functional code size is 1.39K

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe 
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 2 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe 
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
  d=Math.max(d,s<0||f<0?d:0);
  this.data[0]=d;
  this.apply();
  if (ms<this.mS){
   this.to=setTimeout(function(){oop.cng(); },10);
  }
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

BODY: Code:

<script  type="text/javascript">
/*<![CDATA[*/

function zxcFadeSlideShow(o){
 var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
 for (;z0<imgs.length;z0++){
  imgs[z0].style.position='absolute';
  imgs[z0].style.zIndex=z0>0?'0':'2';
  imgs[z0].style.left='0px';
  imgs[z0].style.top='0px';
  zxcOpacity(imgs[z0],z0>0?0:100);
  ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
 }
 if (pag){
  this.cls=['default','default active'];
  for (;z1<ary.length;z1++){
   pary[z1]=document.createElement('DIV');
   pary[z1].className=this.cls[z1>0?0:1];
   pag.appendChild(pary[z1]);
   this.addevt(pary[z1],'mouseup','page',z1);
  }
 }
 this.ary=ary;
 this.pary=pary;
 this.lstp=pary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
 this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
 this.srt=typeof(srt)=='number'?srt+this.ms:false;
 this.to=null;
 this.cnt=0;
 this.lst=ary[this.cnt];
 this.Auto(this.hold);
}

zxcFadeSlideShow.prototype={

 Next:function(cnt,goto){
  this.Pause();
  if (this.lstp){
   this.lstp.className=this.cls[0];
  }
  this.lst.obj.style.zIndex='0';
  this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
  this.lst=this.ary[cnt];
  this.lst.obj.style.zIndex='2';
  this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
  if (this.pary[cnt]){
   this.lstp=this.pary[cnt];
   this.lstp.className=this.cls[1];
  }
  this.cnt=cnt;
  if (goto&&this.srt){
   var oop=this;
   this.to=setTimeout(function(){ oop.auto(); },this.srt);

  }
 },

 page:function(nu){
  this.Next(nu,true);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 },

 Auto:function(ms){
  var oop=this;
  this.to=setTimeout(function(){ oop.auto(); },ms||500);
 },

 Pause:function(){
  clearTimeout(this.to);
 },

 auto:function(){
  this.Pause();
  var oop=this,cnt=this.cnt;
  cnt=++cnt%this.ary.length;
  this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
 }


}

S=new zxcFadeSlideShow({
 ID:'tst',              //(optional) unique ID name of the paent DIV.                   (string )
 PaginateID:'paginate', //(optional) unique ID name of the paginate DIV.                (string, default = no pagination)
 FadeDuration:1000,     //(optional) the fade duration in milli seconds.                (number, default = 1000)
 Hold:6000,             //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
 AutoStart:2000         //(optional) auto start after goto.                             (number, default = no auto start)
});

x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>

Hi
I have some Javascript on my website http://www.restoreanddesign.co.uk
The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors.

I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript.

i have bolded/coloured the lines i think is causing the problems

--------------------------------------------------------------------

Code:

<script type="text/javascript" language="JavaScript">
// JavaScript Document

var imagenumber = 4 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "images/newtopbar.jpg"

images[2] = "images/newtopbar2.jpg"

images[3] = "images/newtopbar3.jpg"

images[4] = "images/newtopbar4.jpg"

 

var image = images[rand1]
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.01
   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 && d.getElementById) x=d.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> 

Hey all,

I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help.

Here is my code for the radio buttons.

Thanks.

Code:

<tr valign="top">
	<td id="community-legal-services-logo-selection">
		<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
		<p><label for="cls-mono">
			<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
			<?php _e('Mono'); ?></label>
		</p>
		<p><label for="cls-color">
			<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
			<?php _e('Colour'); ?></label>
		</p>
		<p><label for="cls-none">
			<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
			<?php _e('None'); ?></label>
		</p>
		<p>
			<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
		</p>
		<p>
			<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
		</p>
	</td>
	<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
		<td>
			<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
		</td>
	<?php } ?>	
</tr>

Hi. I am new here.
I wanted help for a JavaScript code.
You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code.

What I want to do is to make an html page load a different background image every time it refreshes.
I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this).

I already know how to do an external file (.js) and link to it from my .html page.
Now I want the code to put in the .js file, and the code to put in the <body> of my .html file.

Please help me
Thanks

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

I know I posted this in the Javascript section, and if this is not right, I am sorry, please let me know so I can post it in the right area.

I am looking to create an image gallery on my website.

i am decent at coding, but need some help.
I am looking for a code to where I can have a gallery to every picture inside the folder. say I have 100 pictures in a folder named "pics123" on my server. Is there a way to code a gallery to where every picture in the folder will appear in the gallery without putting every image in the coding?

thanks!

Hi all,

I have set my sprite on this page http://www.kylehouston.com/portfolio.html to fade in, my problem is when the page loads the images appear and then they fade in, how can i set them to fade in without showing them first of all?

Thanks in advance

Kyle