![]() Note that when you copy the next image from PowerPoint you can paste it right over the last image in Photoshop and then repeat the "Save for Web and Devices."ġ. I entered 476 into the width (it automatically set the highth as 169) and then saved it.Ħ. I used the preset of "JPEG HIGH" as anything lower made the text blur. Then select "Save for Web and Devices" under the "File" menu, in order to get as small as file as possible. When finished, copy the "element" from PowerPoint and paste it into Photoshop. You now go through them one at a time and add your images and text.ĥ. I then created 65 slides and copied the black image from the first slide and pasted it on to the other slides. After doing a few tests I determined that the best size for my table was 476x169.ģ. I copied and pasted it into PhotoShop (you can use about any image editor). Actually I made it white the first time so when I tested it in the table I could see how it fits. I first created the black image in PowerPoint. The pictures and text that pop up when you hoover over an element were put together in PowerPoint.Ģ. That is, it starts on the top and works left to right.ġ. If you look through the code, the table is in numerically order with the images through. The first cell in the table is on line 45 and is for the element "Learning." If you read through the line it has the command "onmouseover" and tells the PC to replace the black image (blk.jpg) with, which means "1.jpg".Ĥ. The periodic table of course is done by using html table code. Thus the code tells the PC to preload the black image first and then in order, the other 65 images.ģ. And if you do change them, they have to be in order. Basically, the only thing you have to change is the line that starts with "preloadimages". The javascript is on lines 24 to 37 in the html file. Its all done in HTML with a little bit of javascript.Ģ. The exception is a couple of pictures that belong to me, such as the Sound Wave drummer, forklift, charts, and the computers on the desk (feel free to reuse them), and a couple of Army pictures (7 and 36).ġ. Note that most of the pictures I got from, thus you can't reuse them. This is the cascading style sheet that tells the html file how to display some of the text. The html source code file - periodic.htmlĤ. ![]() If you use a different color background, white for instance, then you want to recolor this white.ģ. This is the picture that is replaced by one of the other 65 jpg files when you hoover you mouse over it. Of agile learning that pop up when you hoover over an element).Ģ. jpg files number 1 to 65 (these are the pictures and texts of the 65 elements If you want to play around with the code, go toġ. I hope you enjoy it as much as I did creating it! - Don Thus it is probably more like a matrix than a true periodic table, but I claim poetic licence. The columns basically keep to the same theme. It differs somewhat from the normal periodic table as the main group is the far left column and then the major themes (sub-elements) of each major element is listed in the row next to it. So I decided to create a Periodic Table of Agile Learning: I was going to close this series out with a mind or concept map of agile learning but after a few attempts I decided that there must be a better way besides, been there and done that.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |