JavaScript - Genealogy Stuff

hey guys, I'm not the quickest running in the race, but I'm slowly learning JavaScript.

I'm attempting to use the jQuery iviewer to control the viewing of images. I'm essentially making my own slideshow.

In any event, I'm trying to tag a map along with the image. The only way I know of doing this is with standard markup doing usemap="#map_name".

so here's my JavaScript code, and the HTML to follow.

Code:

 var $ = jQuery;
            $(document).ready(function(){
                  $("#viewer").iviewer(
                       {
                       src: "images/page11.jpg", 
                       update_on_resize: false,
                       initCallback: function ()
                       {
                           var object = this;
                           $("#in").click(function(){ object.zoom_by(1);}); 
                           $("#out").click(function(){ object.zoom_by(-1);}); 
                           $("#fit").click(function(){ object.fit();}); 
                           $("#orig").click(function(){  object.set_zoom(100); }); 
                           $("#update").click(function(){ object.update_container_info();});
                       },
                       onMouseMove: function(object, coords) { },
                       onStartDrag: function(object, coords) { return false; },
                       onDrag: function(object, coords) { } 
                  });

                  $("#viewer2").iviewer(
		      {
		      src: "images/page11.jpg",
		      update_on_resize:false,
		      initCallBack: function ()
		      {
		      document.images[0].useMap = "#map1";
		      }
		 });
            });

And the 'scaler'

Code:

function scalecoordimages(elImage, amount){
        var elMap = getMap(elImage)
        elImage.width *= amount;
        elImage.height *= amount;
        if (null != elMap){
           for (var intLoop = 0; intLoop < elMap.areas.length;
                   intLoop++)  {
               var elArea = elMap.areas[intLoop];
               var coords = elArea.coords.split(",");
               var scaledCoords = "";
               for (coords in coords) {
                    scaledCoords += (coords[coord] * amount) + ",";
               }

                elArea.coords = scaledCoords;
             }
        }
    }

and now the HTML where this is all delivered.

Code:

<div class="wrapper">
      <div id="viewer2" class="viewer" style="margin: 50px auto;"></div>
</div>

the 'wrapper' is because in Safari the overflow doesn't hold properly and breaks.

the Map is just rectangles...it's below >

Code:

<map name="map1" id="map1">
                        <area class="hotspot" shape="rect" coords="105, 1110, 371, 1125" href="" onMouseOver="tooltip.show('<ul>Northeast States:<br /><li>Connecticut</li><li>Maine</li> <li>Massachusetts</li><li>New Hampshire</li><li>Rhode Island</li><li>Vermont</li><li>New Jersey</li><li>New York</li><li>Pennsylvania</li></ul>');" onMouseOut="tooltip.hide();" >	
                        
                        <area class="hotspot" shape="rect" coords="105, 1135, 371, 1150" href="" onMouseOver="tooltip.show('<ul>Midwest States:<br /><li>Indiana</li><li>Illinois</li><li>Michigan</li><li>Ohio</li><li>Wisconsin</li><li>Iowa</li><li>Kansas</li><li>Minnesota</li><li>Missouri</li><li>Nebraska</li><li>North Dakota</li><li>South Dakota</li></ul>');" onMouseOut="tooltip.hide();"></area>
                        
                        <area class="hotspot" shape="rect" coords="105, 1160, 371, 1175" href="" onMouseOver="tooltip.show('<ul>Southern States:<br /><li>Delaware</li><li>Florida</li><li>Georgia</li><li>Maryland</li><li>North Carolina</li><li>South Carolina</li><li>Virginia</li><li>West Virginia</li><li>Alabama</li><li>Kentucky</li><li>Mississippi</li><li>Tennessee</li><li>Arkansas</li><li>Louisiana</li><li>Oklahoma</li><li>Texas</li></ul>');" onMouseOut="tooltip.hide();"></area>
                         
                        <area class="hotspot" shape="rect" coords="105, 1185, 371, 1200" href="" onMouseOver="tooltip.show('<ul>Western States:<br /><li>Arizona</li><li>Colorado</li><li>Idaho</li><li>New Mexico</li><li>Montana</li><li>Utah</li><li>Nevada</li><li>Wyoming</li><li>Alaska</li><li>Californai</li><li>Hawaii</li><li>Oregon</li><li>Washington</li></ul>')" onMouseOut="tooltip.hide();"></area>                    
                    </map>

Any help is appreciated. Thank you.

Hi all,
I'm quite new to Javascript, and I'm stuck with a problem here.
I have a website, I won't go in to detail, but it generates some javascript code for the user. Well, that's the idea. The user puts this javascript on his or her website. Now everytime the page with that javascript is loaded, a page on my server is called, and is supposed to display something on the place of the javascript of that website.

