What technique to use?

Discussion in 'Web Design' started by alloydog, Jan 16, 2012.

to remove all ads.
  1. alloydog

    alloydog New Member

    Messages:
    36
    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.
     
  2. conor

    conor New Member

    Messages:
    348
    You could just use css. Create a wrapper div and set a background image to it. Inside that div add links and position them using css. Here's an example I found on stackoverflow:

    http://jsfiddle.net/DBvAY/1/
     
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I agree with conor on the CSS. However, in the interest of options, jQuery is another option.
     
  4. Edge

    Edge Member

    Messages:
    461
    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?
     
  5. alloydog

    alloydog New Member

    Messages:
    36
    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
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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...
     
  7. alloydog

    alloydog New Member

    Messages:
    36
    What!? It's not? :eek:
    Does that mean I have to lose the perm and muscle-shirt...?
     
  8. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Probably... :)
     
  9. alloydog

    alloydog New Member

    Messages:
    36
    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...
     

    Attached Files:

  10. alloydog

    alloydog New Member

    Messages:
    36
    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: Apr 21, 2012
  11. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
     
  12. alloydog

    alloydog New Member

    Messages:
    36
    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.

    [​IMG]

    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:

    [​IMG]

    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.
     

Share This Page