probably an easy question...

rubastar · 15-08-2007 9:23pm #1

ok so I don't really know anything about web design but have been playing around with dreamweaver over the last few days and have been stuck on something for a while. basically I want a page where I have a photo on it, underneath the photo I want to put an arrow that when clicked, a new photo appears in place of the old one. when the arrow is clicked again it moves onto another one etc. any time I try it, it either opens a new page with the photo in it which I don't want as I want everything to stay the same except for the photo, or the photo changes to the next one when it is rolled over rather than when the arrow is clicked. Make sense?

Can anyone help-sorry if its a basic question.

nude_hamster · 15-08-2007 9:55pm

this a bit more complicated than just normal html,

you could when you click the next button you could open a new page with the picture hard coded, meaning you would have to create many pages , actually you would have to create as many pages as you have pictures...not good idea at all.

or you could learn some javascript. Javascript can be used to change the picture without reloading the whole page. So when you click that next arrow, if will increment some counter you have and tell it to move to the next picture url you have told it to.

javascript basic lessons W3C Javascript lessons

This site may help also with what you are trying to do, but you will need basics first in javascript
Javascript Photo Viewer

make any sense at all?

rubastar · 16-08-2007 11:20am

looks yuk! thanks for the link, will have to get started on that.

ron_darrell · 16-08-2007 3:28pm

<html>
<head>
	<title>Test image jumper page</title>
	<script>
		var cur_pos = 0;

		var the_image = new Array();
		the_image[0] = "art/flower.gif";
		the_image[1] = "art/brick.jpg";
		the_image[2] = "art/golf.png";
 
		function move_image(dir)
		{
			switch(dir)
			{
				case -1:
					if(cur_pos == 0)
					{
						cur_pos = (the_image.length - 1);
					}
					else
					{
						cur_pos = cur_pos - 1;
					}
				break;
				case 1:
					if(cur_pos == (the_image.length - 1))
					{
						cur_pos = 0;
					}
					else
					{
						cur_pos = cur_pos + 1;
					}
				break;
			}
			document.getElementById('img_holder').innerHTML = "<img src='" + the_image[cur_pos] + "' width='400' height='300' alt='Image #" + cur_pos + "' />"
		}
		</script>
</head>
<body>
<div id="container">
	<div id="img_holder">
	<img src="art/blank.jpg" width="400" height="300" alt="blank" />
	</div>
	<div id="button_div">
		<button id="button1" onclick="move_image(-1);">Back</button>
		<button id="button2" onclick="move_image(1);">Forward</button>
	</div>
</div>
</body>
</html>

Adapt this to suit your purposes.

-RD

ron_darrell · 16-08-2007 3:28pm

<html>
<head>
	<title>Test image jumper page</title>
	<script>
		var cur_pos = 0;

		var the_image = new Array();
		the_image[0] = "art/flower.gif";
		the_image[1] = "art/brick.jpg";
		the_image[2] = "art/golf.png";
 
		function move_image(dir)
		{
			switch(dir)
			{
				case -1:
					if(cur_pos == 0)
					{
						cur_pos = (the_image.length - 1);
					}
					else
					{
						cur_pos = cur_pos - 1;
					}
				break;
				case 1:
					if(cur_pos == (the_image.length - 1))
					{
						cur_pos = 0;
					}
					else
					{
						cur_pos = cur_pos + 1;
					}
				break;
			}
			document.getElementById('img_holder').innerHTML = "<img src='" + the_image[cur_pos] + "' width='400' height='300' alt='Image #" + cur_pos + "' />"
		}
		</script>
</head>
<body>
<div id="container">
	<div id="img_holder">
	<img src="art/blank.jpg" width="400" height="300" alt="blank" />
	</div>
	<div id="button_div">
		<button id="button1" onclick="move_image(-1);">Back</button>
		<button id="button2" onclick="move_image(1);">Forward</button>
	</div>
</div>
</body>
</html>

Adapt this to suit your purposes.

-RD

probably an easy question...

Comments