Hello.

There is a code like this

<?php if ($_GET['id'] == "Bernstein") { ?> <a id="Bernstein"></a> <img src="img/stein.png"/> <?php } elseif ($_GET['id'] == "Waldstein") { ?> <img src="img/waldenstein.png"/> <?php } elseif ($_GET['id'] == "Brauberg") { ?> <img src="img/brauberg.png"/> <?php } else { ?> <strong>Безусловным</strong> "королем" строительных материалов, вобравшим в себя природную мощь и красоту, несомненно признаётся натуральный камень. <?php } ?>

The principle is this: on the main one there is a picture of the house. Right from her description. The map <map> is superimposed on the picture and when you click on a certain part of the house instead of a description, a picture appears with information about the material from which a certain part of the house is made! In general, every time the method changes, the page goes up and the wheel needs to be turned down! How to connect this with Ajax? Or how to make the page remain in the same position?

found this

 $.get("test.php", { name: "John", time: "2pm" } );

but how to use it?

3 answers 3

I can offer such a solution, but it needs to be slightly finished on the JavaScript part, because, unfortunately, I’m not very strong in it, although in this case you just need to know the basics. In each element of the area (map), create an onclick event handler as an attribute, the value of which specifies the showData () function.

Your area elements should look like this:

 <area shape="poly" coords="113,24,211,24,233,0,137,0" alt="Bernstein" onclick="showData()"> <area shape="poly" coords="113,24,211,24,233,0,137,0" alt="Waldstein" onclick="showData()"> <area shape="poly" coords="113,24,211,24,233,0,137,0" alt="Brauberg" onclick="showData()">

The code given by you should be put into a separate file (choice.php, for example), the file should be placed next to this page on the disk:

 <?php // choice.php if ($_GET['id'] == "Bernstein") { ?> <a id="Bernstein"></a> <img src="img/stein.png"/> <?php } elseif ($_GET['id'] == "Waldstein") { ?> <img src="img/waldenstein.png"/> <?php } elseif ($_GET['id'] == "Brauberg") { ?> <img src="img/brauberg.png"/> <?php } else { ?> <strong>Безусловным</strong> "королем" строительных материалов, вобравшим в себя природную мощь и красоту, несомненно признаётся натуральный камень. <?php } ?>

The following code makes an asynchronous request for choise.php, we specify it in the head element of your page.

 <script> function showData(){ var stuffName = /* описать код получения alt атрибута, элемента area*/ request = new XMLHttpRequest(); request.open("GET", 'choise.php?id=' + stuffName); request.send(null); request.onreadystatechange = function(response){ if (request.readyState == 4) { // выводим полученные данные от выполнения скрипта choise.php в элемент страницы с идентификатором divResult document.getElementById("divResult").innerHTML = request.responseText; } } } </script>

As a result, the data received from your script will be inserted into the divResult element, the page will not reload. But you need to get the variable stuffName in some way :) I think that this resource will help.

    php is not needed.

    Everything is done within a single page. You immediately display the html of possible pictures, but hide them for now. Clicks on imagemap process JavaScript, replacing the content of the <div id="info"> with the corresponding <img src="..."> .

      In your task, for example, in the gett, you can transfer the position of scrolling, and if the page is loaded, if there is a position, then through JS you can set this position.

        var sH = jQuery(document).scrollTop(); // его передаем <?php if (isset($_GET['sH'])) { // устанавливаем новое положение скролинга ?> <script>jQuery(document).scrollTop(<?php echo (int)$_GET['sH'];?></script> <?php } ?>
      • var sH = jQuery (document) .scrollTop (); And this is where I insert? I do not understand this nifiga! except php I don’t understand anything here)) - Sasha