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

Posted on 2012-09-21
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
    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 81

    Accepted Solution


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
    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)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now