471,605 Members | 1,614 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

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.com/

many thanks
david
Oct 23 '07 #1
1 1206
Ferris
101 100+
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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
<!--
var images = [
"http://www.fresnobeehive.com/archives/upload/2007/04/p1_beckham-SI-bruty.jpg",
"http://www.southshields-sanddancers.co.uk/photos_posters/david_beckham_calendar_photo.jpg",
"http://www.shavingstuff.com/archives/BeckhamPhoto2.jpg",
"http://www.theage.com.au/ffximage/2007/05/18/beckham_wideweb__470x299,2.jpg"
];
var id = 1;
function reloadImage()
{
document.getElementById("myimg").setAttribute( "src",images[id-1] );
document.getElementById("imageid").innerHTML = "No:" + id;
}
function go()
{
if (id >=0 && id <images.length)
{
id = document.getElementById("txtpage").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.fresnobeehive.com/archives/upload/2007/04/p1_beckham-SI-bruty.jpg" />
<div id="imageid">No:1</div>
<br />
<input type="button" value="Previous" onclick="javascript:go();"/>
<input type="button" value="next" onclick="javascript:next();"/>
<br />
to which image?(1-4)<input id="txtpage" type="text" size="5" value="" />
<input type="button" value="Go" onclick="javascript:go();"/>
</body>

</html>


[/HTML]


you can email me when you still have trouble about it.
Oct 23 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Sandy.Pittendrigh | last post: by
1 post views Thread by Marc Robitaille | last post: by
28 posts views Thread by laredotornado | last post: by
reply views Thread by Andy_Khosravi | last post: by
2 posts views Thread by 1kky | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.