Hello!!! Help good people, There is a search form RokAjaxSearch, there is a picture map with links, I need to make sure that when you click on a link in the search form, the link text is added.

Details drawing

Here is the Html drawing card

<IMG SRC="https://i.stack.imgur.com/m89Ce.png" WIDTH=209 HEIGHT=137 BORDER=0 ISMAP USEMAP="#m89Ce.png"><MAP NAME="m89Ce.png"><AREA SHAPE="RECT"COORDS="59,29,132,52"HREF="#1011AA"TARGET="_top"><AREA SHAPE="RECT" COORDS="121,85,199,113" HREF="#1132AD" TARGET="_top"></map>

When you click on the number (link), he should get into the search form in order not to enter it manually

  • Everything is imposed on joomle and is weak in coding, I know a little PhP, CSS, Html. I'll throw WMoney for help in solving the issue - Andrey Maksymov

1 answer 1

You turned to the wrong resource if you want the problem to be solved for you. You just need to listen to the click "area" and insert where you want.

 $('area').on('click', function(e) { e.preventDefault(); $('.here').text(this.getAttribute('href')); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <IMG SRC="https://i.stack.imgur.com/m89Ce.png" WIDTH=209 HEIGHT=137 BORDER=0 ISMAP USEMAP="#m89Ce.png"><MAP NAME="m89Ce.png"><AREA SHAPE="RECT"COORDS="59,29,132,52"HREF="#1011AA"TARGET="_top"><AREA SHAPE="RECT" COORDS="121,85,199,113" HREF="#1132AD" TARGET="_top"></MAP> <div class="here"></div>

Here is an example of the same script on pure js

 const area = Array.prototype.slice.call(document.querySelectorAll('area')); area.forEach(el => { el.onclick = e => { e.preventDefault(); document.querySelector('.here').textContent = el.getAttribute('href').replace('#', ''); } })
  • As I understand it, you need to create * .js with the contents of $ ('area'). On ('click', function (e) {e.preventDefault (); $ ('. Here'). Text (this.getAttribute ('href '));}); and then connect it and jquery.min.js, looked through the scripts in the inspector are connected. But where <div> class = "here"> to shove something would be displayed in the search form. I almost forgot the script is processed by jquery. Is it not necessary to replace $ with jQuery (area) in the body of the script? - Andrey Maksymov
  • Have the opportunity to help sort out? Your conditions - Andrey Maksymov
  • $ is alias jquery. I have no idea what kind of search you are talking about. You talk about him all the time, but what class does he have, id you didn’t say. You just need to change .here to the desired class / id. Considering that you are using joomla, I think you have jquery connected as it is. - DimenSi
  • You need to insert this script as you like, you can write to the file and connect it, or you can insert it in <script> </ script> tags - DimenSi