I have have an image viewer which contains a thumbnail and an enlarged picture. How can i have next and previous text which will move on to more pictures. See attached images (both).
This is what i have for the image viewer:
Any help will be appreciated.
This is what i have for the image viewer:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <style type="text/css"> img { border: 1px solid #000 } #container { text-align: center; border: 0px solid #000; margin: 0 auto; height: 300px; width: 600px; padding: 20px } #leftcol img { margin: 10px; width: 100px; height: 100px } #rightcol img { margin: 10px; width: 200px; height: 200px; } </style> </head> <body> <div id="container" style="width: 859px; height: 520px"> <div id="rightcol"> <img name="ImageOnly" src="firstimage.gif" width="350" height="350" /> <p> </div> <div id="leftcol"> <a href="#" onclick="ImageOnly.src='image1.gif'"> <img src="image1.gif" width="350" height="350" /></a> <a href="#" onclick="ImageOnly.src='image2.gif'"> <img src="image2.gif" width="350" height="350" /></a> <a href="#" onclick="ImageOnly.src='image3.gif'"> <img src="image3.gif" width="350" height="350" /></a> <a href="#" onclick="ImageOnly.src='image4.gif'"> <img src="image4.gif" width="350" height="350" /></a> <a href="#" onclick="ImageOnly.src='image5.gif'"> <img src="image5.gif" width="350" height="350" /></a> <a href="#" onclick="ImageOnly.src='image6.gif'"> <img src="image6.gif" width="350" height="350" /></a><br /> </div> </div> </body> </html>
Comment