I however have not the slightest clue how to do this. The script on my server has to get some values from a database (I'll be doing this with php). Therefore are some variables needed, like ID's. Those are put in the javascript at the website of that person. (I know they could just change it, but that'd only disadvantage them)

And example of the code the person with the website would get is this: (This was also generated on user basis somewhere, which does about the same thing)
Code:

<script language="javascript" type="text/javascript" charset="utf-8">
var border = '#000000';
id = 1337;
</script>
<script language="JavaScript" type="text/javascript" src="http://somesite.com/scriptname.php">
</script>

If you don't understand what I'm trying to do here, please ask, because I might not've explained it clear enough.

Thanks, lordstyx.

[edit]
Someone said to look in the direction of XMLHttpRequest. I don't really know what that is, but I'll try and find a bit more info about it.

... like if you input text, you can't select it by sweeping it with the mouse, or shift-left arrow. Which I thought were out of the box features.

You can see it in the bottom right corner of the map here. I don't think the autocomplete has anything to do with it (I disconnected that and nothing changed) but maybe because it gets made by innerhtml?

any suggestions welcome.

Hello,

Problem 1: I have a function and it sets a value to a certain number according to the input. However, I don't want the function to print out the value to the screen, but instead temporarily save it for me to use throughout the whole script. I am a newbie and please help me. For example, I make this code:

function add1(x) {
var x = x + 1
return x;
}

and I call the function:

add1(0);
document.write("value = " + x + "<BR>");

Whenever I do this, document.write doesn't print out value = 1, it doesn't even print anything except for the headers, etc. Is there anyway to set the var x to be a value valid throughout the whole script instead of just the function itself? I really need help on this, thanks.

Problem 2: I want to get a code working. Basically, I use a ram to "ram the gate". I set the damage done each turn, and the Gate's Health too. So for example, my ram's damage is 10 and the gate's health is 200. It would take 20 times to totally breach the gates(i.e., for gate health to become 0). When I use the following code, the total damage is the same throughout the whole looping until the gatehealth reaches 0 which makes it boring, is there anyway to modify or improve the script such that when I loop, the MiscDamage would be different for all the turns? thanks! Once again I apologize for asking such a noob-ish and very strange.... question.

Quote:
<script language="JavaScript" type="text/javascript">
<!-- // Begin

function RamGates(Ram, Attack, Gate) {
//introducing variables to be used
var BaseDamage = 0;
var FullDamage = 0;
var MiscDamage = 0;
var TotalDamage = 0;
var GateHealth = 0;

switch (Ram) {
//ignore this part just comparing ram types
case "Explosive":
BaseDamage="10";
break;
case "Wooden":
BaseDamage="20";
break;
case "Steel":
BaseDamage="30";
break;
case "", "?":
default:
BaseDamage="Failed to recognize Ram";
}

switch (Attack) {
//ignore this just comparing attack values
case 0:
FullDamage = BaseDamage;
break;
case 1:
FullDamage = (BaseDamage*2)-8;
break;
case 2:
FullDamage = (BaseDamage*2)-6;
break;
case 3:
FullDamage = (BaseDamage*2)-4;
break;
case 4:
FullDamage = (BaseDamage*2)-2;
break;
case 5:
FullDamage = BaseDamage*2;
break;
case "", "?":
default:
FullDamage="Failed to recognize Attack";
}

switch (Ram) {
//this part is what i need help on, i need the loop function to keep using this to generate different "lucky damages" each time to make it interesting, i.e., first ram = 11 second ram = 16 third ram = 14 and so on.....
case "Explosive":
MiscDamage = Math.floor(Math.random()*21+10);
break;
case "Wooden":
MiscDamage = Math.floor(Math.random()*6+0);
break;
case "Steel":
MiscDamage = Math.floor(Math.random()*11+5);
break;
case "", "?":
default:
MiscDamage="Failed to recognize Ram";
}

switch (Gate) {
//ignore this part just comparing gate types to generate gate health
case "Wooden":
GateHealth = 50;
break;
case "Brick":
GateHealth = 75;
break;
case "Small Stone":
GateHealth = 90;
break;
case "Large Stone":
GateHealth = 120;
break;
case "Granite":
GateHealth = 140;
break;
case "Iron":
GateHealth = 175;
break;
case "R Iron":
GateHealth = 190;
break;
case "Thick Iron":
GateHealth = 210;
break;
case "Steel":
GateHealth = 230;
break;
case "R Steel":
GateHealth = 250;
break;
case "Thick Steel":
GateHealth = 275;
break;
case "Steel Iron Mix":
GateHealth = 280;
break;
case "Thick Steel Iron Mix":
GateHealth = 300;
break;
case "Strong Ruby Steel Mix":
GateHealth = 400;
break;
case "Strong Sapphire Steel Mix":
GateHealth = 450;
break;
case "R Thick Large Diamond Steel Mix":
GateHealth = 500;
break;
case "", "?":
default:
GateHealth = "Failed to recognize Gate";
}

TotalDamage = FullDamage + MiscDamage;

with (document) {
write ("Soldiers, " + "RAM THE GATES!" + "<BR>");
}

while (GateHealth >= 0)
//loops until gate health is lower than 0
{
//need help! how to make it such that the loop will rerun the switching of ram for generating random misc(lucky) damages
document.write ("Lucky Damage done = " + MiscDamage + "<BR>");
document.write ("Total Damage done = " + TotalDamage + "<BR>");
var GateHealth = GateHealth - TotalDamage
document.write("Current GateHealth = " + GateHealth + "<BR>");
}
}

RamGates("Explosive", 5, "R Thick Large Diamond Steel Mix");
//function calling

// End -->
</script>

So how do i get to backgroundColor value to change it?

a.backgroudColor('black');

or how ?

Code:

var a = makeDiv(p.age , {
    backgroundColor: 'gray',
    color: 'white',         
    padding: '2px 6px',    
    fontSize: '15pt',       
  });