I’ve spent most of my last few months working on a project for the new ISU Extension Collection. The basic layout sounds simple enough: create a timeline for the important dates that this particular collection focuses on. The dates were not too far apart: 1900-1924. I’ve have seen a lot of web pages that incorporated timelines and I was excited to add this new skill to my tools. I did an online search of “timelines,” and got a whole gamut of ideas and tools. I also started to see a basic pattern to all these timelines:
Google also has a timeline program. It is very similar to the High Tech version, only with a light background. But, as with most of these programs, you need to upload your information and it gets stored their servers. What happens if something happens to that program in the future? Also, all of these options take up the whole webpage to display the timeline. I wanted a timeline that was incorporated into the rest of my page, a piece of a larger puzzle on the page.
I decided to get a little more creative and put a timeline on an actual image. I had the image already in hand. I just needed a part of that image turned into a timeline, while the rest of it linked to other pages. As it turns out, there is no easy way to create a timeline on image, (I suppose if you were a hardcore programmer with mad skills, you probably could knock one out.) I don’t consider myself a complete slouch when it comes to coding, but come on, it shouldn’t be that hard to make a timeline on a relatively straight, long image. I have a hard time believing I’m the first person who wants to do such a thing. Yet, with every link clicked, none of the code and options I came across showed me how to do this. I asked myself exactly what it was I wanted to do. Well, I reasoned that the closest thing I could think of was that I was trying to create a customizable popup, or mouseover or hover-over a place on an image. Searching for that, I found several javascript codes for making pop-ups over links and/or images, which looked pretty much like tooltips on steroids. Tooltip is an alt code you can put into your html to create an effect so that when you hover your mouse over an image or link, a little yellow box pops up after a short time, giving information.
I have created tooltips for our drop-down menus to indicate who certain significant people are. I have also created tooltips to give information about certain images on pages.
After discovering that it might be possible to create tooltips for a timeline, I became a little more excited. I’m not one to toot other people’s horns, but http://www.dynamicdrive.com/ has awesome, easy-to-use, customizable code. It’s all free, as long as you include their legal notice within your code. There are two other sources that I recommend for helping in creating web pages and learning programs: http://www.lynda.com/(NOTE: not a completely free site) and http://www.w3schools.com/(the best resource for html and css, with an added bonus of sandboxing to see effects). I cannot recommend these sites enough to help get you through common webpage issues.
So, here we go. Searching on the dynamicedrive.com site opened the door to some fantastic ideas to noodle on, but how could I get a timeline actually placed on the chosen image? What I ended up doing was way old school: I made an image map. However, I didn’t do it with Adobe Photoshop. I did it online with Easy Imagemap Generator (http://imagemap-generator.dariodomi.de). (Yes, that is actually its name… and yes, it is EASY.) You do, however, need to have Flash Player for this to work. After going to the webpage, there is an option to upload the image or insert the image link URL.
Upon doing this, it automagically loads your image. Just click +Add Area and start clicking on the image, making boxes, circles, or polygons around the areas you want to create into links. There are also buttons on this page that are marked X Clear All, and Change Image. Every time you want a new linked area, just click on the +Add Area button and move back into the image to create a new linked area. Once you are done with with all your linked areas, you will notice the code text is displayed at the bottom. You can have as many linked areas as you want; I believe I had around twenty linkable areas on my image. This is a very basic example of the code text:
<img src=”url/to/your/image.jpg” alt=”” usemap=”#Map” />
<map name=”Map” id=”Map”>
<area alt=”” title=”” href=”#” shape=”poly” coords=”134,276,150,292,122,297,111,287,119,279″ />
[…]
</map>
This is the code you will need to put into your html to make the areas you created linkable for the mouse-over pop-up box. There are many things you can do with this code to create the kind of links you want. I just selected all this code and copied and pasted it over into my html following where my image was placed on the page.
Next, I headed over to dynamicdrive.com and clicked on “Links & Tooltips.” This took me to a page with several different snippets to experiment with. Notice how after the links, it lists the browser compatibility. Remember to test your code in different browsers anyway! The one I used was suppose to work in FF, so when it didn’t, I knew I had a code error somewhere. Once I found the code I liked, I clicked on the link, and it took me to the actual code page. From there, it goes step-by-step through the process, even allowing downloading of necessary .js and .css files. My particular code did not need separate .css or .js files, so I just coped and pasted into my document. At the end of the code, there is typically a section on modifying the settings. All in all, it was a very easy way to get the code I wanted and place it in my webpage. My html code ended up looking something like this:
If you notice, since I am using an image map, I needed to tweak a few settings here and there to make the image map display the tooltip script correctly. The code I used on dynamicdrive.com was called “Cool DTML Tooltip II,” and what is there is slightly different from what I ended up using. Using it exactly as it is on that site resulted in no text popping up, even though the boxes themselves were appearing. It took me a while to figure out that i n order for the area shape to have the desired effect, I needed to put the area shape outside the ONMOUSEOVER code. (In other words, I couldn’t place it before the closing />.) Also, notice that my first area code is different from the second, and subsequent, codes. I had to do this in order for the desired effect to work in Firefox. I believe I had to do this because I had several clickable areas on one large image, instead of several smaller images all together. Whatever the reason, I did get the effect to work in the end by altering the code in this way. I changed the color of the pop-up background and text size and style in the css. (The ddrivetip used “dhtmltooltip.”) Also, you can make the tooltip linkable. I did not do this for my timeline, but it is possible.
This is an example of the final results:
In conclusion, I felt this was a better approach than the other official applications. It allowed me to customize the timeline to fit the needs of the project. It may not be a timeline in the strictest capacity, but I believe it satisfies the requirements for this particular collection.
Library and Archives Preservation 