A few problems/questions...

chemacky · September 14, 2011, 02:44:22 AM

Hello!

I'm trying to make a website for my girlfriend's birthday for her (soon to be started) jewellery business... where she makes the jewellery. The problem is, I have very little experience and even less knowledge.

I decided to start with a template, which seemed to be a good way to get something that looked nice... and reasonably professional.

What I've ended up with, and am reasonably happy with so far can be found at http://www.jewellerytest.net84.net/

Ok, so what I'm trying to do is pretty intuitive really. I want the semi-navigation-type buttons on the site to more or less do what you'd expect them to do. So the up and down buttons circled here:

would scroll up and down through a number of different pictures of rings... this number would grow as she made them. With only four visible at a time. The only way I could conceive to do this is to load an entirely new, similar page each time... which is not a very good way at all. Can anyone help?

Similarly, I want to be able to make the buttons circled here:

To not necessarily scroll... but just toggle to the next picture (from the vertical bar) in order. Again, I can only think to load a new page each time. Can anyone help me with a better way?

Perhaps with frames? Though from what I can remember (as I don't seem to see them anymore.. or maybe I don't notice) frames are pretty ugly.

Lastly, I'd want it to work so as when a picture was selected from the vertical scrolling bar, it would then become the large picture. How would I got about doing this?

Here is my current code:

Code Select


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body><div id="content"><div class="inner_copy"><a href="http://www.site2you.com/">Website Builder</a> <a href="http://www.freetemplatesonline.com/">fto</a> <a href="http://www.websitetemplates.org/">websitetemplates.org</a> <a href="http://www.webdesign.org/website-design">Website Design</a></div></div>
<table width="766" align="center">
<!--header-->
<tr><td class="bgr_logo"><a href="index.html"><img alt="" src="images/logo.gif"></a></td></tr>
<tr><td class="menu"><img alt="" src="images/m_left.jpg"><a href="index.html"><img alt="" src="images/m1.jpg"></a><a href="index-1.html"><img alt="" src="images/m2.jpg"></a><a href="index-2.html"><img alt="" src="images/m3.jpg"></a><a href="index-3.html"><img alt="" src="images/m4.jpg"></a><a href="index-4.html"><img alt="" src="images/m5.jpg"><img alt="" src="images/m_right.jpg"></td></tr>
<tr><td><img alt="" src="images/img_under_menu.jpg"></td></tr>
<!--content-->
<tr>
	<td class="size_heit"><table style="height:100%">
		<tr>
			<td class="bgr_left"><img alt="" src="images/img_left.jpg"></td>
			<td class="bgr_content"><table>
				<tr>
					<td width="256"><table class="box_foto1">
						<tr><td class="bgr_big_foto1 size_foto"><a href="#"><img alt="" src="images/button_1.gif" class="indent_button"></a><a href="#"><img alt="" src="images/button_2.gif"></a></td></tr>
					</table></td>
					<td><table width="91" style="margin-top:3px;">
						<tr><td><a href="#"><img alt="" src="images/button_top.jpg"></a></td></tr>
						<tr><td class="indent_foto"><a href="#"><img alt="" src="images/1f1.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f2.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f3.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f4.jpg" width="83" height="83"></a></td></tr>
						<tr><td><a href="#"><img alt="" src="images/button_bottom.jpg"></a></td></tr>
					</table></td>
					<td><table class="indent_content">
						<tr>
							<td class="wrapper_content"><table>
								<tr>
									<td style="height:294px;"><table class="txt_indent">
										<tr><td style="height:25px;"><img alt="" src="images/1title2.gif"></td></tr>
										<tr><td><strong>New Projects!</strong> <br>Here are my newest projects, or <a href="#">click here to view all</a>.</td></tr>
										<tr><td><img alt="" src="images/line_x.gif" style="margin:8px 0 10px 0;"></td></tr>
										<tr><td style="height:25px;"><img alt="" src="images/1title3.gif"></td></tr>
										<tr><td><img alt="" src="images/1f6.jpg" width="69" height="69" class="img_indent">
											<strong>DD/MM/YYYY</strong><br><br style="line-height:5px;">
											<strong>New Pendant! </strong><br>Commissioned by a young man to preserve an old family antique for his mother!<img alt="" src="images/bull_1.gif" class="bull">
										</td></tr>
										<tr><td><img alt="" src="images/1d1.gif" style="margin:5px 0 5px 0;"></td></tr>
										<tr><td><img alt="" src="images/1f5.jpg" width="69" height="69" class="img_indent">
											<strong>DD/MM/YYYY</strong><br><br style="line-height:5px;">
											<strong>Good things come in threes! </strong><br>A set of three rings - all bought as presents!<img alt="" src="images/bull_1.gif" class="bull">
										</td></tr>
									</table></td>
								</tr>
								<tr>
									<td class="bgr_form"><form id="form" action="" enctype="multipart/form-data" name="form"><table>
										<tr><td style="height:24px;"><img alt="" src="images/1title1.gif"></td></tr>
										<tr><td class="f1"><input type="text"><a href="#" onClick="document.getElementById('form').submit()"><img alt="" src="images/button_go.gif"></a></td></tr>
									</table></form></td>
								</tr>
							</table></td>
						</tr>
					</table></td>
				</tr>
			</table></td>
			<td class="bgr_right"><img alt="" src="images/img_right.jpg"></td>
		</tr>
	</table></td>
</tr>
<!--footer-->
<tr><td class="footer_bgr">© 2011 Dorothy Peisley.  All rights reserved</td></tr>
</table>
</body>
</html>

Thanks for baring with me on this, and I would appreciate any help at all!

Cheers!

Ps. I'm aware of the typo's on the site

Webhelpforums · September 14, 2011, 07:34:54 AM

Either you will have to preload a lot of pictures using Javascript or use AJAX (also Javascript, just dynamicly fetches data as necessary) to make scrolling work well. I would recommend you stay away from Flash and frames if possible. Ideally your website should also work okay without Javascript/Ajax (i.e. but scrolling would work for humans using just somewhat modern browsers)

Hopefully someone can help you, but otherwise consider using WordPress with a shop/store theme + possibly a gallery plugin

A few problems/questions...

chemacky

Webhelpforums