[Solved] multiple images as a tooltip

[nana]

Hi there, from the demo i can load the tooltip image.
but what if i have more than one image?
how should i code for the js?
pls help as i hav no idea for the js things.
Thanks a lot

here is my code:

HTML Code

<ul id="c-title">
   <li class="c-01">Test1</li>
   <li class="c-02">Test2</li>
   <li class="c-03">Test3</li>
</ul>

JS Code

<script type="text/javascript">
$(document).ready(function() 
{
   $('#c-title li.c-01').qtip({
      content: '<a href="http://google.com"><img src="images/campaigns/c-01.gif" alt="" /></a>',
	  position: {
	  	 corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}
	  },
	  show: { when: { event: 'click' } },
	  hide: { when: { event: 'unfocus' } },
      style: {
      	padding: 0,
		border: 0,
      	background: 'transparent',
      	textAlign: 'left'
	  }
   });
});
</script>

[Craig]

Try using a .each() loop nana,

JS Code

<script type="text/javascript">
$(document).ready(function() 
{
   $('#c-title li.c-01').each(function() {
		var url = 'images/campaigns/' + $(this).attr('class') + '.gif';
 
		$(this).qtip({
			content: '<a href="http://google.com"><img src="' + url + '" alt="" /></a>',
			position: {
				corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}
			},
			show: 'click',
			hide: 'unfocus',
			style: {
				padding: 0,
				border: 0,
				background: 'transparent',
				textAlign: 'left'
			}
		});
	});
});
</script>