Moving parameters around 1

[glg1]

Hi all,
I'm struggling with condensing code into something that is much more manageable. The basic idea is the following:
I have an exapnding side panel of image thumbnails that moves in and out with mouseover. When a thumbnail is clicked - it then displays in a main div. Once it is in the main div, I then can manipulate it in several ways: using its image map to provide more content, move the image to another location with shrinking, providing the main div with screen real-estate that can be used for other things (as yet to be determined - but based on the needs of the end user).

The code is working as is, however the next step is to link it to the database using either java server pages or ajax.

Hence what I need to do is to combine parameters such that when we start pulling the images from the database, most of the code is focused on getting the correct images and content rather than generating bloated html. In other words is there a good way to condense the onclick activities - displaying the large image (in formImage)and the formCaption into a single function that can then be called with parameters that change depending upon which thumbnail is clicked?

Here's what I have so far...(only a few of each image - there are up to 20.)

function shrinkIt() {
document.getElementById("formImage").style.width = "200px";
}
function enlargeIt() {
document.getElementById("formImage").style.width = "60%";
}
function moveitTo(obj, x, y) {
obj.style.left = x +"%";
obj.style.top = y +"px";
}

and the html (I've purposely left out the CSS to focus on the dynamic aspects.)

<div id= "main">
<p id="formCaption">here's where the caption will go</p>
<img id = "formImage" src="" alt = "picture of form1"></img>
</div>

<ul>
<li><a href="javascript:moveitTo(document.getElementById('formImage'), 50,-200); shrinkIt()">Move and shrink (top)</a></li>
<li><a href="javascript:moveitTo(document.getElementById('formImage'), 0, 0); enlargeIt()">Return to original position (left)</a></li>
</ul>


<ul>
<li><a><img src="SF600_16.png" width="100%" alt="SF600" onClick = "document.getElementById('formImage').src = 'SF600_16.png'; document.getElementById('formCaption').innerHTML ='SF600'" /><caption> SF600</caption></a></li>
	<li><a><img src="SF88_16.png" width = "100%" alt="SF88" onClick = "document.getElementById('formImage').src = 'SF88_16.png'; document.getElementById('formCaption').innerHTML = 'SF88'" /><caption> SF88</caption></a></li>

</ul>

Thanks a million,
George

 

[BillyRayPreachersSon]

If I've understood correctly, you want to simply merge the 3 functions shrinkIt, enlargeIt, and moveitTo into one. If this is the case, then yes, this is easily do-able.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[glg1]

Thanks Dan, Combining those function will be easy - I just haven't gotten around to it... The part I'm struggling with is taking the onClick = "document.getElementById('formImage').src = 'form that is in the thumbnail -sf88_16, SF600 etc.';

and turning that into a function:

something like (but it doesn't quite work)
function getbigFormImage(){
var formName = document.thumbnail.image.src;
var formImage = document.getElementById("formImage");
formImage.src = formName;
}

then in the html:
<li><a><img src="SF88_16.png" width = "100%" alt="SF88" onClick = "getbigFormImage()";

should I use (this)?? I'm not sure how to make the src for the thumbnail (SF88_16.png in this example) end up being the source for the onclick.

Thanks, George

 

[BabyJeffy]

Change your onclick to be generic...

<img src="SF88_16.png" onclick="getbigFormImage(this.src)">

And then create the function that accepts the src parameter...

function getbigFormImage(_data) {
  document.getElementById("formImage").src = _data;
}

You could remove the onclick and give the imgs that need an onclick the same class... then (on page load) add the onclick to each img that has a matching class.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[glg1]

Thanks Jeff. Works great.
Could you explain the _data? i really like the possibilities.

cheers,
George

 

[BabyJeffy]

Sure. In this instance we are passing some information into the function... in the example above, we are passing the value from this.src into the function getbigFormImage(). The function is then able to reference the information via the name given to the parameter in the function (in this case I used _data, but could have used almost any name for the variable).

It is also possible to pass multiple things into a function:

function test(_word1, _word2) {
  alert("This is the first parameter: "+_word1);
  alert("This is the second parameter: "+_word2);
}
...
<a href="#" onclick="test('hello','world')">Test</a>

Once you see how to use variables in this way you open up a who new world of opporunities! Take a trip to the w3schools website for more information on this kind of thing...

http://www.w3schools.com/js/js_functions.asp

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094