July 12, 2010
Basic HTML/Javascript – Creating an Image Navigator – How to dynamically load images?
Question by mireille raad
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 by Starx
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");
}
});
});
