Page 1 of 1

How can I handle information passed through a function(this)

Posted: Mon Aug 20, 2007 12:24 am
by JAB Creations
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


What is the part between the parenthesis referred to as in a function(this-right-here);?

I'd like to use it to pass information to a script to make it scalable....
[syntax="html"]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function imageswap(id, newImage)
{
identity=document.getElementById(id);
identity.src=newImage;
}
// Functions
function gallery0001() {imageswap('galleryimagehere', 'image-0001.jpg');}
function gallery0002() {imageswap('galleryimagehere', 'image-0002.jpg');}
</script>
</head>

<body>

<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div>

<div id="gallery">
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0001" onkeyup="gallery0001()" onmouseover="gallery0001();"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0002" onkeyup="gallery0002()" onmouseover="gallery0002();"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html> 

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Aug 20, 2007 12:39 am
by iknownothing
referred to..? A parameter?

Posted: Mon Aug 20, 2007 12:54 am
by JAB Creations
iknownothing knows. 8)

Now how can I handle the parameter as a value to manipulate what image number is used? I'm reading about parameters online now that I know how to reference them.

Posted: Mon Aug 20, 2007 1:05 am
by iknownothing
if you use something like:

Code: Select all

<img src="whatever1.jpg" onclick="afunction(this)">
you can access it with something like this:

Code: Select all

function afunction(yourimage){
yourimage.src = "whatever2.jpg";
}
Is that sort of what you were asking?

Posted: Mon Aug 20, 2007 1:18 am
by JAB Creations
Thanks for the suggestion though I'm not sure what that would do, I will try to clarify my goal better...

The newest version of my gallery is a single dynamic file that uses a combination of PHP and JavaScript.

The full size image is dynamically replaced on the onmouseover and onkeyup JavaScript event handlers located on the thumbnails. The problem is getting rid of repetitive code. I could make 300 lines of the following for 300 images (this code will load the full size image when you move the mouse over the thumbnail)...

Code: Select all

function gallery0001() {imageswap('galleryimagehere', 'images/image-0001.jpg');}
function gallery0002() {imageswap('galleryimagehere', 'images/image-0002.jpg');}
function gallery0003() {imageswap('galleryimagehere', 'images/image-0003.jpg');}
function gallery0004() {imageswap('galleryimagehere', 'images/image-0004.jpg');}
Obviously that is exceptionally repetitive.

What I'm trying to figure out is how to just call the function but pass the parameter WITH the function so every thumbnail calls the same function though each thumbnail has it's unqiue number.

Then on the main script itself I want to adapt it so that when the function is triggered it looks for the parameter. For example....

Code: Select all

<img onmouseover="imageswap(0297);" />
<img onmouseover="imageswap(0298);" />
<img onmouseover="imageswap(0299);" />
<img onmouseover="imageswap(0300);" />
The last image's function has a parameter of "0300" and so we'd target our full sized image element by it's ID (galleryimagehere) and then replace it's current image source with the image containing the number we've requested (image-0300.jpg).

I hope this clarifies what I'm trying to attempt? I'm not seeing anything online about dynamic javascript parameters though and the two JavaScript books I have use static parameter values thus rendering them useless to me at the moment.

Thanks for your help!

Posted: Mon Aug 20, 2007 1:28 am
by iknownothing
yeah,I think I know where your going...

something like this perhaps...

Code: Select all

<img src="whatever1.jpg" onmouseover="afunction(this, 124);" onmouseout="this.src='whatever1.jpg';">
if using php maybe...

Code: Select all

<img src="<?php echo $thumbnail ?>" onmouseover="afunction(this, <?php echo $a_number ?>);" onmouseout="this.src='<?php echo $thumbnail ?>';">

you can access it with something like this:

Code: Select all

function afunction(yourimage, thenumber){ 
yourimage.src = "image-" +thenumber+ ".jpg"; 
}
what this is doing is replacing THIS image source (whatever1.jpg, in this case), with "image-124.jpg" (124 being the second parameter)

Posted: Mon Aug 20, 2007 1:48 am
by JAB Creations
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Ok so can we adapt it for three parameters? This isn't working but it feels like we're moving in the right direction!

Here is my first of two attempts...

[syntax="html"]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">

function afunction(yourimage, thenumber, id){
yourimage.src = "image-" +thenumber+ ".jpg";
identity=document.getElementById(id);
identity.src=yourimage.src;
}
</script>
</head>

<body>

<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div>

<div id="gallery">
<a href="gallery.php?image=0001" onkeyup="afunction(this, 0001, galleryimagehere)" onmouseover="afunction(this, 0001, galleryimagehere);"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="gallery.php?image=0002" onkeyup="afunction(this, 0002, galleryimagehere)" onmouseover="afunction(this, 0002, galleryimagehere);"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html>

My second attempt I modified the script as so (trying to see if I could get this to work if I used the ID already predefined inside of the script itself...[/syntax]

Code: Select all

function afunction(yourimage, thenumber){
yourimage.src = "image-" +thenumber+ ".jpg";
document.galleryimagehere.src=yourimage.src;
Neither script works and the second attempt didn't even generate any console errors in Gecko? Are we allowed to set three parameters like this...?

Code: Select all

onkeyup="afunction(this, 0002, galleryimagehere)"
How can I get the script to work with the targeted ID of galleryimagehere both with it being defined as a parameter and having it as part of the script? Having it as a third parameter this script could be used to easily compare two or more images on a website. This is pretty nifty, well if we get it to work! :D Thanks for your help thus far!


feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Mon Aug 20, 2007 2:42 am
by JAB Creations
Well I did it! It works 99.9% though there is one complication! If the parameter starts with a '0' it isn't passed through to the function, how do I preserve parameters that start with '0'?

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function afunction(thenumber) {
identity = document.getElementById("galleryimagehere");
identity.src = "images/image-" +thenumber+ ".jpg";
}
</script>
</head>

<body>

<div class="center">
<img alt="Full Sized Image" id="galleryimagehere" src="images/image-0001.jpg" />
</div>

<div id="gallery">
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0001" onkeyup="afunction(0001)" onmouseover="afunction(0001);"><img alt="" src="images/image-thumb-0001.gif" /><span>0001</span></a>
<a href="<?php echo $_SERVER['PHP_SELF'];?>?image=0002" onkeyup="afunction(0002)" onmouseover="afunction(0002);"><img alt="" src="images/image-thumb-0002.gif" /><span>0002</span></a>
</div>
</body>
</html>

Posted: Mon Aug 20, 2007 2:52 am
by iknownothing
perhaps use it as a string?

Code: Select all

afunction('0001')

Posted: Mon Aug 20, 2007 3:01 am
by JAB Creations
You made my day! Thank you so much for your help! :mrgreen: You should have the mods change your name to something more appropriate. :wink: