Related
I've looked at the other posts and have followed various ones, but can't get this to work.
I have an image which I need to turn into an image map (hotspot) that I will then embed into a WordPress post (irrelevant, but here for context).
I used the following site to generate supposedly 'responsive' code for this image map: https://image-map.weebly.com/
The code generated was as follows:
<img src="http://teaching-and-learning.co.uk/wp-content/uploads/2020/01/LessonBuilder.png" id="map-image" style="width: 75%; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="927, 1870, 1440, 2226" href="https://www.teaching-and-learning.co.uk/lesson-end" target="" alt=" alt="End" title="End" />
<area shape="rect" coords="1460, 1872, 1901, 2227" href="https://www.teaching-and-learning.co.uk/check-understanding" target="_blank" alt="Check Understanding" title="Check Understanding" />
<area shape="poly" coords="716, 1871, 539, 2227, 911, 2227, 910, 1872" href="https://www.teaching-and-learning.co.uk/questioning-feedback" target="_blank" alt="Questioning & Feedback" title="Questioning & Feedback" />
<area shape="poly" coords="248, 1397, 419, 1481, 613, 1582, 617, 1846, 639, 1870, 702, 1871, 523, 2224, 392, 2174, 315, 2096, 267, 2015, 248, 1940, 244, 1831" href="https://www.teaching-and-learning.co.uk/differentiate" target="_blank" alt="Differentiate" title="Differentiate" />
<area shape="poly" coords="582, 1101, 488, 1117, 365, 1180, 290, 1268, 253, 1380, 606, 1554, 1210, 1456, 1211, 1102" href="https://www.teaching-and-learning.co.uk/main-activity" target="_blank" alt="Main Activity" title="Main Activity" />
<area shape="rect" coords="1228, 697, 1676, 1456" href="https://www.teaching-and-learning.co.uk/effective-instructions" target="_blank" alt="Effective Instructions" title="Effective Instructions" />
<area shape="rect" coords="1227, 57, 1675, 686" href="https://www.teaching-and-learning.co.uk/progress-indicators" target="_blank" alt="Progress Indicators" title="Progress Indicators" />
<area shape="rect" coords="463, 57, 1209, 403" href="https://www.teaching-and-learning.co.uk/lesson-template" target="_blank" alt="SMART Lesson Template" title="SMART Lesson Template" />
</map>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imageMapResizer.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>
I have created the referenced js file in the same directory. If I comment out that imageMapResizer.js file, the image map works as expected when the image is at full size. However, as soon as the js file is enabled, the image map is completely wrong, even when the image is at full size. Changing the width of the image to, for example, 75% doesn't fix the issue either.
The resource you've provided for responsive image maps actually works. I've added the contents of the imageMapResizer.js file and fixed the coordinates of the first area tag, the one for the SMART lesson template. I've tested the responsiveness by changing the width of the main image and it seems to be working just fine.
You have to recalculate and reset the coordinates of the different areas in order to get it working. The coordinate measurement should be done at full scale.
See for yourself and play around with the smart lesson template mapping:
<img src="http://teaching-and-learning.co.uk/wp-content/uploads/2020/01/LessonBuilder.png" id="map-image" style="width: 30%; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="927, 1870, 1440, 2226" href="https://www.teaching-and-learning.co.uk/lesson-end" target="" alt=" alt="End" title="End" />
<area shape="rect" coords="1460, 1872, 1901, 2227" href="https://www.teaching-and-learning.co.uk/check-understanding" target="_blank" alt="Check Understanding" title="Check Understanding" />
<area shape="poly" coords="716, 1871, 539, 2227, 911, 2227, 910, 1872" href="https://www.teaching-and-learning.co.uk/questioning-feedback" target="_blank" alt="Questioning & Feedback" title="Questioning & Feedback" />
<area shape="poly" coords="248, 1397, 419, 1481, 613, 1582, 617, 1846, 639, 1870, 702, 1871, 523, 2224, 392, 2174, 315, 2096, 267, 2015, 248, 1940, 244, 1831" href="https://www.teaching-and-learning.co.uk/differentiate" target="_blank" alt="Differentiate" title="Differentiate" />
<area shape="poly" coords="582, 1101, 488, 1117, 365, 1180, 290, 1268, 253, 1380, 606, 1554, 1210, 1456, 1211, 1102" href="https://www.teaching-and-learning.co.uk/main-activity" target="_blank" alt="Main Activity" title="Main Activity" />
<area shape="rect" coords="1228, 697, 1676, 1456" href="https://www.teaching-and-learning.co.uk/effective-instructions" target="_blank" alt="Effective Instructions" title="Effective Instructions" />
<area shape="rect" coords="1803, 57, 1975, 686" href="https://www.teaching-and-learning.co.uk/progress-indicators" target="_blank" alt="Progress Indicators" title="Progress Indicators" />
<area shape="rect" coords="674, 81, 1760, 583" href="https://www.teaching-and-learning.co.uk/lesson-template" target="_blank" alt="SMART Lesson Template" title="SMART Lesson Template" />
</map>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*! Image Map Resizer (imageMapResizer.min.js ) - v0.5.3 - 2015-01-29
* Desc: Resize HTML imageMap to scaled image.
* Copyright: (c) 2015 David J. Bradshaw - dave#bradshaw.net
* License: MIT
*/
! function() {
"use strict";
function a() {
function a() {
function a(a) {
function c(a) {
return a * b[1 === (d = 1 - d) ? "width" : "height"]
}
var d = 0;
return a.split(",").map(Number).map(c).map(Math.floor).join(",")
}
for (var b = {
width: i.width / j.width,
height: i.height / j.height
}, c = 0; g > c; c++) f[c].coords = a(h[c])
}
function b() {
j.onload = function() {
(i.width !== j.width || i.height !== j.height) && a()
}, j.src = i.src
}
function c() {
function b() {
clearTimeout(k), k = setTimeout(a, 250)
}
window.addEventListener ? window.addEventListener("resize", b, !1) : window.attachEvent && window.attachEvent("onresize", b)
}
function d(a) {
return a.coords.replace(/ *, */g, ",").replace(/ +/g, ",")
}
var e = this,
f = e.getElementsByTagName("area"),
g = f.length,
h = Array.prototype.map.call(f, d),
i = document.querySelector('img[usemap="#' + e.name + '"]'),
j = new Image,
k = null;
b(), c()
}
function b() {
function b(b) {
if (!b.tagName) throw new TypeError("Object is not a valid DOM element");
if ("MAP" !== b.tagName.toUpperCase()) throw new TypeError("Expected <MAP> tag, found <" + b.tagName + ">.");
a.call(b)
}
return function(a) {
switch (typeof a) {
case "undefined":
case "string":
Array.prototype.forEach.call(document.querySelectorAll(a || "map"), b);
break;
case "object":
b(a);
break;
default:
throw new TypeError("Unexpected data type (" + typeof a + ").")
}
}
}
"function" == typeof define && define.amd ? define([], b) : "object" == typeof exports ? module.exports = b() : window.imageMapResize = b(), "jQuery" in window && (jQuery.fn.imageMapResize = function() {
return this.filter("map").each(a).end()
})
}();
//# sourceMappingURL=imageMapResizer.map
</script>
<script>
$(document).ready(function(e) {
$("map").imageMapResize();
});
</script>
I am making a software were i need to hide all other div's when i click on another div. what happens now is that the div's just stack on top of each other. and the div only dissapears when i click the same div again.
i already tried some of the JavaScript and jQuery code on this platform but can't quite figure it out myself.
--- THIS IS THE SCRIPT IM USING TO SHOW AND HIDE THE DIV'S ---
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
</head>
<body>
--- THESE ARE MY CLICKABLE AREA'S WHERE THE USER CAN CLICK ON TO SHOW AND HIDE A DIV ---
<div class="div-voog" id=""> <img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="toggle_visibility('vooglid');" alt="" title="" href="#" shape="poly" coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area onclick="toggle_visibility('vwimpers');" alt="" title="" href="#" shape="poly" coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area onclick="toggle_visibility('vwenkbrauw');" alt="" title="" href="#" shape="poly" coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />
<area onclick="toggle_visibility('vooghoek');" alt="" title="" href="#" shape="poly" coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />
</map>
</div>
--- AND THESE ARE MY DIV'S CONTAINING THE INFORMATION IT HAS TO SHOW AND HIDE ---
<div class="test" id="vooglid"> Symptoom ooglid</div>
<div class="test22" id="vwimpers"> Symptoom wimper</div>
<div class="test33" id="vwenkbrauw"> Symptoom wenkbrauw</div>
<div class="test44" id="vooghoek"> Symptoom ooghoek</div>
</body>
</html>
I want the result to be that when I click one of the areas above, the corresponding div shows and all other divs hide.
You need to first hide all the other elements, so that then you can show the one you want to see. You could change all of them to have the class="test" and then prepend to your script something like this:
var tests = document.getElementsByClassName("test");
for (i = 0; i < tests.length; i++) {
tests[i].style.display = "none";
}
UPDATE
The full script would be something like this:
<script>
function toggle_visibility(el) {
var tests = document.getElementsByClassName("test");
for (i = 0; i < tests.length; i++) {
tests[i].style.display = "none";
}
el.style.display = "block";
}
</script>
And the html:
<div>
<area class="test" onclick="toggle_visibility(this)">A</div>
<area class="test" onclick="toggle_visibility(this)">B</div>
<area class="test" onclick="toggle_visibility(this)">C</div>
<area class="test" onclick="toggle_visibility(this)">D</div>
</div>
Something like that ?
const AlldivTest = document.querySelectorAll('.test');
document.querySelector('#Map').onclick =e=>{
if (!e.target.matches('area')) return;
e.stopPropagation();
AlldivTest.forEach(d=>{
if (d.id===e.target.dataset.elm)
{ d.style.display = (d.style.display==='none') ? 'block' : 'none' }
else
{ d.style.display = 'none' }
})
}
.test { display: none; border:1px solid grey; padding: 5px 10px }
img { width:550px; height:550px }
<div class="div-voog">
<img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area data-elm="vooglid" alt="" title="" href="#" shape="poly"
coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area data-elm="vwimpers" alt="" title="" href="#" shape="poly"
coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area data-elm="vwenkbrauw" alt="" title="" href="#" shape="poly"
coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />
<area data-elm="vooghoek" alt="" title="" href="#" shape="poly"
coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />
</map>
</div>
<div class="test" id="vooglid"> Symptoom ooglid</div>
<div class="test" id="vwimpers"> Symptoom wimper</div>
<div class="test" id="vwenkbrauw"> Symptoom wenkbrauw</div>
<div class="test" id="vooghoek"> Symptoom ooghoek</div>
[edit]
For a quick see of "my" part of code you have to use only one script and it should b: like this
<script>
$(function () {
$('.map').maphilight({
fade: false
});
$('.map').maphilight({
fillColor: '008800'
});
$('#hilightlink')
.mouseover(function (e) { $('#square2').mouseover(); })
.mouseout(function (e) { $('#square2').mouseout(); })
.click(function (e) { e.preventDefault(); });
$('#linkerbeenlink')
.click(function (e) {
e.preventDefault();
var data = $('#linkerbeen').data('maphilight') || {};
data.neverOn = !data.neverOn;
$('#linkerbeen').data('maphilight', data);
});
$('#linkerbeen,#linkerbeenlink2')
.click(function (e) {
e.preventDefault();
var data = $('#linkerbeen').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#linkerbeen').data('maphilight', data).trigger('alwaysOn.maphilight');
});
$('#vinger2link')
.click(function (e) {
e.preventDefault();
var data = $('#vinger2').data('maphilight') || {};
data.neverOn = !data.neverOn;
$('#vinger2').data('maphilight', data);
});
$('#vinger2,#vinger2link2')
.click(function (e) {
e.preventDefault();
var data = $('#vinger2').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#vinger2').data('maphilight', data).trigger('alwaysOn.maphilight');
});
const AlldivTest = document.querySelectorAll('.test');
document.querySelector('#Map').onclick =e=>{
if (!e.target.matches('area')) return;
e.stopPropagation();
AlldivTest.forEach(d=>{
if (d.id===e.target.dataset.elm)
{ d.style.display = (d.style.display==='none') ? 'block' : 'none' }
else
{ d.style.display = 'none' }
})
}
});
</script>
use jquery code that will work for hiding all other div when you click on current div
$('a').on('click', function(){
var target = $(this).attr('vooglid');
$("test"+target).show().siblings("div").hide();
});
but you must change your ids for apply that code
Do you already have tried adding all other div's to a CSS class?
Try this code:
function toggle_visibility(var id){
$("#vooglid").addClass("hide_div");
$("#vooghoek").addClass("hide_div");
$("#vwimpers").addClass("hide_div");
$("#id").removeClass("hide_div");
});
CSS:
.hide_div{
display: none;
}
I did this a few months ago and it worked fine.
I'm making a map of the United States where when you click on a state, you have to answer the state capital. I am using 3 columns to keep track of the answers. One column is correct answers, the second is incorrect, and the third is states unanswered. I have it set up so far that when an answer is correct it can go into the first column, and same with the second column. Unfortunately, I don't know how to make all of the state names start in the third "unanswered column". Here is my code so far:
var alts = "";
function loadMap() {
var map = document.getElementById("statemap");
map.addEventListener("click", function(evt) {
var alt = evt.target.alt;
alts = alt;
var id = evt.target.id;
ids = id;
document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
});
}
function shows() {
document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
}
function show() {
document.getElementById("text").value = "";
document.getElementById('divIdAnswer').innerHTML = "";
}
function checkAnswer() {
if (!alts) {
document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
return;
}
var submittedAnswer = document.getElementById('text').value;
var correctAnswer = alts;
if (submittedAnswer == correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
document.getElementById('divCorrect').innerHTML += ids + "<br>";
} else if (submittedAnswer != correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
document.getElementById('divIncorrect').innerHTML += ids + "<br>"
}
alts = "";
}
.column {
float: left;
position: relative;
width: 300px;
height: 200px;
border: 0px;
box-sizing: border-box;
}
body {
padding: 10 px;
text-align: center;
background_color: #GF5D89
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
<body onload="loadMap(); shows()">
<h1>Do you know the capitals of each of the United States of America?</h1>
<h2>Use this map to test your knowledge.</h2>
<img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">
<map id="statemap" name="statemap">
<area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
<area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
<area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
<area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
<area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
<area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
<area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
<area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
<area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
<area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
<area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
<area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
<area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
<area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
<area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
<area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
<area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
<area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
<area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
<area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
<area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
<area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
<area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
<area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
</map>
<div id="divIdMessage"></div>
<br>
<textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
<br>
<br>
<input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
<br>
<br>
<div id="divIdAnswer"></div>
<br>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h3>Correct Answers</h3>
<p id="divCorrect"></p>
</div>
<div class="column" style="background-color:#bbb">
<h3>Incorrect Answers</h3>
<p id="divIncorrect"></p>
</div>
<div class="column" style="background-color:#ccc;">
<h3>No Answers</h3>
<p id="divNone"></p>
</div>
<br>
</div>
</body>
You can use a for-loop to iterate through #statesmap's children:
var unansColumn = document.getElementById("divNone");
var states = document.getElementById("statemap").children;
var stateName;
var tmpStateDiv;
for (var i = 0; i < states.length; i++) {
state = states[i];
stateName = state.getAttribute('id');
tmpStateDiv = document.createElement('DIV');
tmpStateDiv.setAttribute('id', 'unanswered' + stateName);
tmpStateDiv.appendChild(document.createTextNode(stateName));
unansColumn.appendChild(tmpStateDiv);
}
An advantage of this approach is that it doesn't just work for the US; if you changed the map to a map of Canada, and updated your #statesmap div to list the Canadian states instead, it should work just fine with no modifications.
var alts = "";
function resetColumns() {
var state;
var stateName;
var tmpStateDiv;
var states = document.getElementById('statemap').children;
var corColumn = document.getElementById('divCorrect');
var incorColumn = document.getElementById('divIncorrect');
var unansColumn = document.getElementById('divNone');
corColumn.innerHTML = '';
incorColumn.innerHTML = '';
for (var i = 0; i < states.length; i++) {
state = states[i];
stateName = state.getAttribute('id');
//unansColumn.innerHTML += "<div id= \"" + state.getAttribute('id') + "\">" + state.getAttribute('id') + "</div>"; <-- bad code, bad bjonnfesk
/*----------------------*/
//instead, do:
tmpStateDiv = document.createElement('DIV'); //create a new element of type div, into which we will put the name of the state we are processing...
tmpStateDiv.setAttribute('id', 'unanswered' + stateName); //set its id to 'unanswered' + name of the state, for instance 'unansweredOregon' (to avoid an id conflict). It needs to have an id so that we can remove it later, when the state is answered.
tmpStateDiv.appendChild(document.createTextNode(stateName)); //write the name of the state to the element
unansColumn.appendChild(tmpStateDiv); //finally, add the entire div element to the list of unanswered states
}
}
function removeFromUnanswered(id) {
var unansweredStates = document.getElementById('divNone');
//unansweredStates.removeChild(unansweredStates.querySelector('#' + id)); <--here a modification is also necessary:
unansweredStates.removeChild(unansweredStates.querySelector('#unanswered' + id)); //otherwise, since we changed the ids of the states in the unanswered column, our querySelector would not match the state when it is time for it to be removed.
}
function loadMap() {
var map = document.getElementById("statemap");
map.addEventListener("click", function(evt) {
var alt = evt.target.alt;
alts = alt;
var id = evt.target.id;
ids = id;
document.getElementById("divIdMessage").innerHTML = "What is the capital of " + evt.target.id + "?";
});
}
function shows() {
document.getElementById("divIdMessage").innerHTML = "Click on a state to get started.";
}
function show() {
document.getElementById("text").value = "";
document.getElementById("divIdAnswer").innerHTML = "";
}
function checkAnswer() {
if (!alts) {
document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
return;
}
var submittedAnswer = document.getElementById("text").value;
var correctAnswer = alts;
if (submittedAnswer == correctAnswer) {
document.getElementById("divIdAnswer").innerHTML = "Good job, that is correct!";
document.getElementById("divCorrect").innerHTML += ids + "<br>";
} else if (submittedAnswer != correctAnswer) {
document.getElementById("divIdAnswer").innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
document.getElementById("divIncorrect").innerHTML += ids + "<br>";
}
alts = "";
removeFromUnanswered(ids);
}
.column {
float: left;
position: relative;
width: 300px;
height: 200px;
border: 0px;
box-sizing: border-box;
}
body {
padding: 10 px;
text-align: center;
background-color: #FF5D89;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="setTimeout(function() {
loadMap();
shows();
resetColumns();
}, 1000);">
<h1>Do you know the capitals of each of the United States of America?</h1>
<h2>Use this map to test your knowledge.</h2>
<img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">
<map id="statemap" name="statemap">
<area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
<area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
<area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
<area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
<area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
<area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
<area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
<area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
<area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
<area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
<area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
<area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
<area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
<area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
<area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
<area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
<area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
<area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
<area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
<area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
<area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
<area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
<area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
<area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
</map>
<div id="divIdMessage"> </div>
<br>
<textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
<br>
<br>
<input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
<br>
<br>
<div id="divIdAnswer"></div>
<br>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h3>Correct Answers</h3>
<p id="divCorrect"></p>
</div>
<div class="column" style="background-color:#bbb">
<h3>Incorrect Answers</h3>
<p id="divIncorrect"></p>
</div>
<div class="column" style="background-color:#ccc;">
<h3>No Answers</h3>
<p id="divNone"></p>
</div>
<br>
</div>
</body>
</html>
I also took the liberty of correcting some other problems in your code, which has, among other things, caused your background-color property (misspelled as background_color) to take effect.
Edit 1: I assume you also wish to have the answered states removed from the unanswered column upon being answered. Add this function to your script, for instance just above loadMap():
function removeFromUnanswered(id) {
var unansweredStates = document.getElementById("divNone");
unansweredStates.removeChild(unansweredStates.querySelector("#unanswered" + id));
}
...and then call that function after checking the answer in checkAnswer:
function checkAnswer() {
...
alts = "";
removeFromUnanswered(ids);
}
Edit 2: Replaced bad code and improved formatting. The new code is explained by comments and is much more readable than the old code.
use a percentage width for the .column instead of a fixed wone
.column{ width : 33.33%; }
var alts = "";
function loadMap() {
var map = document.getElementById("statemap");
map.addEventListener("click", function(evt) {
var alt = evt.target.alt;
alts = alt;
var id = evt.target.id;
ids = id;
document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
});
}
function shows() {
document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
}
function show() {
document.getElementById("text").value = "";
document.getElementById('divIdAnswer').innerHTML = "";
}
function checkAnswer() {
if (!alts) {
document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
return;
}
var submittedAnswer = document.getElementById('text').value;
var correctAnswer = alts;
if (submittedAnswer == correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
document.getElementById('divCorrect').innerHTML += ids + "<br>";
} else if (submittedAnswer != correctAnswer) {
document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
document.getElementById('divIncorrect').innerHTML += ids + "<br>"
}
alts = "";
}
.column {
float: left;
position: relative;
width: 33.33%;
height: 200px;
border: 0px;
box-sizing: border-box;
}
body {
padding: 10 px;
text-align: center;
background-color: #GF5D89;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
<body onload="loadMap(); shows()">
<h1>Do you know the capitals of each of the United States of America?</h1>
<h2>Use this map to test your knowledge.</h2>
<img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">
<map id="statemap" name="statemap">
<area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
<area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
<area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
<area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
<area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
<area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
<area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
<area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
<area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
<area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
<area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
<area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
<area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
<area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
<area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
<area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
<area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
<area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
<area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
<area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
<area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
<area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
<area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
<area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
</map>
<div id="divIdMessage"></div>
<br>
<textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
<br>
<br>
<input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
<br>
<br>
<div id="divIdAnswer"></div>
<br>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h3>Correct Answers</h3>
<p id="divCorrect"></p>
</div>
<div class="column" style="background-color:#bbb">
<h3>Incorrect Answers</h3>
<p id="divIncorrect"></p>
</div>
<div class="column" style="background-color:#ccc;">
<h3>No Answers</h3>
<p id="divNone"></p>
</div>
<br>
</div>
</body>
Start by printing out the names of all the states. Do that by creating
an array by iterating your DOM. Print that array. When the user
submits an answer, delete that answer from your array then re-print
the array.
>
> var alts = "";
>
> function loadMap() {
> var map = document.getElementById("statemap");
> map.addEventListener("click", function(evt) {
> var alt = evt.target.alt;
> alts = alt;
> var id = evt.target.id;
> ids = id;
> document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
> }); } var arrayUnansw=[]; function createArray(){
> var query = document.getElementsByTagName("area");
> for(var i=0;i<query.length;i++){
> arrayUnansw.push(query[i].getAttribute("id"));
> } } function printArray(){ var container = document.getElementById("divNone"); for(var
> i=0;i<arrayUnansw.length;i++){
> container.innerHTML+=arrayUnansw[i]+"<br>"; } } createArray(); printArray(); function shows() {
> document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
>
> }
>
> function show() {
> document.getElementById("text").value = "";
> document.getElementById('divIdAnswer').innerHTML = ""; }
>
>
> function checkAnswer() {
> if (!alts) {
> document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
> return;
> }
> var submittedAnswer = document.getElementById('text').value;
> var correctAnswer = alts;
> if (submittedAnswer == correctAnswer) {
> document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
> document.getElementById('divCorrect').innerHTML += ids + "<br>";
>
> } else if (submittedAnswer != correctAnswer) {
> document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
> document.getElementById('divIncorrect').innerHTML += ids + "<br>"
> }
> var index = arrayUnansw.indexOf(ids);
> console.log(index);
> if(index!==-1)arrayUnansw.splice(index,1);
> document.getElementById("divNone").innerHTML="";
> printArray();
> alts = "";
>
> }
>
> <style>
> .column {
> float: left;
> position: relative;
> width: 300px;
> height: 200px;
> border: 0px;
> box-sizing: border-box;
> }
>
> body {
> padding: 10 px;
> text-align: center;
> background_color: #GF5D89
> font-family: "Trebuchet MS", Helvetica, sans-serif;
> }
> }
> </style>
>
>
>
> <body onload="loadMap(); shows()">
> <h1>Do you know the capitals of each of the United States of America?</h1>
> <h2>Use this map to test your knowledge.</h2>
> <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png"
> width="819" height="492" alt="States" usemap="#statemap">
>
> <map id="statemap" name="statemap">
> <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
> <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
> <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
> <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
> <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
> <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
> <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
> <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
> <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
> <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
> <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
> <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
> <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
> <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
> <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
> <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
> <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
> <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
> <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
> <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
> <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
> <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
> <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
> <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
> </map>
> <div id="divIdMessage"></div>
> <br>
> <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
> <br>
> <br>
> <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
> <br>
> <br>
> <div id="divIdAnswer"></div>
> <br>
> <div class="row">
> <div class="column" style="background-color:#aaa;">
> <h3>Correct Answers</h3>
> <p id="divCorrect"></p>
> </div>
> <div class="column" style="background-color:#bbb">
> <h3>Incorrect Answers</h3>
> <p id="divIncorrect"></p>
> </div>
> <div class="column" style="background-color:#ccc;">
> <h3>No Answers</h3>
> <p id="divNone"></p>
> </div>
> <br>
> </div>
> </body>
>
>
Edit: Screwed up the formatting. Sorry! But check it, it works.
I have one image which is divided into multiple sections. The requirement is, if user clicks on a particular section, the section should get highlighted. I did some exploration for the same and came across the solution of using <map> and <area> tags, also for the particular area to be highlighted, it uses maphilight feature. So it solved my first hurdle. And then now I have another requirement which says, clicking on a particular section, the color of that particular section should change on every click. Let us suppose, user clicks on section A, on the first click, it should change to red, on the second click, it should change to green and so on till four clicks. On the last click, it should change to white. The problem here is, when I click on section A, it is working as per requirement, but as soon as I click on section B, section A's highlighting gets disappear which should not happen.
Here's what I did for that:
<!Doctype HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="maphighlight.js"></script>
<script type="text/javascript">
var counter = 0;
function abc(){
if(counter == 3){
$('.map').maphilight({ groupBy: 'title',fillColor: 'ffffff',fillOpacity: '0.0',strokeColor: 'ffffff', strokeOpacity: '0.0' });
counter= 0;
}else if(counter == 2){
$('.map').maphilight({ groupBy: 'title',fillColor: '3333ff',fillOpacity: '0.8',strokeColor: '3333ff' });
counter++;
}else if(counter == 1){
$('.map').maphilight({ groupBy: 'title',fillColor: '006600',fillOpacity: '0.8',strokeColor: '006600' });
counter++;
}else{
$('.map').maphilight({ groupBy: 'title',fillColor: 'ff0000',fillOpacity: '0.8',strokeColor: 'ff0000' });
counter++;
}
}
var counter1 = 0;
function abcd(){
if(counter1 == 3){
$('.map').maphilight({ groupBy: 'title',fillColor: 'ffffff',fillOpacity: '0.0',strokeColor: 'ffffff', strokeOpacity: '0.0' });
counter1= 0;
}else if(counter1 == 2){
$('.map').maphilight({ groupBy: 'title',fillColor: '3333ff',fillOpacity: '0.8',strokeColor: '3333ff' });
counter1++;
}else if(counter1 == 1){
$('.map').maphilight({ groupBy: 'title',fillColor: '006600',fillOpacity: '0.8',strokeColor: '006600' });
counter1++;
}else{
$('.map').maphilight({ groupBy: 'title',fillColor: 'ff0000',fillOpacity: '0.8',strokeColor: 'ff0000' });
counter1++;
}
}
</script>
</head>
<body>
<img src="SensorygraphicRight.jpg" alt="Planets" class="map" border="none" usemap="#planetmap" hidefocus="true" style="float:left"/>
<map name="planetmap">
<!-- For A -->
<area id="sensory" alt="" name="A" title="A" onclick="abc();" shape="poly" coords="74,256,72,298,69,336,66,367,66,383,90,386,97,317,100,289,101,255">
<area alt="" title="A" id="sensory1" shape="poly" coords="308,306,303,341,301,380,328,382,322,349,332,309" />
</area>
<!-- For B -->
<area alt="" name="B" title="B" onclick="abcd();" shape="poly" coords="101,254,101,291,97,318,92,341,92,365,91,385,114,385,117,342,123,317,129,288,131,274,132,266,140,256" >
<area alt="" title="B" shape="poly" coords="417,236,415,268,420,304,428,352,439,353,443,309,447,272,449,236" />
</area>
<!-- For C -->
<area alt="" name="C" title="C" data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="139,253,130,280,129,295,123,322,119,336,116,353,113,367,113,376,114,384,115,388,122,388,126,379,131,356,129,339,135,331,141,321,146,314,148,308,154,296,156,288,160,278,163,271,163,264,166,258,165,255,137,255" >
<area alt="" title="C" href="#" data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="451,238,440,349,467,350,476,238" />
</area>
<!-- For D -->
<area alt="" name="D" title="D" href="#" data-maphilight='{"fillColor":"FF0000"}' shape="poly" coords="61,384,62,401,56,415,53,432,52,448,53,459,54,473,55,482,62,479,70,479,85,478,82,477,82,479,79,479,84,453,88,424,88,405,90,394,90,386">
<area alt="" title="D" data-maphilight='{"fillColor":"FF0000"}' href="#" shape="poly" coords="299,381,296,423,295,461,322,460,333,427,331,401,326,383" />
</area>
</map>
</body>
</html>
By this code, I am able to change the color of clicked section on every single click, but as soon as I click on another section, previously clicked section gets back to its initial color i.e., white.
How do I achieve it? Is there any way of setting the background color for clicked area?
I have latelly been wondering how to make a responsive image map. Sounds impossible, but I did find a way to do it http://home.comcast.net/~urbanjost/IMG/resizeimg.html
If you look at the source, you can see everything. This has no attached JQuery or Ruby, or whatever plugins people recomend to do this.
However, when I tried implementing this JS to my code, it just didn't work. I've been searching day and night but can't find a thing.
Here is the original code:
JS:
GLOBAL_COUNT = 0;
GLOBAL_AREAS = new Array();
GLOBAL_WIDTH = 1;
function scaleXY(elementid, scale) {
// avoid problems with 0 scales and image becoming so small it does not change size
// I think something breaks in firefox(1) when you shrink so much that all values in an coords= become 0
// I think something breaks in iexplore(1) when you shrink so much that all values in an coords= become 0
myscale = Math.max(0, scale);
oldwidth = document.getElementById(elementid).width
oldheight = document.getElementById(elementid).height
newwidth = Math.round(Math.max(oldwidth * myscale, 1));
newheight = Math.round(Math.max(oldheight * myscale, 1));
if(oldwidth == newwidth) newwidth =+ 1;
if(oldheight == newheight) newheight =+ 1;
document.getElementById(elementid).width = newwidth;
document.getElementById(elementid).height = newheight;
scaleArea();
}
// Assuming one image map in document.
// Assuming coordinates are comma-delimited in AREA COORDS= string.
// Assuming the same zoom factor for the height as for the width of the image.
function getglobal() { // place original AREA coordinate strings into a global array, called at load
var arrayAreas = document.body.getElementsByTagName("AREA");
GLOBAL_WIDTH = document.getElementById("myimage").width; // get original width
for(var i = 0; i < arrayAreas.length; i++) {
GLOBAL_AREAS[i]= arrayAreas[i].coords;
}
GLOBAL_COUNT++;
}
function scaleArea() { // using values stored at load, recalculate new values for the current size
var arrayAreas = document.body.getElementsByTagName("AREA");
for(var i = 0; i < arrayAreas.length; i++) {
ii = i+1;
rescale = document.getElementById("myimage").width/GLOBAL_WIDTH ;
sarray = GLOBAL_AREAS[i].split(","); // convert coordinates to a numeric array assuming comma-delimited values
var rarray =new Array();
for(var j = 0; j < sarray.length; j++) {
rarray[j] = parseInt(sarray[j])*rescale; // rescale the values
rarray[j] = Math.round(rarray[j]);
} //alert( "GLOBAL " + GLOBAL_AREAS[i] + ":" + sarray.length + " SPLIT=" + sarray +rarray.length);
arrayAreas[i].coords = rarray.join(","); // put the values back into a string
}
showArea();
}
HTML:
<body onload="getglobal();" >
<form>
<input type="button" onclick="scaleXY('myimage',1.0/1.13);" value="scaled smaller" />
<input type="button" onclick="scaleXY('myimage',1.13);" value="scaled bigger" />
</form>
<div>
<img id="myimage" src="hcopy.gif" alt="Round buttons" usemap="#circles" height="839" width="586" />
<map id="circles" name="circles" >
<area target="_blank" title="CYAN AREA" alt="CYAN" shape="circle" coords="50,50,20" href="#CYAN" />
<area target="_blank" title="BLUE AREA" alt="BLUE" shape="circle" coords="25,25,20" href="#BLUE" />
<area target="_blank" title="RED AREA" alt="RED" shape="circle" coords="25,75,20" href="#RED" />
<area target="_blank" title="MAGENTA AREA" alt="MAGENTA" shape="circle" coords="75,25,20" href="#MAGENTA" />
<area target="_blank" title="GREEN AREA" alt="GREEN" shape="circle" coords="75,75,20" href="#GREEN" />
<area target="_blank" title="YELLOW AREA" alt="YELLOW" shape="rect" coords="0,0,100,100" href="#YELLOW" />
</map>
</div>
<body>
Again, I didn't make this code. I have trouble understanding it. But the biggest problem comes when I try implementing this code to my image, then, it stopes working.
The code:
HTML:
<form onload="getglobal()">
<input type="button" onclick="scaleImageDown()" value="scaled smaller" />
<input type="button" onclick="scaleImageUp()" value="scaled bigger" />
</form>
<div>
<img src="http://www.astro-galaxy.com/sys_files/sys_view/CL1296246121697.jpg" usemap="#circles" id="myimage" width="839" height"586" >
<map name="circles" id="circles">
<area shape="circle" coords="-264,320,442" href="" title="Sun">
<area shape="circle" coords="244,79,13" href="" title="Mercury">
<area shape="circle" coords="307,122,24" href="" title="Venus">
<area shape="circle" coords="382,187,29" href="" title="Earth">
<area shape="circle" coords="414,149,14" href="" title="The Moon">
<area shape="circle" coords="432,232,16" href="" title="Mars">
<area shape="circle" coords="408,249,8" href="" title="Deimos">
<area shape="circle" coords="456,217,8" href="" title="Phobos">
<area shape="rect" coords="413,261,486,292" href="" title="Asteroids">
<area shape="circle" coords="563,337,85" href="" title="Jupiter">
<area shape="circle" coords="430,421,14" href="" title="Europa">
<area shape="circle" coords="463,395,18" href="" title="Ganymede">
<area shape="circle" coords="653,245,17" href="" title="Callisto">
<area shape="circle" coords="690,220,13" href="" title="Io">
<area shape="circle" coords="668,431,41" href="" title="Saturn">
<area shape="circle" coords="727,397,11" href="" title="Titan">
<area shape="circle" coords="734,487,21" href="" title="Uranus">
<area shape="circle" coords="684,525,10" href="" title="Umbriel">
<area shape="circle" coords="702,512,10" href="" title="Miranda">
<area shape="circle" coords="769,460,10" href="" title="Ariel">
<area shape="circle" coords="785,445,10" href="" title="Titania">
<area shape="circle" coords="802,430,10" href="" title="Oberon">
<area shape="circle" coords="784,536,27" href="" title="Neptune">
<area shape="circle" coords="757,565,10" href="" title="Triton">
<area shape="circle" coords="816,574,10" href="" title="Pluto">
</map>
</div>
JS:
GLOBAL_COUNT = 0;
GLOBAL_AREAS = new Array();
GLOBAL_WIDTH = 1;
eid = "myimage";
function scaleImageDown() {
// avoid problems with 0 scales and image becoming so small it does not change size
// I think something breaks in firefox(1) when you shrink so much that all values in an coords= become 0
// I think something breaks in iexplore(1) when you shrink so much that all values in an coords= become 0
var myscale = 0.5;
var oldwidth = document.getElementById(eid).width;
var oldheight = document.getElementById(eid).height;
var newwidth = oldwidth * myscale;
var newheight = oldheight * myscale;
if(oldwidth == newwidth) {
newwidth =+ 1
}
if(oldheight == newheight) {
newheight =+ 1
}
document.getElementById(eid).width = newwidth;
document.getElementById(eid).height = newheight;
scaleArea();
}
function scaleImageUp() {
var myscale = 2;
var oldwidth = document.getElementById(eid).width;
var oldheight = document.getElementById(eid).height;
var newwidth = oldwidth * myscale;
var newheight = oldheight * myscale;
if(oldwidth == newwidth) {
newwidth =+ 1
}
if(oldheight == newheight) {
newheight =+ 1
}
document.getElementById(eid).width = newwidth;
document.getElementById(eid).height = newheight;
scaleArea();
}
// Assuming one image map in document.
// Assuming coordinates are comma-delimited in AREA COORDS= string.
// Assuming the same zoom factor for the height as for the width of the image.
function getglobal(){ // place original AREA coordinate strings into a global array, called at load
var arrayAreas = document.body.getElementsByTagName("area");
GLOBAL_WIDTH = document.getElementById(eid).width; // get original width
for(var i = 0; i < arrayAreas.length; i++) {
GLOBAL_AREAS[i]= arrayAreas[i].coords;
}
GLOBAL_COUNT++;
}
function scaleArea() { // using values stored at load, recalculate new values for the current size
var arrayAreas = document.body.getElementsByTagName("area");
for(var i = 0; i < arrayAreas.length; i++) {
var ii = i + 1;
var rescale = document.getElementById(eid).width/GLOBAL_WIDTH ;
var sarray = GLOBAL_AREAS[i].split(","); // convert coordinates to a numeric array assuming comma-delimited values
var rarray = new Array();
for(var j = 0; j < sarray.length; j++) {
rarray[j] = parseInt(sarray[j]) * rescale; // rescale the values
rarray[j] = Math.round(rarray[j]);
} //alert( "GLOBAL " + GLOBAL_AREAS[i] + ":" + sarray.length + " SPLIT=" + sarray +rarray.length);
arrayAreas[i].coords=rarray.join(","); // put the values back into a string
}
showArea();
}
As you can see, they are pretty much the same. The only difference is that the top onw works, and the bottom one doesn't. Please help. And thank you for any explanation of how it works(Other than the basics, of course). Thanx!
A <form>element doesn't have a naturally occurring 'load' event, therefore getglobal() is not called in your version of the code.
Try reinstating <body onload="getglobal();">
Alternatively, find some other way to cause getglobal() to be called - eg in response to some user event.
How does the code work?
First, the HTML causes the DOM to be populated with :
a <form> element containing two buttons
an <img> element
an <map> element containing a number of areas
The document's <body> element has getglobal() attached to it as its onload handler, which causes several global variables to be set :
GLOBAL_WIDTH: the <img> element's initial width.
GLOBAL_AREAS: an array of the image map's initial area coords, "-264,320,442" etc.
GLOBAL_COUNT: which is set but not used.
By setting these global vars once, there's a lot less to do every time the image and its map are rescaled.
The two form buttons are each given a 'click' action by attaching onclick handlers :
"scaled smaller" - onclick="scaleImageDown()"
"scaled bigger" - onclick="scaleImageUp()"
The two functions scaleImageDown() and scaleImageUp() :
rescale the image by a factor of 0.5 or 2.
loop through the GLOBAL_AREAS array and manipulate the area nodes' coords attribute such that each of the coordinates is either divided or multiplied by 2. This has the desired effect of rescaling the entire map.
The utility function scaleArea() exists to avoid repetition of code in scaleImageDown() and scaleImageUp().