asked on

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

Tom Beck

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.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial