n00b n00b - 6 months ago 32
HTML Question

How to get selected image map alt value?

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

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 e.g. 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);
}
Comments