How can I click on a link which opens an image, then only display part of that image
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
javascript html css
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
add a comment |
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
javascript html css
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05
add a comment |
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
javascript html css
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
javascript html css
javascript html css
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
edited Nov 21 '18 at 15:10
Blue-Radio
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
asked Nov 21 '18 at 14:51
Blue-RadioBlue-Radio
52
52
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05
add a comment |
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05
add a comment |
2 Answers
2
active
oldest
votes
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
add a comment |
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
answered Nov 21 '18 at 15:07
HeadyHeady
400318
add a comment |
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%2f53414677%2fhow-can-i-click-on-a-link-which-opens-an-image-then-only-display-part-of-that-i%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
add a comment |
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
add a comment |
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
answered Nov 21 '18 at 15:10
Pedro LimaPedro Lima
440411
440411
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
add a comment |
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
1
1
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
Thank you this seems to work. I just have to work out the position of my points of interest now. Cheers
– Blue-Radio
Nov 21 '18 at 15:27
add a comment |
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
answered Nov 21 '18 at 15:07
HeadyHeady
400318
add a comment |
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
answered Nov 21 '18 at 15:07
HeadyHeady
400318
add a comment |
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
answered Nov 21 '18 at 15:07
HeadyHeady
400318
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
answered Nov 21 '18 at 15:07
HeadyHeady
400318
answered Nov 21 '18 at 15:07
HeadyHeady
400318
answered Nov 21 '18 at 15:07
HeadyHeady
400318
answered Nov 21 '18 at 15:07
HeadyHeady
400318
400318
add a comment |
add a comment |
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.
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%2f53414677%2fhow-can-i-click-on-a-link-which-opens-an-image-then-only-display-part-of-that-i%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
Can you isolate the issue that's preventing you from tieing it to the button? You're on the right way with using height, width and background-position to slice out the correct part of the image, but without code to look at or a more in depth explanation, we have no idea why you can't bind it to the button. When the button is clicked, you should calculate which values you need to show the correct image slice and pass these to the second page. ( url parameter, postMessage, ... ). Then the second page just has to look at these values and change the CSS on the image inline.
– Shilly
Nov 21 '18 at 14:56
Please provide a code example to show what you have tried.
– Peter
Nov 21 '18 at 14:58
I tried doing the css background position, and then added the class to the anchor tag in the button, but nothing happened when I clicked the button. Everything I've found online has had the image being displayed in a div in the same page, but my image is to be a separate page that gets opened on click of the button. Obviusly I don't want to have separate images being called in for every section of the map.
– Blue-Radio
Nov 21 '18 at 15:01
Hence you need to pass the correct data from the first page to the second. Easiest way is just including a query or a hash fragment inside the url and have the second page look at these so it knows whcih aprt of the map to show.
– Shilly
Nov 21 '18 at 15:05