473,385 Members | 1,676 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > cobbling functions together

Join Bytes to post your question to a community of 473,385 software developers and data experts.

cobbling functions together

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
5 1167
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
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
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
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
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
Advantages of using classes over functions?
by: bissatch | last post by:
Hi, Generally if I re-use code, I use a function. If I need to use these functions over a number of pages I write the function to an include file where all pages have access. So when should I...
PHP
6
Nested functions in C++
by: A | last post by:
Hi, How do you make use of nested functions in C++? I realize in C++ that everything must be declared first in a header file before implementation in a .cpp file. I tried to nest a method...
C / C++
16
functions that take many arguments...... + extern - what about it?
by: Martin Jørgensen | last post by:
Hi, Problem: ======== Some of my output functions are beginning to take pretty many arguments... I mean.... We're talking about 10-15 arguments :-) So I thought to myself, perhaps this is...
C / C++
13
Classes / Functions / Autonomy
by: Simon Dean | last post by:
Hi, I have a couple of questions. If you don't mind. Sorry, I do get a bit wordy at times. First one just throws some thoughts around hoping for answers :-) 1) Anyone got a theory on the...
PHP
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!