cobbling functions together

[James]

Hello.

I have a problem trying to get seperate image functions to work
together.

Starting with the img tag and associated html:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />
<input type="button" value="&lt;&lt; Previous" name="previous"
onClick="Backer ()"></td>
<td align="center"> <input type="button" value="Next &gt;&gt;"
name="next" onClick="Nexter ()">
The above buttons Next and Previous run two functions called Nexter and
Backer which swap theImage source of a small image. That works fine.
The javascript for that is at the bottom of this post.

Now, please notice that within the img tag is this:

pbsrc="image1_l rg.jpg"

that is used to run the two functions Pop() and Revert() in the img tag
which magnifys and then reduces the image by swapping in a larger
version of the same image (using a fancy inline css magnification zoom
type thing). In this case as written it calls "image1_lrg.jpg " which is
the large counterpart to "image1.jpg "

The javascript that runs the magnification is very large and complicated
and beyond my understanding except that I know whatever is set as
"pbsrc" is what gets magnified.

The problem is, whenever the functions Nexter and Backer are called to
swap the small images, I need to change the pbsrc to the corresponding
"_lrg.jpg" image path that can get passed to the javascript that runs
the magnification.

As it stands now, pbsrc always remains "image1_lrg.jpg " even as the
images are swapped using nexter and backer.

If you look in the script for Nexter and Backer just below, the small
image swap array is pretty clear.

So, when theImage.src gets changed to 'image2.jpg" the pbsrc has to get
changed to "image2_lrg.jpg " and so on.

Is there some way to change the value of pbsrc in the img tag as needed,
each time Nexter and Backer are called?

Thank you very much.

<script language="JavaS cript">
currentIndx=0;
MyImages=new Array();
MyImages[0]='image1.jpg';
MyImages[1]='image2.jpg';
MyImages[2]='image3.jpg';
MyImages[3]='image4.jpg';

imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image()
imagesPreloaded[i].src=MyImages[i]
}
function Nexter(){
if (currentIndx<im agesPreloaded.l ength-1){
currentIndx=cur rentIndx+1;
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
else {
currentIndx=0
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
}

function Backer(){
if (currentIndx>0) {
currentIndx=cur rentIndx-1;
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
else {
currentIndx=6
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}}

[James]

Can anyone help? I know the post is kind of long, I wanted to explain
thoroughly enough. I think it comes down to passing variables, but I am
not sure.

Thanks again.
James <Ja*********@th anks.comwrote in
news:Xn******** *************** ***@216.196.97. 136:

Hello.

I have a problem trying to get seperate image functions to work
together.

Starting with the img tag and associated html:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />
<input type="button" value="&lt;&lt; Previous" name="previous"
onClick="Backer ()"></td>
<td align="center"> <input type="button" value="Next &gt;&gt;"
name="next" onClick="Nexter ()">
The above buttons Next and Previous run two functions called Nexter

and

Backer which swap theImage source of a small image. That works fine.
The javascript for that is at the bottom of this post.

Now, please notice that within the img tag is this:

pbsrc="image1_l rg.jpg"

that is used to run the two functions Pop() and Revert() in the img

tag

which magnifys and then reduces the image by swapping in a larger
version of the same image (using a fancy inline css magnification zoom
type thing). In this case as written it calls "image1_lrg.jpg " which

is

the large counterpart to "image1.jpg "

The javascript that runs the magnification is very large and

complicated

and beyond my understanding except that I know whatever is set as
"pbsrc" is what gets magnified.

The problem is, whenever the functions Nexter and Backer are called to
swap the small images, I need to change the pbsrc to the corresponding
"_lrg.jpg" image path that can get passed to the javascript that runs
the magnification.

As it stands now, pbsrc always remains "image1_lrg.jpg " even as the
images are swapped using nexter and backer.

If you look in the script for Nexter and Backer just below, the small
image swap array is pretty clear.

So, when theImage.src gets changed to 'image2.jpg" the pbsrc has to

get

changed to "image2_lrg.jpg " and so on.

Is there some way to change the value of pbsrc in the img tag as

needed,

each time Nexter and Backer are called?

Thank you very much.

<script language="JavaS cript">
currentIndx=0;
MyImages=new Array();
MyImages[0]='image1.jpg';
MyImages[1]='image2.jpg';
MyImages[2]='image3.jpg';
MyImages[3]='image4.jpg';

imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image()
imagesPreloaded[i].src=MyImages[i]
}
function Nexter(){
if (currentIndx<im agesPreloaded.l ength-1){
currentIndx=cur rentIndx+1;
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
else {
currentIndx=0
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
}

function Backer(){
if (currentIndx>0) {
currentIndx=cur rentIndx-1;
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
else {
currentIndx=6
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}}

[RobG]

James wrote:

Hello.

I have a problem trying to get seperate image functions to work
together.

Starting with the img tag and associated html:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />
<input type="button" value="&lt;&lt; Previous" name="previous"
onClick="Backer ()"></td>
<td align="center"> <input type="button" value="Next &gt;&gt;"
name="next" onClick="Nexter ()">
The above buttons Next and Previous run two functions called Nexter and
Backer which swap theImage source of a small image. That works fine.
The javascript for that is at the bottom of this post.

Now, please notice that within the img tag is this:

pbsrc="image1_l rg.jpg"

that is used to run the two functions Pop() and Revert() in the img tag
which magnifys and then reduces the image by swapping in a larger
version of the same image (using a fancy inline css magnification zoom
type thing). In this case as written it calls "image1_lrg.jpg " which is
the large counterpart to "image1.jpg "

The javascript that runs the magnification is very large and complicated
and beyond my understanding except that I know whatever is set as
"pbsrc" is what gets magnified.

The problem is, whenever the functions Nexter and Backer are called to
swap the small images, I need to change the pbsrc to the corresponding
"_lrg.jpg" image path that can get passed to the javascript that runs
the magnification.

As it stands now, pbsrc always remains "image1_lrg.jpg " even as the
images are swapped using nexter and backer.

If you look in the script for Nexter and Backer just below, the small
image swap array is pretty clear.

So, when theImage.src gets changed to 'image2.jpg" the pbsrc has to get
changed to "image2_lrg.jpg " and so on.

Is there some way to change the value of pbsrc in the img tag as needed,
each time Nexter and Backer are called?

Just set it to an appropriate value.

<script language="JavaS cript">

The language attribute is deprecated, type is required:

<script type="text/javascript">

currentIndx=0;

All variables should be declared with var:

var currentIndx=0;

MyImages=new Array();
MyImages[0]='image1.jpg';
MyImages[1]='image2.jpg';
MyImages[2]='image3.jpg';
MyImages[3]='image4.jpg';

By convention, variable names starting with a capital letter are
reserved for constructors. Also, consider using an array literal:

var myImages = ['image1.jpg', 'image2.jpg',
'image3.jpg', 'image4.jpg'];

imagesPreloaded = new Array(4)

There is no need to specify a length when creating a new array, an array
literal can be used here too:

var imagesPreloaded = [];

for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image()
imagesPreloaded[i].src=MyImages[i]
}
function Nexter(){

You could replace from here...

if (currentIndx<im agesPreloaded.l ength-1){
currentIndx=cur rentIndx+1;
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}
else {
currentIndx=0
document.theIma ge.src=imagesPr eloaded[currentIndx].src
}

to here with something like:

currentIndex = ++currentIndex % imagesPreloaded .length;
document.theIma ge.src = myImages[currentIndx];
Now you need to set the new value for the img element's pbsrc property,
the function might look like:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}
Do a similar thing to backer(), setting the currentIndex will need to be
something like:

currentIndex = currentIndex? --currentIndex || --myImages.length ;
--
Rob

[Nomen Nescio]

Thanks for trying, but this doesn't seem to work.

This:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}

does not change the pbsrc image. It always stays the same as what it is
originally set to in the img tag:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />

So, no matter what nexter changes the small image to, the large image
called by pbsrc is always "image1_lrg.jpg "

Unless I am mistaken, the src attribute of an image can be changed in
this way. But pbsrc isn't an actual img attribute and cannot.

Am I mistaken?

>
Just set it to an appropriate value.

><script language="JavaS cript">

The language attribute is deprecated, type is required:

<script type="text/javascript">

>currentIndx= 0;

All variables should be declared with var:

var currentIndx=0;

>MyImages=new Array();
MyImages[0]='image1.jpg';
MyImages[1]='image2.jpg';
MyImages[2]='image3.jpg';
MyImages[3]='image4.jpg';

By convention, variable names starting with a capital letter are
reserved for constructors. Also, consider using an array literal:

var myImages = ['image1.jpg', 'image2.jpg',
'image3.jpg', 'image4.jpg'];

>imagesPreloade d = new Array(4)

There is no need to specify a length when creating a new array, an
array literal can be used here too:

var imagesPreloaded = [];

>for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloade d[i] = new Image()
imagesPreloade d[i].src=MyImages[i]
}
function Nexter(){

You could replace from here...

>if (currentIndx<im agesPreloaded.l ength-1){
currentIndx=cu rrentIndx+1;
document.theIm age.src=imagesP reloaded[currentIndx].src
}
else {
currentIndx= 0
document.theIm age.src=imagesP reloaded[currentIndx].src
}

to here with something like:

currentIndex = ++currentIndex % imagesPreloaded .length;
document.theIma ge.src = myImages[currentIndx];
Now you need to set the new value for the img element's pbsrc
property, the function might look like:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}
Do a similar thing to backer(), setting the currentIndex will need to
be something like:

currentIndex = currentIndex? --currentIndex || --myImages.length ;

[James]

Sorry, news reader defaulted to that Nomen Nescio thing.

Thanks for trying, but this doesn't seem to work.

This:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}

does not change the pbsrc image. It always stays the same as what it is
originally set to in the img tag:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />

So, no matter what nexter changes the small image to, the large image
called by pbsrc is always "image1_lrg.jpg "

Unless I am mistaken, the src attribute of an image can be changed in
this way. But pbsrc isn't an actual img attribute and cannot.

Am I mistaken?

>
Just set it to an appropriate value.

><script language="JavaS cript">

The language attribute is deprecated, type is required:

<script type="text/javascript">

>currentIndx= 0;

All variables should be declared with var:

var currentIndx=0;

>MyImages=new Array();
MyImages[0]='image1.jpg';
MyImages[1]='image2.jpg';
MyImages[2]='image3.jpg';
MyImages[3]='image4.jpg';

By convention, variable names starting with a capital letter are
reserved for constructors. Also, consider using an array literal:

var myImages = ['image1.jpg', 'image2.jpg',
'image3.jpg', 'image4.jpg'];

>imagesPreloade d = new Array(4)

There is no need to specify a length when creating a new array, an
array literal can be used here too:

var imagesPreloaded = [];

>for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloade d[i] = new Image()
imagesPreloade d[i].src=MyImages[i]
}
function Nexter(){

You could replace from here...

>if (currentIndx<im agesPreloaded.l ength-1){
currentIndx=cu rrentIndx+1;
document.theIm age.src=imagesP reloaded[currentIndx].src
}
else {
currentIndx= 0
document.theIm age.src=imagesP reloaded[currentIndx].src
}

to here with something like:

currentIndex = ++currentIndex % imagesPreloaded .length;
document.theIma ge.src = myImages[currentIndx];
Now you need to set the new value for the img element's pbsrc
property, the function might look like:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}
Do a similar thing to backer(), setting the currentIndex will need to
be something like:

currentIndex = currentIndex? --currentIndex || --myImages.length ;

[RobG]

James wrote:

Sorry, news reader defaulted to that Nomen Nescio thing.

Please don't top-post, reply below trimmed quotes.

Thanks for trying, but this doesn't seem to work.

This:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded .length;
var img = document.theIma ge;
var src = myImages[currentIndex];

img.src = src;
img.pbsrc = src.replace(/\.jpg$/, '_lrg.jpg');
}

does not change the pbsrc image. It always stays the same as what it is
originally set to in the img tag:

<img src="image1.jpg " NAME="theImage" pbsrc="image1_l rg.jpg"
style="width: 125px; height: 125px;" class="PopBoxIm ageSmall"
onclick="Pop(th is,50,'PopBoxIm ageLarge');" ondblclick="Rev ert
(this,50,'PopBo xImageSmall');" />

It is likely that the pop function is using getAttribute to read the
attribute of the elelment rather than reading the DOM property directly.
In that case, use setAttribute:

img.setAttribut e('pbsrc', src.replace(/\.jpg$/, '_lrg.jpg'));
--
Rob