I am making a dynamic image loader that will have 3 hotspots at the bottom of every image. These hot-spots will call functions.I'm having two issues right now:1) When the page first loads, my content div won't size correctly to the image until I loop through the entire array.2) I need to get the hot-spots on the bottom of the images and have it be fairly consistent regardless of image size. I want my hot-spots to always be at the bottom of the image.The CSS top, left height and width values are hard coded right now just so I can have a starting point. I cannot seem to get them to change dynamically to the image when the page loads.\[code\]<!DOCTYPE HTML><html> <head> <style type="text/css"> #content{ position: relative; margin: 20px 0 20px 40px; padding: 5px 0; background-repeat: no-repeat; padding: 10px; border:1px solid black; } #hotspot-a{ position: absolute; top: 1040px; left: 0px; width: 272px; height: 83px; background-color: transparent; border: 1px solid red; } #hotspot-b{ position: absolute; top: 1040px; left: 290px; width: 272px; height: 83px; background-color: transparent; border: 1px solid yellow; } #hotspot-c{ position: absolute; top: 1040px; left: 580px; width: 272px; height: 83px; background-color: transparent; border: 1px solid green; } </style> <script type="text/javascript" src="http://stackoverflow.com/questions/12803792/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#image").attr("src", images[0]); }); var badClicks = 0; var skipClicks = 0; var goodClicks = 0; var iCount = 0; var images = []; images[0] = "images/document.png"; images[1] = "images/document2.png"; images[2] = "images/document3.png"; function nextImage(){ iCount++; //If there are no more images in the array, go back to the first image if (images[iCount]==null) { iCount = 0; }; //Change image source to new image $("#image").attr("src", images[iCount]); //Set content wrapper width & height to current image's $("#content").css("width", $("#image").css("width")); $("#content").css("height", $("#image").css("height")); //Store content wrapper's new width and height into variables var h = $("#content").css("height"); var w = $("#content").css("width"); //Move hotspots to bottom of new image $("#hotspot-a").css("top", h); $("#hotspot-b").css("top", h); $("#hotspot-c").css("top", h); //Change width of hotspots } //Do something with data for "bad" hotspot function bad(){ badClicks++; } //Do something with data for "skip" hotspot function skip(){ skipClicks++; nextImage(); } //Do something with data for "good" hotspot function good(){ goodClicks++; } //Show the collected data function displayResults(){ $("#results").append("<br />Bad: " + badClicks + " Skip: " + skipClicks + " Good: " + goodClicks); } </script> </head> <body> <div id="content"> <img id="image" /> <div id="hotspot-wrapper"> <div id="hotspot-a" onclick="bad();"></div> <div id="hotspot-b" onclick="skip();"></div> <div id="hotspot-c" onclick="good();"></div> </div> </div> <br /> <div id="results"> <button onclick="displayResults();" style="text-align: center">Show results</button> </div> </body></html>\[/code\]Thanks! Any help or advice is greatly appreciated!
Position divs to always be at the bottom of an image
- Thread starter ucoxx86
- Start date