Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

probably an easy question...

Options
  • 15-08-2007 10:23pm
    #1
    rubastar
    Closed Accounts Posts: 21 ✭


    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.


Comments

  • Options
    #2
    nude_hamster
    Closed Accounts Posts: 161 ✭✭nude_hamster


    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?


  • Options
    #3
    rubastar
    Closed Accounts Posts: 21 ✭rubastar


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


  • Options
    #4
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell 


    <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


  • Options
    #5
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell 


    <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


Advertisement