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[i].split("^")[0];
var imageAlt = imageArray[i].split("^")[1];
var imageW = imageArray[i].split("^")[2];
var imageH = imageArray[i].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]

SPG wrote:

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[i].split("^")[0];
var imageAlt = imageArray[i].split("^")[1];
var imageW = imageArray[i].split("^")[2];
var imageH = imageArray[i].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.node VAlue = imagAlt;

Assuming you have something like:
<div id="CAPTION">..</div>
}
</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?

[SPG]

Hi Randy,

Thanks for this...
All seems to work fine except for

"Randy Webb" <Hi************@aol.com> wrote in message
news:l6********************@comcast.com...

SPG wrote:

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[i].split("^")[0];
var imageAlt = imageArray[i].split("^")[1];
var imageW = imageArray[i].split("^")[2];
var imageH = imageArray[i].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.node VAlue = imagAlt;

Assuming you have something like:
<div id="CAPTION">..</div>

}
</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?

[SPG]

Hi Randy,

Thanks for this, All seems to work fine except for this...

document.getElementByID('CAPTION').firstChild.node Value = imagAlt;

The "CAPTION" element is buried inside a teble cell like so..

.....some html....
<td colspan=2 ID="CAPTION_CELL"><DIV ID="CAPTION">&nbsp;<DIV></td>
....some more!...

Not a show stopper if I cannot make that bit work, but would be nice!

Steve
"Randy Webb" <Hi************@aol.com> wrote in message
news:l6********************@comcast.com...

SPG wrote:

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[i].split("^")[0];
var imageAlt = imageArray[i].split("^")[1];
var imageW = imageArray[i].split("^")[2];
var imageH = imageArray[i].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.node VAlue = imagAlt;

Assuming you have something like:
<div id="CAPTION">..</div>

}
</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?

[Randy Webb]

SPG wrote:

Hi Randy,

Thanks for this, All seems to work fine except for this...

document.getElementByID('CAPTION').firstChild.node Value = imagAlt;

The "CAPTION" element is buried inside a teble cell like so..

.....some html....
<td colspan=2 ID="CAPTION_CELL"><DIV ID="CAPTION">&nbsp;<DIV></td>
....some more!...

Not a show stopper if I cannot make that bit work, but would be nice!

document.getElementByID('CAPTION').innerHTML = imageAlt;

But it should have complained that imagAlt was undefined since I made a
typo in replying to you. Read the Group FAQ, DynWrite specifically, on
changing the contents of a DIV tag. Also read my signature (along with
the FAQ) with regards to top-posting.
--
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?

[SPG]

"Randy Webb" <Hi************@aol.com> wrote in message
news:O-********************@comcast.com...

SPG wrote:

Hi Randy,

Thanks for this, All seems to work fine except for this...

document.getElementByID('CAPTION').firstChild.node Value = imagAlt;

The "CAPTION" element is buried inside a teble cell like so..

.....some html....
<td colspan=2 ID="CAPTION_CELL"><DIV ID="CAPTION">&nbsp;<DIV></td>
....some more!...

Not a show stopper if I cannot make that bit work, but would be nice!

document.getElementByID('CAPTION').innerHTML = imageAlt;

But it should have complained that imagAlt was undefined since I made a
typo in replying to you. Read the Group FAQ, DynWrite specifically, on
changing the contents of a DIV tag. Also read my signature (along with the
FAQ) with regards to top-posting.
--
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?

Hi Randy

Thanks for that.. it works of course. (I managed the typo myself previously)
As for top-posting.. My apologies. Wrists are slapped!

Thanks for the help!

Steve

[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[i].split("^")[0];
var imageAlt = imageArray[i].split("^")[1];
var imageW = imageArray[i].split("^")[2];
var imageH = imageArray[i].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[i].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...

--
Fred