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")
I'm trying to get maphilight to toggle the highlighting of my hotspots when the user clicks a link. Nothing happens when the link is clicked though. What am I missing?
Thank you much. Code follows.
<body>
<div class="Room">
<div class="Wall">
<img src="Rooms/NorthBlank.JPG" usemap="#NorthMap" border="0" class="hilight" />
<map name="NorthMap" id="NorthMap">
<area id="plant" shape="poly" coords="319,388,338,402,399,402,437,392,410,372,392,370,385,332,356,331,352,374" href="Objects/Plant.jpg" rel="lightbox" />
</map>
</div>
</div>
<div class="MenuBar">
<img id="Information" src="Icons/Info.PNG" />
</div>
</body>
</html>
<script>
$('#InfoLink').click(function(e) {
e.preventDefault();
var data = $('.hilight').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('.hilight').data('maphilight', data).trigger('alwaysOn.maphilight');
});
</script>
I have a popup div with more than one span element how to display another span
javascript
$(document).ready(function() {
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
});
HTML
<div id="popUpDiv" style="display:none">
<img src="logo_klein.png" width="117" height="33" class="logoklein1" ><p
id="headertextbox">is</p></img>
<span class="textbox1"></span>
<span class="textbox2"></span>
<span class="textbox3"></span>
</div>
</div>
Imagemap with links
<img id="logo" src="./logo.png" alt="Phlox" usemap="#links"></img>
<map name="links">
<area shape="circle" coords="291,46,46" href="#" class="levert"></area>
<area shape="circle" coords="55,245,46" href="#" class="is"></area>
</map>
Do this when you want to clear popupDiv and add span with class textbox2
$("#popUpDiv").empty().append('.textbox2').show("slow");
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/
I used jquery.maphilight, html map and area on the layout
This is my layout codepen.
(codepen here)
I want append status icon/image on red color area like this
so....what should I do?
If jquery.maphilight can't do that, Could recommend me other javascript?
<!DOCTYPE html>
<html>
<head></hrad>
<body>
<div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png" alt="" usemap="#PClayout">
</div>
<map name="PClayout">
<!-- working -->
<area shape="rect" coords="200,100,300,200" id='PC1' href="#">
<!-- close-->
<area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!-- Error-->
<area shape="rect" coords="200,250,300,350" id='PC3' href="#">
</map>
</body>
</html>
function layoutalert(el, Color){
var data = $(el).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = Color;
data.strokeColor = Color;
$(el).data('maphilight', data).trigger('alwaysOn.maphilight');
$(el).data('maphilight', data).trigger('fillColor.maphilight');
$(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();