create artistic map and place html at specific coordinates
hi to all I have a noob question, I want to create a custom map of a little island, I wrote custom cause it will be an artistic handwritten map, and on this map I will place some links, locations and markers. in a first moment I used the map and area tags to place the links at specific coordinates, but developing this I think that is impossible to insert html inside the defined area tags, cause everything that I place inside the area tags will end below the map image, so I have to place the marker and locations editing the map image and I really dislike this solution.. so what is the best practice to insert text, markers or html into an image at specific coordinates? in this moment I'm using an absolute position for any element inside the image container and then playing with top and left I can place the html anyware.. but this is very difficoult to adapt for all screen sizes especially for mobile..
I'm reporting a little of code of the last solution
HTML
<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/w35ua82v/
And this is the solution with map tag not working
HTML
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/bu4fsoeL/
javascript html css dictionary coordinates
asked Nov 15 at 19:54
silvered.dragon
135
add a comment |
hi to all I have a noob question, I want to create a custom map of a little island, I wrote custom cause it will be an artistic handwritten map, and on this map I will place some links, locations and markers. in a first moment I used the map and area tags to place the links at specific coordinates, but developing this I think that is impossible to insert html inside the defined area tags, cause everything that I place inside the area tags will end below the map image, so I have to place the marker and locations editing the map image and I really dislike this solution.. so what is the best practice to insert text, markers or html into an image at specific coordinates? in this moment I'm using an absolute position for any element inside the image container and then playing with top and left I can place the html anyware.. but this is very difficoult to adapt for all screen sizes especially for mobile..
I'm reporting a little of code of the last solution
HTML
<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/w35ua82v/
And this is the solution with map tag not working
HTML
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/bu4fsoeL/
javascript html css dictionary coordinates
asked Nov 15 at 19:54
silvered.dragon
135
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44
add a comment |
hi to all I have a noob question, I want to create a custom map of a little island, I wrote custom cause it will be an artistic handwritten map, and on this map I will place some links, locations and markers. in a first moment I used the map and area tags to place the links at specific coordinates, but developing this I think that is impossible to insert html inside the defined area tags, cause everything that I place inside the area tags will end below the map image, so I have to place the marker and locations editing the map image and I really dislike this solution.. so what is the best practice to insert text, markers or html into an image at specific coordinates? in this moment I'm using an absolute position for any element inside the image container and then playing with top and left I can place the html anyware.. but this is very difficoult to adapt for all screen sizes especially for mobile..
I'm reporting a little of code of the last solution
HTML
<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/w35ua82v/
And this is the solution with map tag not working
HTML
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/bu4fsoeL/
javascript html css dictionary coordinates
asked Nov 15 at 19:54
silvered.dragon
135
hi to all I have a noob question, I want to create a custom map of a little island, I wrote custom cause it will be an artistic handwritten map, and on this map I will place some links, locations and markers. in a first moment I used the map and area tags to place the links at specific coordinates, but developing this I think that is impossible to insert html inside the defined area tags, cause everything that I place inside the area tags will end below the map image, so I have to place the marker and locations editing the map image and I really dislike this solution.. so what is the best practice to insert text, markers or html into an image at specific coordinates? in this moment I'm using an absolute position for any element inside the image container and then playing with top and left I can place the html anyware.. but this is very difficoult to adapt for all screen sizes especially for mobile..
I'm reporting a little of code of the last solution
HTML
<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/w35ua82v/
And this is the solution with map tag not working
HTML
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa-
lefkada.png" alt="Lefkada" width="320" height="500" border="0"
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>
CSS
#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}
https://jsfiddle.net/bu4fsoeL/
javascript html css dictionary coordinates
javascript html css dictionary coordinates
asked Nov 15 at 19:54
silvered.dragon
135
asked Nov 15 at 19:54
silvered.dragon
135
edited Nov 15 at 20:44
asked Nov 15 at 19:54
silvered.dragon
135
asked Nov 15 at 19:54
silvered.dragon
135
asked Nov 15 at 19:54
silvered.dragon
135
135
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44
add a comment |
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53327012%2fcreate-artistic-map-and-place-html-at-specific-coordinates%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53327012%2fcreate-artistic-map-and-place-html-at-specific-coordinates%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You may want to include some code to give an example of what exactly you've tried so far. It helps to have something to build off of.
– Chase Ingebritson
Nov 15 at 19:58
I included a little of code hoping it helps to find a starting point
– silvered.dragon
Nov 15 at 20:44