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="JavaS cript">
var imagePos = -1;
var imageStr = "<?=writeImageA rray() ?>"; //Assume this is loaded with a
string of image names separated by |
var imageArray = imageStr.split( "|");

function loadPreviousIma ge(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.leng th -1;
}
loadImage(image Pos);
}
function loadNextImage() {
imagePos++;
if( imagePos >= imageArray.leng th){
imagePos = 0;
}
loadImage(image Pos);
}
function loadImage(i){
document.all("I MAGEHOLDER").st yle.visibility = "hidden";
if( imageArray.leng th==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("I MAGEHOLDER").sr c = imagePath;
document.all("I MAGEHOLDER").al t = imageAlt;
document.all("I MAGEHOLDER").wi dth = imageW;
document.all("I MAGEHOLDER").he ight = imageH;
document.all("I MAGEHOLDER").st yle.visibility = "visible";
document.all("C APTION").firstC hild.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="JavaS cript">
var imagePos = -1;
var imageStr = "<?=writeImageA rray() ?>"; //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 loadPreviousIma ge(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.leng th -1;
}
loadImage(image Pos);
}
function loadNextImage() {
imagePos++;
if( imagePos >= imageArray.leng th){
imagePos = 0;
}
loadImage(image Pos);
}
function loadImage(i){
document.all("I MAGEHOLDER").st yle.visibility = "hidden";
document.all is an MSIE only (within limits) code practice.

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

assuming you have the style attribute on an img tag with name="IMAGEHOLD ER"
if( imageArray.leng th==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("I MAGEHOLDER").sr c = imagePath;
document.images['IMAGEHOLDER'].src = imgPath
document.all("I MAGEHOLDER").al t = imageAlt;
document.images['IMAGEHOLDER'].alt=imageAlt;
document.all("I MAGEHOLDER").wi dth = imageW;
document.images['IMAGEHOLDER'].width=imageW;
document.all("I MAGEHOLDER").he ight = imageH;
document.images['IMAGEHOLDER'].height = imageH;
document.all("I MAGEHOLDER").st yle.visibility = "visible";
document.images['IMAGEHOLDER'].style.visibili ty = "visible";
document.all("C APTION").firstC hild.nodeValue = imageAlt;
document.getEle mentByID('CAPTI ON').firstChild .nodeVAlue = imagAlt;

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

--
Randy
comp.lang.javas cript 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******** ************@co mcast.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="JavaS cript">
var imagePos = -1;
var imageStr = "<?=writeImageA rray() ?>"; //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 loadPreviousIma ge(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.leng th -1;
}
loadImage(image Pos);
}
function loadNextImage() {
imagePos++;
if( imagePos >= imageArray.leng th){
imagePos = 0;
}
loadImage(image Pos);
}
function loadImage(i){
document.all("I MAGEHOLDER").st yle.visibility = "hidden";

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

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

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

if( imageArray.leng th==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("I MAGEHOLDER").sr c = imagePath;

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

document.all("I MAGEHOLDER").al t = imageAlt;

document.images['IMAGEHOLDER'].alt=imageAlt;

document.all("I MAGEHOLDER").wi dth = imageW;

document.images['IMAGEHOLDER'].width=imageW;

document.all("I MAGEHOLDER").he ight = imageH;

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

document.all("I MAGEHOLDER").st yle.visibility = "visible";

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

document.all("C APTION").firstC hild.nodeValue = imageAlt;

document.getEle mentByID('CAPTI ON').firstChild .nodeVAlue = imagAlt;

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

}
</script>

--
Randy
comp.lang.javas cript 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.getEle mentByID('CAPTI ON').firstChild .nodeValue = imagAlt;

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

.....some html....
<td colspan=2 ID="CAPTION_CEL L"><DIV ID="CAPTION">&n bsp;<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******** ************@co mcast.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="JavaS cript">
var imagePos = -1;
var imageStr = "<?=writeImageA rray() ?>"; //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 loadPreviousIma ge(){
imagePos--;
if (imagePos < 0){
imagePos = imageArray.leng th -1;
}
loadImage(image Pos);
}
function loadNextImage() {
imagePos++;
if( imagePos >= imageArray.leng th){
imagePos = 0;
}
loadImage(image Pos);
}
function loadImage(i){
document.all("I MAGEHOLDER").st yle.visibility = "hidden";

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

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

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

if( imageArray.leng th==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("I MAGEHOLDER").sr c = imagePath;

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

document.all("I MAGEHOLDER").al t = imageAlt;

document.images['IMAGEHOLDER'].alt=imageAlt;

document.all("I MAGEHOLDER").wi dth = imageW;

document.images['IMAGEHOLDER'].width=imageW;

document.all("I MAGEHOLDER").he ight = imageH;

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

document.all("I MAGEHOLDER").st yle.visibility = "visible";

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

document.all("C APTION").firstC hild.nodeValue = imageAlt;

document.getEle mentByID('CAPTI ON').firstChild .nodeVAlue = imagAlt;

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

}
</script>

--
Randy
comp.lang.javas cript 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.getEle mentByID('CAPTI ON').firstChild .nodeValue = imagAlt;

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

.....some html....
<td colspan=2 ID="CAPTION_CEL L"><DIV ID="CAPTION">&n bsp;<DIV></td>
....some more!...

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

document.getEle mentByID('CAPTI ON').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.javas cript 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.c om...

SPG wrote:

Hi Randy,

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

document.getEle mentByID('CAPTI ON').firstChild .nodeValue = imagAlt;

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

.....some html....
<td colspan=2 ID="CAPTION_CEL L"><DIV ID="CAPTION">&n bsp;<DIV></td>
....some more!...

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

document.getEle mentByID('CAPTI ON').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.javas cript 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("I MAGEHOLDER").st yle.visibility = "hidden";
if( imageArray.leng th==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("I MAGEHOLDER").sr c = imagePath;
document.all("I MAGEHOLDER").al t = imageAlt;
document.all("I MAGEHOLDER").wi dth = imageW;
document.all("I MAGEHOLDER").he ight = imageH;
document.all("I MAGEHOLDER").st yle.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.v isibility = "visible";
That's gotta save a few clock cycles...

--
Fred