Show content using ajax on click of image co-ordinates and relevant section is displayed

Hi Experts,
 
 I am working on ASP.net2.0 application using C#. Html 5.0 version used in this project.
 
 I have a image where co-ordinates are defined and click on each co-ordinates of image corresponding section data should be visible.
 
 for example if #service is clicked section "<section class="service">" should be displayed.
 if #new_generation is clicked then section <section class="new_generation"> should be displayed.
 
 and it should load using ajax.
 
 
<section role="parallax" class="parallax cf">						
	<map name="home_menu">
		<area class="selected" shape="poly" coords="140,0,0,105,85,105,225,0" href="#supplier" alt="SUPPLIER">
		<area shape="poly" coords="227,0,87,105,172,105,312,0" href="#service" alt="FULL SERVICE CARRIER">
		<area shape="poly" coords="314,0,174,105,259,105,399,0" href="#new_generation" alt="NEW GENERATION AIRLINE">
		<area shape="poly" coords="401,0,261,105,346,105,486,0" href="#air_freight" alt="AIR FREIGHT CARRIER">
		<area shape="poly" coords="488,0,348,105,433,105,573,0" href="#charter" alt="CHARTER AIRLINE">
		<area shape="poly" coords="575,0,435,105,520,105,660,0" href="#cargo" alt="CARGO & LOGISTICS COMPANY">
		<area shape="poly" coords="662,0,522,105,607,105,747,0" href="#hotel" alt="HOTEL GROUP">
		<area shape="poly" coords="749,0,609,105,694,105,834,0" href="#events" alt="EVENTS ORGANISER">
	</map>
</section>


<section class="home_menu_tabs">
	<section class="supplier selected"></section>
	<section class="service">
		Service Content Here comes from database, should loads using Ajax
	</section>
	<section class="new_generation">
	New Generation Content Here comes from database, should loads using Ajax
	</section>
	<section class="air_freight"></section>
	<section class="charter"></section>
	<section class="cargo"></section>
	<section class="hotel"></section>
	<section class="events"></section>
</section>

Open in new window



Please help with the jquery
tia_kamakshiAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
0
 
Tom BeckCommented:
This question has kind of a split personality. The posted markup would indicate the image map and the content sections together on one page yet you want the sections to display using ajax.

If they were truly displayed using ajax, the content for each section would be on its own html page. Then you could pull in the required section page into a container on the image map page using ajax or you could load it in an iframe.

If the content in the sections is not very extensive, you could just mark it all up on the same page and set each section to display:none then expose each section as required in a container positioned below the image map.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.