JavaScript - Preload Image Script Issues For A Newbie!

Hi, there. I'm wanting to put a gif on my site that when clicked, will display a random page for the visitor to see next. The gif name is located on my site he image/nextrandombutton.gif

I have the below saved at randomlink.js and have it loaded to my site. But I can't get it to work.


<!--
/*
Random link button- By JavaScript Kit (http://javascriptkit.com)
Over 300+ free scripts!
This credit MUST stay intact for use
*/

//specify random links below. You can have as many as you want
var randomlinks=new Array()

randomlinks[0]="http://www.bigpileofdogshirts.com/vintageorangecratedogs.htm"
randomlinks[1]="http://www.bigpileofdogshirts.com/mikesibley.htm"
randomlinks[2]="http://www.bigpileofdogshirts.com/floraldreams.htm"
randomlinks[3]="http://www.bigpileofdogshirts.com/pirates.htm"
randomlinks[4]="http://www.bigpileofdogshirts.com/ilovemycartoonpupsquares-new.htm"


function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->



I've tried all four of the below, but each returns a different error message.

<a href="javascript:randomlink.js"><img src="images/nextrandombutton.gif"></a>

<a href="javascript:randomlink.()"><img src="images/nextrandombutton.gif"></a>

<a href="javascript:randomlink.js()"><img src="images/nextrandombutton.gif"></a>

<a href="javascript:randomlink.()"><img border="0" src="images/nextrandombutton.gif"></a>

Hi Everyone,

I'm trying to place some script on my website using Dreamweaver.

I have been given the script to add a review to our site from another service provider.

I get the message
"There is a syntax error on line 1..."

I am totally unfamiliar with Java and was wondering if someone could check the code for me and tell me where the problem is?

Really appreciate any help you can offer.

Many thanks
Cathal

Code:

<script type='text/javascript' language='javascript'>document.write(unescape("%3Clink rel='stylesheet' href='http://www.whatclinic.com/css/reva_reviews.css' type='text/css' media='screen' /%3E%3Cscript src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'%3E %3C/script %3E%3Cscript src='http://www.whatclinic.com/js/flXHR/flXHR.js' type='text/javascript'%3E %3C/script %3E%3Cscript src='http://www.whatclinic.com/js/external_reviews.js' type='text/javascript'%3E %3C/script %3E"));</script><script type='text/javascript' language='javascript'>document.write(unescape("%3Cdiv id='reva_reviewscoreholder' class='provider_all_Reviews'%3E%3C/div%3E%3Cscript type='text/javascript' language='javascript'%3E $(document).ready(function() {reva_showReviewScore_New(103086);});%3C/script %3E"));</script>

Hi guys,
i am trying to work with google maps api
my issue is with creating an array of markers
count the number of marker, and then if it equal two, issue an error msg.

i wrote some code, but that doesn't work obviously. and my question is how do i write that code in javascript ?
GEvent.addListener(map, 'click', function (overlay, latlng) {
if (placeMarker.length < 2) {
pendingLatLng = latlng;
setTimeout("settleClick()", 225)
}
else {
message("You can only select 2 points.");
}
});

a sample click event which looks like the line below does work. what am i doing wrong ?:
google.maps.event.addListener(map, 'click', function (event) {placeMarker(event.latLng); })

How can i go about showing on screen a count from an initial value to an end value over a set time period.
Initial value = 0
End value = 2000
Time = 25 seconds

I cant find an example of this anywhere, so I'm trying here to see if somebody can help

I need to write a script that use cookies to keep in memory the user's preferences. First, a form to collect data. I need to know the name and second name of the user and his favorite color. After that, I need to valid all the values of the form, that is to say to be sure that they're not empty and that the color is a defined color. The form will be displayed at the first visit of the user then it will greet the user with a welcome message. Moreover, the background color will match the color that the user chose. The welcome message needs to be as follow: "Hi, Name secondName, Good morning! (if time is between 6am and 12), Good afternoon! (if time is between 12 and 6pm) or Good evening! (Between 6pm and 6am).

Here's what I've done so far...
What is colored in red is what I don't know what to write.

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>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
function setCookie(firstNameCookie,nameCookie,colorCookie,valueCookie,DateExp)
{
  strName = nameCookie;
  strFirstName = firstNameCookie
  strColor = colorCookie
  strValue = valueCookie;
  dateExpiration = DateExp;

  var newCookie = strName+strFirstName+strColor+"="+ escape(strValue) +"; " + " path=/; " + "expires="+dateExpiration.toGMTString() +"; ";

  window.document.cookie=newCookie;
}

