I have an html, js, and css file that together create a jigsaw puzzle. I know that when using inline css styling using the style attribute, I can access the DOM for top and left position of the image fairly easily. However, I need to read the top and left position when that information is located in an external stylesheet.
Here is my html
<!DOCTYPE html>
<html>
<head>
<title> Jigsaw Puzzle </title>
<script type = "text/javascript" src = "./jigsaw.js"></script>
<link rel="stylesheet" type="text/css" href="./jigsaw.css">
</head>
<body onload="return get_images()">
<h1> Solve the Jigsaw Puzzle! </h1>
<img id="grid" src="./puzzleback.gif">
</br>
</br>
<figure id="puzzle_pieces">
<img style="position: absolute; top:400px; left:0px;" id="pic_1" src="" onmousedown="grabber(event);">
<img id="pic_2" src="" onmousedown="grabber(event);">
<img id="pic_3" src="" onmousedown="grabber(event);">
<img id="pic_4" src="" onmousedown="grabber(event);">
<img id="pic_5" src="" onmousedown="grabber(event);">
<img id="pic_6" src="" onmousedown="grabber(event);">
<img id="pic_7" src="" onmousedown="grabber(event);">
<img id="pic_8" src="" onmousedown="grabber(event);">
<img id="pic_9" src="" onmousedown="grabber(event);">
<img id="pic_10" src="" onmousedown="grabber(event);">
<img id="pic_11" src="" onmousedown="grabber(event);">
<img id="pic_12" src="" onmousedown="grabber(event);">
</figure>
</body>
</html>
For the image id pic_1, I left the inline style attribute for testing purposes. Here is my external CSS stylesheet
h1 {
text-align: center;
}
#pic_1 {
position: absolute;
top: 400px;
left: 0px;
}
#pic_2 {
position: absolute;
top: 400px;
left: 100px;
}
#pic_3 {
position: absolute;
top: 400px;
left: 200px;
}
#pic_4 {
position: absolute;
top: 400px;
left: 300px;
}
#pic_5 {
position: absolute;
top: 400px;
left: 400px;
}
#pic_6 {
position: absolute;
top: 500px;
left: 0px;
}
#pic_7 {
position: absolute;
top: 500px;
left: 100px;
}
#pic_8 {
position: absolute;
top: 500px;
left: 200px;
}
#pic_9 {
position: absolute;
top: 500px;
left: 300px;
}
#pic_10 {
position: absolute;
top: 500px;
left: 400px;
}
#pic_11 {
position: absolute;
top: 600px;
left: 0px;
}
#pic_12 {
position: absolute;
top: 600px;
left: 100px;
}
Here is my Javascript file. This file is supposed to allow me to drag and drop the image files, and it works with the inline css style attribute like the one used in the omg id="pic_1" but I am not sure how to access the top and left attributes via DOM when the attributes are located in an external stylesheet
/* Shuffles the array of images */
function shuffle(array)
{
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
// while there remain elements to shuffle
while (currentIndex !== 0)
{
// Pick an element that remains
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
//Swap that element with the current element
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
/* Generates a random whole number inclusive for a max and min range */
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* Randomly select directory for the iaages and load images randomly */
function get_images ()
{
var puzzle_pieces = document.getElementById("puzzle_pieces");
var n = getRandomInt(1,3);
var m = [1,2,3,4,5,6,7,8,9,10,11,12];
m = shuffle(m);
for (var i = 0 ; i <= 12 ; i++)
{
puzzle_pieces.children[i].src = "./images"+n+"/img"+ n + "-" + m[i] + ".jpg";
}
}
/*
Define variables for the values computed by the grabber event
handler but needed by mover event handler
*/
var diffX, diffY, theElement;
// The event handler function for grabbing the word
function grabber(event) {
// Set the global variable for the element to be moved
theElement = event.currentTarget;
// Determine the position of the picture to be grabbed,
// first removing the units from left and top
var posX = parseInt(theElement.style.left);
var posY = parseInt(theElement.style.top);
// Compute the difference between where it is and
// where the mouse click occurred
diffX = event.clientX - posX;
diffY = event.clientY - posY;
// Now register the event handlers for moving and
// dropping the word
document.addEventListener("mousemove", mover, true);
document.addEventListener("mouseup", dropper, true);
// Stop propagation of the event and stop any default
// browser action
event.stopPropagation();
event.preventDefault();
} //** end of grabber
// *******************************************************
// The event handler function for moving the word
function mover(event) {
// Compute the new position, add the units, and move the word
theElement.style.left = (event.clientX - diffX) + "px";
theElement.style.top = (event.clientY - diffY) + "px";
// Prevent propagation of the event
event.stopPropagation();
} //** end of mover
// *********************************************************
// The event handler function for dropping the word
function dropper(event) {
// Unregister the event handlers for mouseup and mousemove
document.removeEventListener("mouseup", dropper, true);
document.removeEventListener("mousemove", mover, true);
// Prevent propagation of the event
event.stopPropagation();
} //** end of dropper
