Hi there, hoping someone can help me with this issue. I have a webpage with a background image of a game board. I want to create a table on top of the board. What is the best tool or way to be able to get the correct relative position Top/Left of the board to match the table and also to measure the gird cells on the image in pixels also for the table cell width and height?
Example: http://stream8media.com/demo/coffeecupQA/
Thank you in advance for any help with this issue.
Placing a table grid over an image
Craig Warren
Registered User
32 posts
paintbrush
Ambassador
3,816 posts
Is it not possible to just use the table itself for your gameboard?
If not, maybe you could make the table to the size you need, take a screen cap. and use that image for the background of a same-sized <div>, then position the table over it.
If not, maybe you could make the table to the size you need, take a screen cap. and use that image for the background of a same-sized <div>, then position the table over it.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Craig Warren
Registered User
32 posts
Sorry paintbrush, but that was not the answer I was looking for unfortunately, thank you though.
I will be applying javascript and css to style and compute the game. My question has more to do with the fact that I want to know how to measure the pixels of an image to position the table and it's cells ...position:relative Top:? Left:? on top of the background image exactly. If anyone knows how to take measurements in pixels or a tool i can use to accomplish this task please let me know.
http://stream8media.com/demo/coffeecupQA/
I hope I am making this clear enough to understand.
Thanks in advance.
I will be applying javascript and css to style and compute the game. My question has more to do with the fact that I want to know how to measure the pixels of an image to position the table and it's cells ...position:relative Top:? Left:? on top of the background image exactly. If anyone knows how to take measurements in pixels or a tool i can use to accomplish this task please let me know.
http://stream8media.com/demo/coffeecupQA/
I hope I am making this clear enough to understand.
Thanks in advance.
Eric Rohloff
Senior Advisor
20,245 posts
You can use JQuery to get pixel locations.
http://api.jquery.com/position/
http://api.jquery.com/position/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
paintbrush
Ambassador
3,816 posts
Sorry, I don't understand what you're trying to do then. Maybe someone else can figure it out for you. 
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Brian Durfee
Senior Advisor
1,096 posts
Craig Warren wrote:
Sorry paintbrush, but that was not the answer I was looking for unfortunately...
Sorry paintbrush, but that was not the answer I was looking for unfortunately...
Sounds like a game show...
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
paintbrush
Ambassador
3,816 posts
Yeah, no trip to the Bahamas for me 
(
)
()
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Eric Rohloff
Senior Advisor
20,245 posts
Here's a basic bounding box script that can get you started.
<script type="text/javascript">
function GetBox () {
var div = document.getElementById ("mydivID");
if (div.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
var rect = div.getBoundingClientRect ();
x = rect.left;
y = rect.top;
w = rect.right - rect.left;
h = rect.bottom - rect.top;
alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h);
}
else {
alert ("Your browser does not support this example!");
}
}
</script>
<button onclick="GetBox ()">Get the placement of the element with red border!</button>
function GetBox () {
var div = document.getElementById ("mydivID");
if (div.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
var rect = div.getBoundingClientRect ();
x = rect.left;
y = rect.top;
w = rect.right - rect.left;
h = rect.bottom - rect.top;
alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h);
}
else {
alert ("Your browser does not support this example!");
}
}
</script>
<button onclick="GetBox ()">Get the placement of the element with red border!</button>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