function getCookieValue(firstname,name,color)
{
  cookieFirstName = firstname;
  cookieName = name;
  cookieColor = color;

  sCookieValue = document.cookie;

  iCookieNameIndex = sCookieValue.indexOf(cookieFirstName,cookieName,cookieColor + "=");
  if (iCookieNameIndex == -1)
  {
     return (""); 
  }

  sCookieValue = sCookieValue.substring (iCookieNameIndex, sCookieValue.length);

  iCookieValueIndex = sCookieValue.indexOf("=") + 1;
  sCookieValue = sCookieValue.substring(iCookieValueIndex, sCookieValue.length);

  indexFinCookie = sCookieValue.indexOf(" ");  
  if (indexFinCookie != -1)
  {
    sCookieValue = sCookieValue.substring (0, indexFinCookie);
  }

  sCookieValue = unescape(sCookieValue);

  return sCookieValue;
}
 var valueCookieName=getValeurCookie("name");
if(valueCookieName="");
{
	
}
var valueCookieFirstName=getValeurCookie("firstname");
if(valueCookieFirstName="");
{
	
}
var valueCookieColor=getCookieValue("color");
if(valueCookieColor="");
{
	
} 
</SCRIPT>
</head>
<body>
  <form name="nameFirstName">
  <table>
    <tr>
      <td valign="top">
      First Name :
	  <input type="text" name="firstname" value="">
      </td>
      </tr>
      <tr>
	  <td valign="top">
      Name :
      <input type="text" name="name" value="">
      </td>
      </tr>
      <tr>
      <td valign="top">
      What is your favorite color? :
      </td>
      <td>
      <input name="white" type="radio" value="white">white<br>
        <input name="blue" type="radio" value="blue">blue<br>
        <input name="green" type="radio" value="green">green<br>
        <input name="red" type="radio" value="red">red<br>
        <input name="yellow" type="radio" value="yellow">yellow<br>
        <input name="purple" type="radio" value="purple">purple<br>
	  </td>
    </tr>
    <tr>
    <td>
    <input type="button" name="bouton" Value="Submit"  onClick="" >
    </td>
    </tr>
  </table>
  </form>
</body>
</html>

