Basic HTML/Javascript - Creating an Image Navigator - How to dynamically load images ?

Question

Hello guys,

I am buidling a small image navigator where the user inserts an image number and it has to load in the page so he can view it and do some processing on it later.

The images will be physically named 1,2,3,4,5.jpg for example.

Any quick code that i can use to make the corresponding image load

I know this is fairly simple - but i am pretty tight on deadline and would appreciate some code that works

thanks a lot in advance

Answer 1

OK, use jquery. It is easy

Here is an example

HTML

<input type="text" id="imagenum" />
<a href="#" class="viewimage">View Image</a>
<img class="previewimage" src="">

The Script

$(document).ready(function() {

       $(".viewimage").click(function() {
          $(".previewimage").attr('src', "imagetopath\"+$("#imagenum").val()+".jpg");
       });

       //To catch the enter key
       $('#imagenum').keypress(function(event) {
          if (event.keyCode == '13') {
               $(".previewimage").attr('src', "imagetopath\"+$(this).val()+".jpg");
          }
       });

});

Answer 2

<img src="<?php print $ImgValue; ?>">

seems to work as an alternative to JQuery.

any other solution ?