There is a div with given dimensions of 800x300px. It should have a map map, when clicked on a region of which, the div should load the following image (not necessarily by its sequence number) without switching to other pages.

alt text

Here, for example, " all this is a picture with some text " has the address " images / 1.png ", area-link1 has the address on the picture with the address " images / 4.png ", and area-link2 - " images / 15.png " When you click on one of the areas, the "map-map" should change to another picture with its own reference areas without going to other pages of the site.

How to do this? Help me please.

    2 answers 2

    We will do a magical perversion with assignment of attributes that even HTML5 didn’t dream of

    <img src="map.png" usemap="#map1" id="image" /> <map id="#map" name="map1"> <area shape="rect" coords="25,36,114,98" href="http://google.com" rel="map2.png" usemap="#map2" /> </map> <map id="#map2" name="map2"> <area shape="rect" coords="25,36,114,98" href="http://google.com" /> </map> <script> var area = document.getElementsByTagName('area'); for(var i in area) { area[i].onclick = function() { if(this.getAttribute('rel') != null && this.getAttribute('usemap') != null) { document.getElementById('image').src = this.getAttribute('rel'); document.getElementById('image').setAttribute('usemap', this.getAttribute('usemap')); } else { window.location.href = this.getAttribute('href'); } return false; } } </script>

    I think you will understand, I can not vouch for cross-browser compatibility.

    Attributes for area rel and usemap store information that must be changed when clicked.

      1. Option with autoloading via AJAX.
      2. Write a script that will replace the image, or append it to the end. Something вроде document.getElementsByID(ID).innerHTML=img[i] , where ID is the container identifier, where the picture should be, img [i] is an array with the text of the image code.
      3. By default, upload all pictures, but hide them from the eyes through the visibility:hidden; property visibility:hidden; . With JS change style to visibility:visible