What technique to use?

alloydog

New Member
This is more of an "I wonder..." type of question, as opposed to "I need help with.."

For one of my military history websites, I would like to have a "time-line" image with click-able links to the relevant pages.

I was thinking of using HTML image map to mark the points where the links are.

I know it would be a lot of typing, but I'm pretty comfortable with image maps, so they're nothing new.

Other than Flash, for which I have no experience nor the tools to do. Anyone have any other suggestions of ways to do this.
 

Edge

Member
I think that what you propose i.e. HTML image map to mark the points where the links are - is probably the easiest way to do it. I mean you could go down another route using jQuery, CSS and a bit of code to have a content managed timeline but which excites you more doing the code or having a timeline?
 

alloydog

New Member
but which excites you more doing the code or having a timeline?

Learning something new - doing the HTML image map is easy, as I have done that before. But most of my skills are limited to HTML and CSS. I don't have the facilities to work with Flash, so I wondered what else there was to do what I wanted.

I find I learn things better when I have a real need for them. That's why with most coding tutorials, I rarely get past "Hello World"... :rolleyes:

I will give jQuery a bash.

Cheers chaps!
:D
 

Phreaddee

Super Moderator
Staff member
Enjoy, and stay away from image maps.
Its not 1998 anymore, the world has changed, and so has the internet.
Image maps were all the rage when html3.2 reigned supreme...
 

alloydog

New Member
Been looking into this more. From what I gather, all techniques: HTML; jQuery; PHP, will need loads of coordinates and loads of typing. But the differences are:

HTML - runs on client browser, may not work on all browsers? (though virtually no-ones uses IE6 or worse any more...) and, as pointed out, soooo 90's

jQuery - runs server-side, but needs to link to either jQuery site or install library on own server (latter is really not an option)

PHP - runs server-side and server has PHP.

Currently the background image is about 13330px by 400 px (yup, 13,330px!) - 1px per day, covering 35 years...
 

Attachments

  • timeline_wrk.jpg
    timeline_wrk.jpg
    2.1 KB · Views: 119

alloydog

New Member
In the end, creating the image was more work than it was worth... I just made a table with HTML & PHP.
But, when using the scroll-bar, the contents of the div move pretty quickly - even hurts my eyes! I now need to try and slow it down.

Ideally though, I'd like it so that you just click on the table and drag it left or right, rather than use a scroll-bar.
 
Last edited:

ronaldroe

Super Moderator
Staff member
jQuery - runs server-side, but needs to link to either jQuery site or install library on own server (latter is really not an option)
QUOTE]

jQuery is just a javascript library that you load like any other script, and it runs client-side, not server-side. No installation or anything. Then, you just drop the jQuery plugin in the same directory as the page and load that script as well (probably will also be some CSS, but that works the same as well).
 

alloydog

New Member
The table & scrolling div seem to work OK, but are pretty basic.

When you get to one of the History pages, the content of the Timeline (done before FB...) is, naturally, at the most left, that is starts from Aug 1943: see page http://www.satans-kittens.net/45to50.php for example.

example1.png


What I would like, is that the main event title, in the top row of the table/Timeline that matches the page title is centred in the scrolling div like this:

example2.png


I have tried with adding id values to the titles in the table, then making the link /pagename#id but then the title in the table is hard over to the right.

I have started learning PHP, and have tried searching for a solution but all the results I get seem to be about centring divs and tables. I have also tried asking on PHP forum, but got no answers.

i guess, to word it right: I want to centre a specific cell in a div. The cell is not necessarily the centre cell of the table, and the content overflow the div boundaries.

any ideas?

thanks.
 
Top