Whats the best way to rotate images after a user interaction

Question

I'm wondering what would be the smoothest way to change an image on a web page after a user action. E.g Say a listbox contains a list of book titles. each time a user clicks on a title I want the book cover associated with that title to display in a panel. The data in the listbox is from a dataset which also contains images for each row.

Do, I have to post back each time the selectindex in listview changes or is there a nice quicker way using ajax or a even jquery. Im using visual studio 2005 and c#

Any code examples are much appreciated

Many thanks

Tony

Answer 1

Hello Tony;

you can create a web service that returns the path of book cover image and you can load your image to an html image control simply by calling that web service either page methods or jquery.

then you might have to load your book list with that web service as well.

here are a couple of links that u can have a look

http://www.codeguru.com/vb/vb%5Finternet/webservices/article.php/c7781/ http://www.codeproject.com/KB/webservices/CallWebServiceFromHtml.aspx http://geekswithblogs.net/thanigai/archive/2009/10/30/calling-asp.net-webservice-from-jquery.aspx

http://www.asp.net/AJAX/Documentation/Live/Tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

for rotation, you can use jquery... I have got a sample at home, I can send it if you want... I am at work now:)

I hope it helps...

Answer 2

An option is to stream the image dynamically based on the URL, which means you aren't using Ajax so much, just JavaScript to change the URL of an <img> element based on the book ID of the select item, e.g. (using jQuery)

<select id="books">
 <option value="1">Book 1</option>
 <option value="2">Book 2</option>
</select>
<img id="bookCover" />

<script type="text/javascript">
 $("books").change(function(){
  var bookId = $(this).val();
  $("bookCover").attr("src", "/getbookcoverimage.ashx?bookId="+bookId);
 });
</script>

I'm obviously leaving out the bit on how to stream the image back from the server, but thats pretty straight-forward.