Image Viewer

By wade2462 on Apr 04, 2010

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>

Comments

Sign in to comment.
Korvin   -  Jul 11, 2010

Would be nice if the value didn't need to be different, for easy php generation, this could be done by setting all of the options into an array.

 Respond  
wade2462   -  Apr 04, 2010

Ach my comment got all screwy.

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.