The Javascript

Now that we know what each of these two parts are in HTML, how can you make it do something Entirely different?  You just need a scripting language, in this case we’re using Javascript.  Sometimes you have an HTML statement within an object, this defines a property of the object.  Common ones include href, src, and id (in the first two they aren’t available to all objects).  Looking at some of the objects you can figure out what they do, href defines a hyperlink reference, class defines the class of the object (not important to this tutorial), onMouseOver and onMouseOut say what to do when the object is moused over and out respectively, id defines the object id for reference later, and src tells the source for the object.  All of these properties are formatted Property=”text” but can have Javascript in the place of the text!  You could, if you want, have it say onMouseOver=”Alert(‘Your Moused Over’);”.  You see in that example that I used a different quote sign for the text within the alert.  This is because the browser will execute anything within any matching set of quotes as the text, after that it will assume that is part of more code.  If we were to order it as onMouseOver=”Alert(“You Moused Over”);” it would think onMouseOver equaled Alert( and then process the next text as a continuation of the object definition.  It may seem complex, just remember to be careful nesting your quotes, never break them up.  The common way to nest the quotes is to put the double quotes on the outside and single quotes on the inside ( “ ‘text‘ “ ) though both should work ( ‘ “text“ ‘ too).  If you find yourself in a situation where you need a third set of quotes you can use the javascript command ".  The browser will read that as a double quote when it executes that code so you should be fine ( “ ‘ "text" ‘ “).

Another thing you may notice is that all of the Javascript code seems to be ending with a semicolon ‘;’.  This is there to tell the browser that this is the end of that line of code and to prepare to execute another line.  If your code isn’t working correctly be sure to check for missing semicolons, it’s cause too many headaches in my code to count ;).

As an example of the javascript you’ll see above that the example we’re working off of has an onMouseOver event set to run the code ShowCard(‘Card1’,1).  This is a function that was defined earlier in the page and is just being called with the text Card1 and the number 1 as variables for it to reference.  We don’t need to know the details of exactly what this does, it’s just a good tool for reference.  Looking at the <div> object we se that it has an id set as “Card1”.  If we need to, we can reference this with the javascript command

document.getElementById

which in this case we’ll format as

document.getElementById(‘Card1’)

where Card1 is the id of the element you getting.  This returns the whole object <div id="Card1"><img src="images/cards/ze/swamp.jpg"></div> .  If we want to reference anything within this object we can just put a period after the line we typed and use that extension.  In this case we can use the .innerHTML command to call upon the text within the <div>…</div> command.  Using our example again

document.getElementById(‘Card1’).innerHTML

would return ‘<img src="images/cards/ze/swamp.jpg">‘.  If we wanted to change this text all we would have to do is put an ‘=’ sign after it and put the text we want to it be.  This would come out to be something like

document.getElementById(“Card1”).innerHTML=”<img src=’images/cards/ze/island.jpg’>”;

Notice a couple things in this, the use of nested quotes and the ending in a semicolon that we mentioned.  This javascript will modify the code of the webpage as it is executed and write the text in where you told it!  But how do you actually go about executing it?  Like I said before, you need to have it executed within the text of an HTML command.  The best results I’ve had has been with the ‘onload’ property which can be used within an img object.  I usually create a picture at the beginning of the post with

<img src=”images/clear.gif” onload=”script”>

If you put the text we made up a minute ago in here you’ll get

<img src=”images/clear.gif” onload=”document.getElementById(“Card1”).innerHTML=”<img src=’images/cards/ze/island.jpg’>”;”>

See any problem with this?  The nesting on the quotes is off, using the instructions I gave on nesting quotes you can format it to look like this

<img src=”images/clear.gif” onload=”document.getElementById(‘Card1’).innerHTML=’<img src=&quot;images/cards/ze/island.jpg&quot;>’;”>

This text will change the popout picture for the card to be an island instead of a swamp.  You can reference pictures from outside of the current website if you wish, this lets you load the picture from a site that have a more up to date database of cards.  This is how that works

<img src=”images/clear.gif” onload=”document.getElementById(‘Card1’).innerHTML=’<img src=&quot; http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=206072&type=card&quot;>’;”>

Whew that was a lot, you’ve learned some very basic HTML and Javascript and how to use it to modify a page on your post, but how to you implement it in your post, you need to be sure you click on the HTML button at the top of the textbox.  Be sure you DON’T do this until you’ve finished typing the text for your post we’ll do one last small example for proof.  Type your text

This is my Post.

Isn’t it Great!!!

Click on the HTML button up top and you’ll see the text change to this:

<P>This is my Post.</P><P>Isn’t it Great</P>

Add your html and javascript at the start of this text and you’ll get something like this:

<img src=”images/clear.gif” onload=”document.getElementById(‘Card1’).innerHTML=’<img src=&quot; http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=206072&type=card&quot;>’;”> <P>This is my Post.</P><P>Isn’t it Great</P>

It looks like a lot of confusing text, but it’s all stuff we’ve gone over and easily understood if you think of each part individually.  This text should be fully functional on a comment post, but there are other issues with making these changes with an initial combo posting.  This tutorial will instruct you how to modify your original post or add a comment to modify the popout.  I will use another thread to go over more advanced topics like changing the text on the link using the document.links command and how to implement logic commands like the For and If statements.  If you have any questions about this all, just comment below.  Later I will create a popout object for this thread for you to play with in the comments ;)