Navigation query

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • stevedaw
    New Member
    • Oct 2007
    • 1
    #1

    Navigation query

    Hi there Im in the process of collating quite a large collection of photographs and articles for an organisation and I have designed quite a basic layout.

    Instead of using flash to create a slideshow type of presentation, I was thinking of just using a webpage for each photo or article.

    What I am stuck with though is a way for the user to quickly move from one page to another, to navigate from one page to another in my website.

    I'm not sure how to approach this, for example a text box where the user could input a number and it would go to that page in the website. Or a page slider that could be dragged to that page?

    Is this possible using html/CSS.??

    Any comments or solutions would be much appreciated.

    Ive got a couple pages up and running at ......

    http://rpsol.ofingo.co m/

    many thanks
    david
    Tags: None
    • Ferris
      New Member
      • Oct 2007
      • 101
      #2
      hi

      you can use javascript to approach this,or,if you have a server,you can use active server page,like php.
      for a small website,I suggest you use javascript.

      I wrote an example code for you:


      [HTML]
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title>Untitl ed Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      </head>
      <script language="javas cript">
      <!--
      var images = [
      "http://www.fresnobeehi ve.com/archives/upload/2007/04/p1_beckham-SI-bruty.jpg",
      "http://www.southshield s-sanddancers.co. uk/photos_posters/david_beckham_c alendar_photo.j pg",
      "http://www.shavingstuf f.com/archives/BeckhamPhoto2.j pg",
      "http://www.theage.com. au/ffximage/2007/05/18/beckham_wideweb __470x299,2.jpg "
      ];
      var id = 1;
      function reloadImage()
      {
      document.getEle mentById("myimg ").setAttribute ( "src",image s[id-1] );
      document.getEle mentById("image id").innerHTM L = "No:" + id;
      }
      function go()
      {
      if (id >=0 && id <images.lengt h)
      {
      id = document.getEle mentById("txtpa ge").value;
      reloadImage()
      }
      else
      alert ("please input a correct number,1 to " + (images.length) );
      }
      function next()
      {
      if (id == images.length)
      id = 1;
      else{
      id++;
      }
      reloadImage();
      }
      function previous()
      {
      if (id == 1)
      id = images.length;
      else{
      id--;
      }
      reloadImage();
      }
      -->
      </script>
      <body>
      <img id="myimg" src="http://www.fresnobeehi ve.com/archives/upload/2007/04/p1_beckham-SI-bruty.jpg" />
      <div id="imageid">No :1</div>
      <br />
      <input type="button" value="Previous " onclick="javasc ript:go();"/>
      <input type="button" value="next" onclick="javasc ript:next();"/>
      <br />
      to which image?(1-4)<input id="txtpage" type="text" size="5" value="" />
      <input type="button" value="Go" onclick="javasc ript:go();"/>
      </body>

      </html>


      [/HTML]


      you can email me when you still have trouble about it.

        Comment

        Previous template Next
        Working...