如何获得所选图像地图的alt值？

Question

ok changed my code:

      <div class="a" id="mySidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">X</a>
         <a href="#" id="tname">Number:</a>
         <a href="#" id="d1"></a>
         <a href="#" id="d2"></a>
      </div>
      <map class="b" name="mymap" id="map">
         <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
         <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
      </map>
     function openNav(element){
     $('#mySidenav').css("width", "250px");
     $('#image').css("marginLeft", "250px");
     var alt = $(element).attr("alt");
       $('#tname').text(alt);
     }

i have folders named "5" and "6" and so on. each folders have 1.html 2.html that has <title>PersonName</title> if i clicked image map with alt=5 i want to get '5/1.html' <title> value appear on "id=d1" and it should become link to that html. tried this one, but not working, seems like im making syntax error

$.get('1.html'), openNav(result){
    var obj = $(result).find('title');
    $(this).append($('#d1').text(obj.html()));

Answer 1

You can select the attribute with plain JavaScript with .getAttribute("alt") or with jQuery with .attr("alt") . However, you need to select the correct element first. You can do this eg with jQuery with $("#map area") . It is however easier to pass the element directly by in the function.

HTML:

<map class="b" name="mymap" id="map">
   <area shape="circle" coords="67,420,20" onclick="openNav(this)" alt="5" />
   <area shape="circle" coords="184,384,19" onclick="openNav(this)" alt="6" />
</map>

JavaScript:

function openNav(element) {
   var alt = element.getAttribute("alt");
   document.getElementById("tname").innerHTML = alt;
}

// or with jQuery
function openNav(element) {
   var alt = $(element).attr("alt");
   $("#tname").text(alt);
}

---

The answer for the question after your edit:

The proper solution would be to set a click listener on the area. Inside of this clicklistener, you create the whole logic, like this.

First, remove every onclick="" from your HTML document.

Then, use this JavaScript snippet:

$("#map area").click(function() {
    var alt = $(this).attr("alt");
    var address1 = alt + "/1.html";
    var address2 = alt + "/2.html";

    $.get({
        url: address1,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d1").text(title).attr("href", address1);
        }
    });
    $.get({
        url: address2,
        success: function(result) {
            var title = $.parseHTML(result).find("title").text();
            $("#d2").text(title).attr("href", address2);
        }
    });
});

There is of course room for improvements (eg DRY concept etc.).