The second code is the part of the greeting message that shows a different greeting message depending on the time (ex.: Good morning "Firstname name", welcome to my site (if it's morning)). The tricky thing is I can't seem to figure out how to input it in the coding. Do I need to make another file and then SRC it?

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>Untitled Document</title>
<script type="text/javascript">
var now = new Date();
var hrs = now.getHours();
var msg = "";

if (hrs >  0) msg = "Mornin' Sunshine!"; // REALLY early
if (hrs >  6) msg = "Good morning";      // After 6am
if (hrs > 12) msg = "Good afternoon";    // After 12pm
if (hrs > 17) msg = "Good evening";      // After 5pm
if (hrs > 22) msg = "Go to bed!";        // After 10pm

alert(msg);
</script>
</head>
<body>
</body>
</html>

I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this?

Code:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/

{ coded = "gUivfkUiz@Vzz38CfC.3ip.Uj"
  key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else {     
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>"+link+"</a>")
}

Hi all

If I pre-cache imgs like this ... (10 in all)

Code:

<head>
<script type="text/javascript">
PreImage1= new Image(width,height);
PreImage1.src = "images/navbtn/onbtn_1.gif";
PreImage2 = new Image(width,height);
PreImage2.src = "images/navbtn/onbtn_2.gif";
PreImage3= new Image(width,height);
PreImage3.src = "images/navbtn/offbtn_1.gif";
PreImage4 = new Image(width,height);
PreImage4.src = "images/navbtn/offbtn_2.gif";
</script>

Will imgs be read from cache if I then do this?... or have I missed smthg?

Code:

<body>
<img src="images/navbtn/offbtn_1.gif" onmouseover=this.src="images/navbtn/onbtn_1.gif"  onmouseout=this.src="images/navbtn/offbtn_1.gif"  alt=""  />  	</div>

low tech

Hi!

I have a website that requires preloading images a lot.

I would like to preload only the most important images first and display the page as quickly as possible.

After that it will take at least 20 seconds before the user will need the rest of the images.

Is there a way of making two preloading groups and have the second group load in background after the page is already visible?

My current preload code is simply like this:

<SCRIPT language="JavaScript">
if (document.images)
{
pic01= new Image(200,200);
pic01.src="images/base.jpg";

pic02= new Image(200,200);
pic02.src="images/grump1.jpg";

pic03= new Image(200,200);
pic03.src="images/grump2.jpg";

pic04= new Image(200,200);
pic04.src="images/grump3.jpg";

pic05= new Image(200,200);
pic05.src="images/grump4.jpg";

pic06= new Image(200,200);
pic06.src="images/love.jpg";

pic07= new Image(200,200);
pic07.src="images/smile1.jpg";

pic08= new Image(200,200);
pic08.src="images/smile2.jpg";

pic09= new Image(200,200);
pic09.src="images/smile3.jpg";

pic10= new Image(200,200);
pic10.src="images/smile4.jpg";

pic10= new Image(200,200);
pic10.src="images/rotate.gif";

}
</SCRIPT>

Hello,

I've some javascript code which preload the images for a photo gallery made of clickable thumbnails and the images to be shown. The script is structured to preload the images in order to have a smooth experience while browsing through the thumbnails but, as the images are needed in quite high quality and can't be compressed any further, the page is too slow to load.

Basically, as the script sits between the head tags at the beginning of the page, it holds the loading of the whole page, leaving the user with a black page for a good 10 seconds on a fast connection.

Is there any chance I can preload the images in such a way I don't have to hold the whole page from displaying while the images are loaded? It would be ideal to be able to display the contents of the page (logo, menu, 1st picture of the gallery and foot of the page) while the images preload in the background.

Could please anybody help with this?

Here is the code I'm using:


<SCRIPT language=JavaScript1.1>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("images/gallery/editorial/1.jpg","images/gallery/editorial/2.jpg","images/gallery/editorial/3.jpg","images/gallery/editorial/4.jpg","images/gallery/editorial/5.jpg","images/gallery/editorial/6.jpg","images/gallery/editorial/7.jpg","images/gallery/editorial/8.jpg","images/gallery/editorial/9.jpg","images/gallery/editorial/10.jpg","images/gallery/editorial/11.jpg","images/gallery/editorial/12.jpg","images/gallery/editorial/13.jpg","images/gallery/editorial/14.jpg","images/gallery/editorial/15.jpg","images/gallery/editorial/16.jpg","images/gallery/editorial/17.jpg","images/gallery/editorial/18.jpg","images/gallery/editorial/19.jpg","images/gallery/editorial/20.jpg","images/gallery/editorial/21.jpg","images/gallery/editorial/22.jpg","images/gallery/editorial/23.jpg","images/gallery/editorial/24.jpg","images/gallery/editorial/25.jpg")
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>


and this is for the thumbnails:

<a onmousedown='changeimage(myimages[0],this.href)'><img src="images/gallery/thumb1.gif" alt="1" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[1],this.href)'><img src="images/gallery/thumb2.gif" alt="2" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[2],this.href)'><img src="images/gallery/thumb3.gif" alt="3" width="16" height="16" border="0" /></a>
<a onmousedown='changeimage(myimages[3],this.href)'><img src="images/gallery/thumb4.gif" alt="4" width="16" height="16" border="0" /><br />
</a> etc....


Any help would be much appreciated.

Thanks
paolo

Hi Everyone,

I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv".

I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either.

Can anyone help please?

Anita

Lets say I have two images in a box

Code:

<body>

<div id="box">

<img src="image1.jpg" id="image1" width="100" height="100" />
<img src="image2.jpg"  id="image2" width="100" height="100" />

</div>

</body>

When I click on Image1 I want Image2 to get replaced with a new image, called Image3.

So I tried this code:

Code:

var image1 = document.getElementById("image1");
image1.onclick = image1_click ();

function image1_click () {
	new_image= new Image
	new_image = document.getElementById("image2");
	new_image.src="image3.jpg"
}

But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load.

What should I do to make this work?
Thank you.

Hi, I am completely aware that Framesets are an outdated way of designing these days (I don't have time to redesign the site now), but I have a question:.

Is there a way I can have a "Please wait.. Loading.." message of some sort on the "contents.html" frameset? It takes a while to load..

Code:

<html>

<head>

</head>

<frameset rows="130,*" framespacing="0" border="0" frameborder="0">
	<frame name="banner" scrolling="no" noresize target="contents" src="title.html">
	<frameset cols="523,493">
		<frame name="contents" target="main" src="contents.html" scrolling="auto">
		<frame name="main" src="letters.html" scrolling="auto">
	</frameset>
	<noframes>
	<body>

	<p>This page uses frames, but your browser doesn't support them.</p>

	</body>
	</noframes>
</frameset>

</html>

Thanks so much.

Hi, I am a Javascript newbie and I am trying to add a Javascript image application (called "HighSlide JS: http://highslide.com/#examples) to eBay listings. I am somewhat experienced with HTML and computers in general, but this javascript is all very confusing to me.

My question is quite broad: How can I get this HighSlides script to show my images on my eBay listings? I am having trouble figuring out how to upload images to FTP servers or something, so that the script can use my images.

I have Windows 7, and I do have Expression Web, if that means anything!

I would be extremely grateful for any help! Thanks in advance!