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

cobbling functions together

P: n/a
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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />
<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_lrg.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="JavaScript">
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<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
}
}

function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=6
document.theImage.src=imagesPreloaded[currentIndx].src
}}
Jul 9 '08 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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*********@thanks.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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />
<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_lrg.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="JavaScript">
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<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
}
}

function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=6
document.theImage.src=imagesPreloaded[currentIndx].src
}}
Jul 11 '08 #2

P: n/a
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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />
<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_lrg.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="JavaScript">
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<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
}
to here with something like:

currentIndex = ++currentIndex % imagesPreloaded.length;
document.theImage.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.theImage;
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
Jul 11 '08 #3

P: n/a
Thanks for trying, but this doesn't seem to work.

This:

function nexter() {
currentIndex = ++currentIndex % imagesPreloaded.length;
var img = document.theImage;
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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />

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="JavaScript">

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<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
}

to here with something like:

currentIndex = ++currentIndex % imagesPreloaded.length;
document.theImage.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.theImage;
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;

Jul 11 '08 #4

P: n/a
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.theImage;
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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />

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="JavaScript">

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<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
}

to here with something like:

currentIndex = ++currentIndex % imagesPreloaded.length;
document.theImage.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.theImage;
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;


Jul 11 '08 #5

P: n/a
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.theImage;
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_lrg.jpg"
style="width: 125px; height: 125px;" class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');" ondblclick="Revert
(this,50,'PopBoxImageSmall');" />
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.setAttribute('pbsrc', src.replace(/\.jpg$/, '_lrg.jpg'));
--
Rob
Jul 11 '08 #6

This discussion thread is closed

Replies have been disabled for this discussion.