Jump to content

Total Newbie At It Again: Image Swapping And Preloading...


swirlingDervish

Recommended Posts

I suspect that the answer to my problem lies in the length of time to preload, but since I'm working locally and not testing online, I'm a little irked by not getting this to work! I'm trying to replace and load images into a <div> -then I tried an image object but both were nil- from thumbnail buttons on the side. I think I have the syntax down (as always, might be wrong ;)): <!-- function openImages (chc){ image01= new Image(400, 325) image01.src="/images/3rdSet/Copy of pic1.jpg"; image02= new Image(400, 325) image02.src="/images/3rdSet/Copy of pic2.jpg"; image03= new Image(400, 325) image03.src="/images/3rdSet/Copy of pic3.jpg"; image04= new Image(400, 325) image04.src="/images/3rdSet/Copy of pic4.jpg"; image05= new Image(400, 325) image05.src="/images/3rdSet/Copy of pic5.jpg"; if (document.images) { document.getElementById("bevel").src=chc.src;}};// --></script><body> <td><a href="#" onClick="openImages("image01");"><img src="/images/thumbs/pic1thm.jpg" border-width="3" width="50" height="35"></a></td> </body> So my javascript button's not working. Did note unexpected token in the debugger for Chrome, but no such clarity as to what the token is! Help!

Link to comment
Share on other sites

i'm really not sure what you're trying to with openImages(). I get you are loading a bunch of images, but all you are doing is

  1. passing a string to it "image01"
  2. loading a bunch of image paths
  3. checking for a document.images property, which will always be true since you have an image on the page (not sure if you were trying to use it as some sort of pre-loaded images check or whatnot)
  4. and then trying to use the string you passed into the function as an object, by trying to assign its (non-existant) src preoprty to the src of an element called bevel.

So, I'm not sure how you are trying to tie in the image you are loading into some sort of functionality on the page. the error you are probably getting is from here:

onClick="openImages("image01");"

the quotes before image are closing the quotes from before openImages. you should use single quotes around the text image01

Link to comment
Share on other sites

The only way i see this working is to set the creation of new image out side of the function

image01= new Image(400, 325)image01.src="/images/3rdSet/Copy of pic1.jpg";image02= new Image(400, 325)image02.src="/images/3rdSet/Copy of pic2.jpg";image03= new Image(400, 325)image03.src="/images/3rdSet/Copy of pic3.jpg";image04= new Image(400, 325)image04.src="/images/3rdSet/Copy of pic4.jpg";image05= new Image(400, 325)image05.src="/images/3rdSet/Copy of pic5.jpg"; function openImages (chc){if (document.images) {document.getElementById("bevel").src=chc.src;} }; 

and instead of using quoted text, use the actual image object name

<img src="/images/3rdSet/Copy of pic1.jpg" id="bevel"><table width="100%" border="1" cellspacing="0" cellpadding="0">  <tr><td><a href="#" onclick="openImages(image01);"><img src="/images/thumbs/pic1thm.jpg" border-width="3" width="50" height="35"></a></td><tr>   <tr><td><a href="#" onclick="openImages(image02);"><img src="/images/thumbs/pic2thm.jpg" border-width="3" width="50" height="35"></a></td><tr>  <tr><td><a href="#" onclick="openImages(image03);"><img src="/images/thumbs/pic3thm.jpg" border-width="3" width="50" height="35"></a></td><tr></table>

Link to comment
Share on other sites

The only other way you would be able to use the original code would be to use the evil eval() method

function openImages (chc){if (document.images) { image01= new Image(400, 325)image01.src="/images/3rdSet/Copy of pic1.jpg";image02= new Image(400, 325)image02.src="/images/3rdSet/Copy of pic2.jpg";image03= new Image(400, 325)image03.src="/images/3rdSet/Copy of pic3.jpg";image04= new Image(400, 325)image04.src="/images/3rdSet/Copy of pic4.jpg";image05= new Image(400, 325)image05.src="/images/3rdSet/Copy of pic5.jpg";imgsrc=eval(chc+".src");document.getElementById("bevel").src=imgsrc;}};

with

<img src="/images/3rdSet/Copy of pic1.jpg" id="bevel"><table width="100%" border="1" cellspacing="0" cellpadding="0">  <tr><td><a href="#" onclick="openImages('image01');"><img src="/images/thumbs/pic1thm.jpg" border-width="3" width="50" height="35"></a></td><tr>   <tr><td><a href="#" onclick="openImages('image02');"><img src="/images/thumbs/pic2thm.jpg" border-width="3" width="50" height="35"></a></td><tr>  <tr><td><a href="#" onclick="openImages('image03');"><img src="/images/thumbs/pic3thm.jpg" border-width="3" width="50" height="35"></a></td><tr></table>

Link to comment
Share on other sites

Hi, Been tryiing the evil eval (oh, just drag me to... ;) )...I'm almost there but since I'm working locally, I'm a little surprised the file didn't open, showing dead pic link. I'm also trying to build a function to call any number of photos pushed to an array. Can I use try() and catch() to step through my code, or should I use something else...?

Link to comment
Share on other sites

A try..catch block is used to handle errors so that they don't stop the entire thing. Those aren't used for stepping through code. If you want to step through your code then you need to open your browser's developer console and set breakpoints in your code.

Link to comment
Share on other sites

Well, it worked for a while, anyway! :glare: I'm back to receiving the "undefined" functions and "unexpected token" errors listed by Chrome's debugger and no apparent syntax or function feature I can fix and one interesting "unexpected end of input" error that I'm really perplexed by...Maybe a link would help: www.siddhicenter.org/test1/starSite2/test2/ShivTantraMeditationGall.htm...again, help!

Link to comment
Share on other sites

It was throwing an error about the div because of the missing quote, the call of the function was referencing <body text="#FFFFFF" onLoad="MM_preloadImages('/images/logo2.png')><div id=" then because the closing angled bracket for body is within the function call, it used the next available which was 'logo">' which is the end part of the div element, that why if you look at the source code the body and div are mixed together, as in

<body text="#FFFFFF" logo"="" onload="MM_preloadImages('/images/logo2.png')> <div id=">

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...