This is a simple little image viewer i wrote for javascript enabled browsers. I prefer to do everything out of my browser so I wrote this up. I figure, I could share it with you. It actually works :). It can take built in pics from an array or a custom url. Hope you have fun with it!
<html>
<head>
<script type="text/javascript">
var imagesources=[
"circle-with-slash-300x300.png", //These are example pictures in an array
"svg.png", //replace these 3 with your own pictures
"Nancy_and_Landon's_Hearth.gif"]; //You can use more than 3 pictures
function changepic(i){
document.getElementById("image").src=imagesources[i]; //lets you choose pics from array
document.getElementById("image").src=document.picselect.submit2.value; //lets you use URL option
}
</script>
<style type="text/css">
h1 /* Just some style for a little finess */
{
text-align: center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:300px;
border-style:solid;
border-width:5px;
padding:15px;
background:#CCCCCC;
}
img{
width:300px;
}
</style>
</head>
<body>
<h1>Image viewer</h1> <!--Title-->
<div class="center">
<img id="image"src="circle-with-slash-300x300.png"/> <!--put start image here. Should be first in array.-->
</div>
<form name="picselect" class="center"> <!--starts form-->
<input name="submit1" type="button" onclick="changepic(document.picselect.number.value)" value="Change"> <!--change picture button-->
<select name="number"> <!--start drop down list-->
<option value="0" id="select" selected="selected">Circle with slash</option> <!--Values here should be in sync with array-->
<option value="1">svg</option> <!--Change the names in between option tags to suit images-->
<option value="2">3d</option> <!--Add more options if you have more pictures-->
</select>
<br>
URL:<input id="no" name="submit2" type="text" value=""> <!--Url form-->
</form> <!--Closes Form-->
</body>
</html>