Good day!

Task: there is a photograph of the form. It is necessary to implement such a scheme:

  • the form is divided into categories, for each category there is an HTML version of the page
  • clicking on a category in the image (a photo of the form) should pop up a frame with the HTML content of this category (i.e. it looks like the effect of increasing part of the image)

Tell me how this can be implemented? Where to look and what to read on this topic?

PS Maybe the question is stupid, but I have a C ++ profile and system programming, and here there is such a task :(

    1 answer 1

    Well, as an option, you can use <map>, for example:

    <img src="images/navigate.png" width="640" height="30" alt="Бланк" usemap="#Navigation"> <map name="Navigation"> <area id="link1" shape="rect" coords="10,10,100,50" href="link1.html"> <area id="link2" shape="rect" coords="10,55,100,105" href="link2.html"> <area id="link3" shape="rect" coords="10,110,100,155" href="link3.html"> </map>

    And for dynamic content loading, for example jQuery:

     $(area).click(function(){ $('#result').load($(this).attr('id')+'.html'); $('#result').show(); return false; });

    I will explain a little: return false; - so that it does not work out a standard click, and you are not thrown over the link, or you can use nohref. $ (this) .attr ('id') - it is better to use the id tag and others, because href in IE is not properly processed.

    #result - you can use css to place where it is convenient for you, above the picture or on the side, this is a separate question. Or you can use jQuery UI Dialog instead.

    • If it is suddenly incomprehensible, lay out your picture and a couple of html pieces, we will lay out a sample. - invincible
    • ncmarinescience.com is another solution. There the diva with the map has relative positioning, and the links inside are drawn with absolute positioning is also a good method. In principle, there is a simple code, but if you have questions, I will be happy to answer. - invincible