By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

dynamically change an image - cross browser

P: n/a
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>
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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?
Jul 23 '05 #2

P: n/a
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?

Jul 23 '05 #3

P: n/a
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?

Jul 23 '05 #4

P: n/a
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?
Jul 23 '05 #5

P: n/a
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
Jul 23 '05 #6

P: n/a
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
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.