dynamically change an image - cross browser

[SPG]

Hi,

I wrote a little bit of script that loads an image from a thumbnail when the
thumbnail is clicked.
It is not very clever, and I have found it only works in IE..

could someone have a look at the script below and suggest how I can make it
work in netscape too?

Steve

PS: very new to js!!

<script language="JavaScript">
var imagePos = -1;
var imageStr = "<?=writeImageArray() ?>"; //Assume this is loaded with a
string of image names separated by |
var imageArray = imageStr.split("|");

function loadPreviousImage(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.length -1;
}
loadImage(imagePos);
}
function loadNextImage(){
imagePos++;
if( imagePos >= imageArray.length){
imagePos = 0;
}
loadImage(imagePos);
}
function loadImage(i){
document.all("IMAGEHOLDER").style.visibility = "hidden";
if( imageArray.length==0){
return;
}
imagePos = i;
var imagePath = imageArray.split("^")[0];
var imageAlt = imageArray.split("^")[1];
var imageW = imageArray.split("^")[2];
var imageH = imageArray.split("^")[3];
document.all("IMAGEHOLDER").src = imagePath;
document.all("IMAGEHOLDER").alt = imageAlt;
document.all("IMAGEHOLDER").width = imageW;
document.all("IMAGEHOLDER").height = imageH;
document.all("IMAGEHOLDER").style.visibility = "visible";
document.all("CAPTION").firstChild.nodeValue = imageAlt;
}
</script>

 

[Randy Webb]

Hi,

I wrote a little bit of script that loads an image from a thumbnail when the
thumbnail is clicked.
It is not very clever, and I have found it only works in IE..

could someone have a look at the script below and suggest how I can make it
work in netscape too?

Stop writing IE proprietary code would be a start.

Steve

PS: very new to js!!

<script language="JavaScript">
var imagePos = -1;
var imageStr = "<?=writeImageArray() ?>"; //Assume this is loaded with a
string of image names separated by |

ummm, ok.
Instead of having the browser split it, why not have PHP generate the
appropriate JS code?

var imageArray = imageStr.split("|");

function loadPreviousImage(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.length -1;
}
loadImage(imagePos);
}
function loadNextImage(){
imagePos++;
if( imagePos >= imageArray.length){
imagePos = 0;
}
loadImage(imagePos);
}
function loadImage(i){
document.all("IMAGEHOLDER").style.visibility = "hidden";

document.all is an MSIE only (within limits) code practice.

document.images['IMAGEHOLDER'].style.visibility = "hidden";

assuming you have the style attribute on an img tag with name="IMAGEHOLDER"

if( imageArray.length==0){
return;
}
imagePos = i;
var imagePath = imageArray.split("^")[0];
var imageAlt = imageArray.split("^")[1];
var imageW = imageArray.split("^")[2];
var imageH = imageArray.split("^")[3];
document.all("IMAGEHOLDER").src = imagePath;

document.images['IMAGEHOLDER'].src = imgPath

document.all("IMAGEHOLDER").alt = imageAlt;
document.images['IMAGEHOLDER'].alt=imageAlt;

document.all("IMAGEHOLDER").width = imageW;
document.images['IMAGEHOLDER'].width=imageW;

document.all("IMAGEHOLDER").height = imageH;

document.images['IMAGEHOLDER'].height = imageH;

document.all("IMAGEHOLDER").style.visibility = "visible";

document.images['IMAGEHOLDER'].style.visibility = "visible";

document.all("CAPTION").firstChild.nodeValue = imageAlt;

document.getElementByID('CAPTION').firstChild.nodeVAlue = imagAlt;

Assuming you have something like:

}
</script>

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

 

[Fred Oz]

SPG wrote:
[...]

}
function loadImage(i){
document.all("IMAGEHOLDER").style.visibility = "hidden";
if( imageArray.length==0){
return;
}
imagePos = i;

Without prejudice to anything Randy posted, I think the
following can be tidied up thusly:

var imagePath = imageArray.split("^")[0];
var imageAlt = imageArray.split("^")[1];
var imageW = imageArray.split("^")[2];
var imageH = imageArray.split("^")[3];
document.all("IMAGEHOLDER").src = imagePath;
document.all("IMAGEHOLDER").alt = imageAlt;
document.all("IMAGEHOLDER").width = imageW;
document.all("IMAGEHOLDER").height = imageH;
document.all("IMAGEHOLDER").style.visibility = "visible";

var imgA = imageArray.split("^");
var iHolder = document.images['IMAGEHOLDER'];

iHolder.src = imgA[0];
iHolder.alt = imgA[1];
iHolder.width = imgA[2];
iHolder.height = imgA[3];
iHolder.style.visibility = "visible";


That's gotta save a few clock cycles...