Develop Reference

How can I get user selection on image maps to js variable

I mapped an image and I want to take ids of those maps as an answer to my js variable.
<img src="img/beyin3.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="cevap = 'frontal'" id="frontal" alt="" title="" href="#" shape="poly" coords="228,485,282,375,323,305,353,269,400,166,402,120,412,84,341,114,265,142,198,187,130,243,90,331,94,406,107,461" />
<area alt="" title="" href="#" shape="poly" coords="388,572,464,533,522,509,615,477,670,452,701,409,736,372,736,348,625,332,555,333,498,351,444,374,385,402,337,451,301,489,312,528" />
<area alt="" title="" href="#" shape="poly" coords="456,274,562,273,656,283,741,286,804,249,790,210,728,174,695,145,655,118,579,104,547,99" />
<area alt="" title="" href="#" shape="poly" coords="757,460,837,456,876,443,894,411,904,380,904,347,889,330,871,303,855,280,846,278,830,278,799,309" />
</map>
<p style="text-align:bottom; margin-top:30%;">
<h1><p id="soru"></p></h1></center>
Javascript code
function myFunction() {
var ran = Math.floor((Math.random() * soruCevap.length));
document.getElementById("soru").innerHTML = soruCevap[ran][0];
var cevap;
if(cevap.equals("frontal")){
document.getElementById("soru").innerHTML = cevap;
} else if(cevap.equals("temporal")){
} else if(cevap.equals("paryetal")){
} else if(cevap.equals("oksipital")){
}
}

JavaScript does not have an equals method unless you've monkeypatched some data types. Possibly you've confused java and javascript.
What you should do is, to change
if(cevap.equals("frontal"))
to,
if(cevap === "frontal")

Changing mapped image to another mapped image

I have a mapped image, where I have five areas (five objects which are interesting for me). After clicking these five areas I want to change an image and therefore change map. It's like a game where you should find things.
My problem is that, when I change image I have an error, I use mapper.js.
Uncaught TypeError: Cannot read property 'getContext' of null
My code: (HTML)
<div id="myDiv">
<img id="MainImage" class="mapper"
src="0100.png" border="0" width="1000" height="707" orgWidth="1000" orgHeight="707" usemap="#map1" />
</div>
<map name="map1" id="map1">
<area id="0101" shape="poly" onclick='myFunc(id)'
coords="615,559,637,546,658,542,658,585,677,667,661,669,641,675,618,619" style="outline:none;" target="_self" />
<area id="0102" shape="poly" onclick='myFunc(id)'
coords="903,537,919,534,928,554,948,659,935,662,922,626,915,659,902,657" style="outline:none;" target="_self" />
....
<area id="0105" shape="poly" onclick='myFunc(id)'
coords="243,364,259,364,262,385,269,405,275,441,245,443" style="outline:none;" target="_self" />
</map>
<map name="map2" id="map2">
<area id="0201" shape="poly"
coords="26,292,34,283,47,298,38,312,23,313" style="outline:none;" target="_self" />
......
<area id="0210" shape="poly"
coords="685,505,696,472,716,498,713,572,688,566" style="outline:none;" target="_self" />
</map>
And here goes JavaScript:
var clickedIDs = [];
var currLength = 5;
function myFunc(id) {
if (clickedIDs.indexOf(id) != -1) {
return;
}
clickedIDs.push(id);
document.getElementById(id).className = "noborder icolor00ff00";
if (clickedIDs.length == currLength) {
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = '<img id=\'MainImage\' class=\'mapper\' src=\'0200.png\' border=0 width=1000 height=707 orgWidth=1000 orgHeight=707 usemap=\'#map2\' />';
}
}
When I click first five objects and change image using InnerHTML I have error.

Trying to attach JQuery on another page attached through data attribute

I have a slider which attaches slides through external page attached through data attributes.
Here is what's happening:-
Main Page
<div id="sitewrapper">
<section class="sliderwrapper">
<div id="slider" data-source="slides-page.html" data-speed="500" data-easing="swing">
<ul>
</ul>
</div>
<div id="loader"><span id="load"></span></div>
<a class="button" id="back"></a>
<a class="button" id="next"></a>
</section>
<!--end sitewrapper-->
</div>
<script>
$(function() { //run when the DOM is ready
$('.internalclick').click(function(e) {
alert("I clicked Area Tag" + $(this).attr('data-direct'));
});
});
</script>
Slides page (slides-page.html)
<li class="hslide" data-id="1"><img src="content/01.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="331,158,538,297" href="#" class="internalclick" data-direct="I-need-to-direct">
<area shape="rect" coords="546,154,745,305" href="#">
<area shape="rect" coords="331,311,543,445" href="#">
<area shape="rect" coords="550,309,733,443" href="#">
</map>
</li>
<li class="hslide" data-id="2"><img src="content/02.png"></li>
<li class="hslide" data-id="3"><img src="content/03.png"></li>
<li class="hslide" data-id="4"><img src="content/04.png"></li>
Problem
Now above all works fine when I try to add a Click function on two the list elements (slides) in the slides page. Notice the first where I added href="#" class="internalclick" data-direct="I-need-to-direct". Now the problem is to access it.
When I am trying to run a small Click function in the main page, I am unable to run the function. Any idea how I can make a click function that scopes the area tag in the slides page?
Thanks

The problem is internalclick is loaded after you add the event handlers. You need to use event delegation.
$("#sitewrapper").on("click",".internalclick", function(e) {
var direct = $(this).data("direct");
console.log(direct);
});

can't insert area tags into map with jquery

I want dynamically add area to a map. So I do
....
var area = '<area href="#" shape="poly" coords="'+coors4+'" id="area4">';
alert(area);
$('#number_areas').append(area);
$('[id*="area"]').mapster('select');
.....
<map name="number_areas" id="number_areas">
</map>
so on alert I get <area href="#" shape="poly" coords="477,1,572,1,572,96,477,96" id="area4"> but map tag is still empty

Adding and removing an element multiple times with jQuery

I'm using jQuery to append a youtube video when a button is clicked.
onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');"
I'm then using jQuery again to remove it when another button is clicked.
onclick="$('iframe').remove();"
It works fine the first time around but If I add the video, remove it, and then try to add it again. It adds and removes itself instantly.
Why is this happening? It seems like the $('iframe').remove(); function is running constantly after the button is clicked.
EDIT
Here is the expanded version of the code.
<div class="product-media" id="product-media1">
<map name="submenu3" onclick="$('iframe').remove();">
<area shape="rect" coords="0, 0, 95, 25" onClick="swap3('product-media1','product-details1');">
<area shape="rect" coords="103, 0, 213, 25" onClick="swap3('product-media1','product-specs1');">
</map>
<img src="images/submenu3.jpg" alt="" border="0" usemap="submenu3" /><br /><br />
<p> </p>
<div id="videogallery">
<a rel="#voverlay" href="#" onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');">
<span class="thumb" onClick="swapvid"><img src="images/video.jpg" alt="" align="left" /></span><span></span>
</a><br />
Watch Scotch-Brite™ Radial Discs in action
</div>
</div>

This works fine: http://jsfiddle.net/YssHJ/
$('#add').click(function(){
$('#vid').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');
});
$('#del').click(function(){
$('iframe').remove();
});
EDIT: fiddle using a map click http://jsfiddle.net/YssHJ/2/