Loading An image in HTML page With the help Of
jQuery AJAX, And JSP
Today, I did a program which can load an image using jquery ajax
and jsp. The HTML code will have a combo box which lists the names of some
famous personalities. The corresponding picture will be loaded when
you select a name from the combo.( the URL of the image comes from server side)
HTML file will call jsp page with selected name as an argument.
The jsp file will return appropriate url of the selected name.
Then we can load the image in image tag using jquery code as follows.
$.get("imagesender.jsp",{'combo1':s},function(r)
{
$("#img1").attr({src:r});
});
and the jsp code will be,
String r="http://localhost:8080/images/";
if(s.equals("alice")) { r=r+"alice.jpg"; }
if(s.equals("clinton")) { r=r+"clinton.jpg"; }
if(s.equals("cindy")) { r=r+"cindy.jpg"; }
if(s.equals("colin")) { r=r+"colin.jpg"; }
if(s.equals("nathan")) { r=r+"nathan.gif"; }
if(s.equals("mathew")) { r=r+"mathew.gif"; }
System.out.println(r);
out.println(r);
and also I added some code to magnify this image when hovering.
$('#img1').attr({width:250});
I found that jQuery automatically preserves the width:height ratio!
**************************************************************************
