[Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2012-09-21
Medium Priority
Last Modified: 2012-09-24
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">

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

Open in new window

Please help with the jquery
Question by:tia_kamakshi
LVL 38

Expert Comment

by:Tom Beck
ID: 38421532
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.
LVL 83

Accepted Solution

leakim971 earned 2000 total points
ID: 38421604

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month20 days, 12 hours left to enroll

865 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question