 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Pokemon
Pokemon True RumersPokemon FutureSquirtle Adoption Centerclick here if you dareCool PictursWebringsPokemon SlotPokemon YellowGold and Silver GamesWin A PikachuSquirtlezonex BagesPokemon Maze NewPokemon Word Sherch NEWWith PokeGodzMy PokeDexMessage Bords
SquirtleZonex BordPokemon Cheats And Codez
HM06 CodeAll The Cheats And CodezPokeGodzWeaird PokeGodzMewThree CheatMew CheatPokeGod CheatsChrona MewMistStone CodeMistStone CheatHouou CheatPokemon Moives
Pikachus Summer VacationThe CardsMewtwo Strikes BackStorys
The Story of the SquirtleSquadansers
Why you are stuck hereYou nead help you page go herefree
do you want one of my webpagesstuf
A Free GameSquirtlezonex bannersthe battle
Pokemon to battle withSites
Other Sitesmy brother linkcashcodecenterledgeny gymVoat and Get Good Cheats
My AwardsVoating
Things To Voat ForWebrings
Squirtle Zonex Webringupdate
update site|
|
| ||||||
| On January 1st, 1998, I went to my handy dandy little counting program to see how many people had stopped by my site. I rolled through the numbers until I got to the last little block of statistics. Those are the percentages of browsers coming to the site. Netscape had ruled the roost for the entire run of HTML Goodies until that day. Microsoft Internet Explorer: 52% Earlier in December of 1997, CNN Interactive listed the top ten most popular future Internet items. Microsoft's Explorer 4.0's Dynamic HTML led the pack. Of course, to be really cool, you refer to it as DHTML. I've also been told to be really, really cool, you can no longer say WWW. You must now proclaim Tri-W. -------------------------------------------------------------------------------- What Is DHTML? It's actually a little tough to get a handle on because it's beginning to mean different things to a few different people. The actual term stands for Dynamic Hypertext Mark-Up Language. That's obvious. The essence of the term stands for almost any coding that creates movement or interactivity by employing the standards of the 4.0 level Netscape and MSIE browsers. But there was movement before with animation and interactivity with forms... Yeah, see... that's the rub. For something to be considered DHTML it has to employ version 4.0 browsers. Again, an argument I've heard is that DHTML is only viable if it occurs within the Explorer 4.0 browser. I've heard DHTML discussed as being PowerPoint for the Web. On the other hand, some people have stated that DHTML includes Netscape's Layering Commands. The best description I can offer is that DHTML is any combination of Style Sheets, JavaScript, Layering, Positioning, and Page Division (see the Positioning tutorial for more on this), at the 4.0 browser level, intended to create movement or user interactivity. Okay, so it's not the "future of the Internet" public-relations-driven description given on the Microsoft DHTML Web page, but it's probably pretty close. -------------------------------------------------------------------------------- An Example of DHTML You learn by doing, so let's take a look at DHTML in action. Remember back in primary school when you were given three pegs, round, square, and triangle, and you were told to put them in the correct holes on a peg board? If you did it right, you were off to Harvard. Mess it up, and no warm milk at nap time. This is that same test in DHTML. You'll have to be running MSIE 4.0 at this point. Go Take the Test Now that's pretty slick. With a little thinking time, you can see the applications. Make a plan for your office, landscape a plan for your yard, a Virtual Mr. Potato Head for kids, etc., etc. -------------------------------------------------------------------------------- How Do You Get It To Work? Okay, let's tear it apart. This is a combination of a simple JavaScript (I was lucky enough to find at the WROX Home Page), some image positioning and page division, and a few Style Sheet commands. By the way, if you haven't already gone, head to the WROX Home Page. They offer some great examples. Plus they are quite generous in their samples. You can get 15 ready-to-go DHTML items in a Zip packet download. The Script It's actually two scripts. The first allows the three images to be moved and the second disallows the main image to be moved. Here it is. You can copy and paste it from here. -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- Take that and paste it in between your commands. The only change you might want to make is the name of the item that will remain in place. I called mine "Playboard." You can see that about four lines up at the start of the second script. If you change the ID name of the item that stays put, you'll need to change it in the script, too. -------------------------------------------------------------------------------- Get The Images This little deal only has four images. If you want, you can add as many as you like (there doesn't appear to be an upper limit), but you might run out of floor space. Here are the four images used in this example: [stage.gif] [circle.gif] [square.gif] [triangle.gif] Grab them right from there if you'd like. The Playing Field Here's the code that was used to place the images on the page. --------------------------------------------------------------------------------     -------------------------------------------------------------------------------- It looks a bit daunting right now, but stay with me here. I'll get you through it. Line One -- The Page Division Here's line one: You didn't know this at first, but the game you played had boundaries. You were playing on a set "section" or division of the page. That's what the command stands for. You are blocking off a section of the page. Please also notice the command at the end of the block of text above.Okay, you've set aside a section of the page, but how much of a section? Now we get into positioning using Style Sheet commands. I also touch on this a bit in the Layer tutorials. Here's What's Happening DIV states this is a division of the page. id=OuterDiv states this is the outer parameter of the game. style= denotes that what follows are Style Sheet commands. position:relative; denotes that this division's position is relative to the other items it will contain. width:100%;height:400px" states that the width of this division is 100% of the width of the screen and 400 pixels high. The Images The images are all placed on the page in basically the same fashion, so I'll only go over one. Here's the command to place the large stationary image on the page: Here's What's Happening IMG means it's an image. ID="playboard" is a name I gave the image. Remember that since this one is stationary, it is affected by the second script above, so the IDs must match up. STYLE= indicates the style commands coming up. position:absolute; means that the image will be positioned exactly where I say to put it. TOP:83pt;LEFT:142pt is the exact location of the upper left-hand corner of the image -- 83 pixels from the top of the browser screen and 142 pixels from the left of the browser screen. width: 300px; height=150px; are the width and height of the image that will display. Z-INDEX:2; is another positioning element. Notice its number is lowest of the four? Thus it will be the lowest level of this. In other words, items will go on top of it. SRC="stage.gif" is the name of the image. Each of the images above are done the same way. The only differences between the commands are the ID names and names of the images, of course, and the positioning pixel numbers. Remember that you must make allowances for these positions. When you state that positioning is absolute, if there is text or another image in the way -- tough! The position is absolute and other items will be covered up. -------------------------------------------------------------------------------- That's It! You're Done Place the JavaScripts above between the commands and the block above between the commands, run it in MSIE 4.0, and you should be good to go. -------------------------------------------------------------------------------- Additional DHTML Examples [Example #2 -- A Video Game] [Example #3 -- PowerPoint Transitions] [Example #4 -- Folder Trees] [Example #5 -- Moving Note Cards] [Example #6 -- Color Changing Text Links] [Example #7 -- Button Color Flips] -------------------------------------------------------------------------------- Where From Here? This is only the first of what I hope to make many DHTML tutorials. Believe me, they get a lot more daring than this. However, I am finding that DHTML on the Net is not as loopy goofy as you'd think. People who are putting these little deals together are beginning to offer them in much the same way Applets and JavaScripts are being offered, as self-contained copy-and-paste deals. Just make sure you have permission to take from the page that has the DHTML. If you have a DHTML model that you think would make a good tutorial, let me know. If it adds to the discussion, I'll share it with the world. I'd like to get five to seven DHTML examples showing different areas of the craft. I figure that if someone gets through five tutorials on my site, he or she won't have much trouble implementing DHTML from elsewhere on the Web. But first, here are a few great links to get you further along in the process: Microsoft's DHTML pages |
 Sign Guestbook |
 View Guestbook |
 PokemonDogz@aol.com |
|
. |
| Visitors: 00613 |