Forum Moderators: open
I have got a form where I need users to click the images they want to delete from a MySQL DB on the server. They choose the images they want to delete by viewing thumbnails of the images.
I would like to position checkboxes under each image, with upto 6 images in one row. How can I do this using javascript?
Thanks for your help
If this is even close to what you wanted, I would load the style and javascript as external scripts, if you 'deploy'.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><STYLE type="text/css"><!--
BODY {
direction: ltr;
margin: 0px;
padding: 0px;
}
.imgBloc {
display: block;
float: left;
margin: 2em 3em 2em 3em;
}
.shoImg {
height: 120px;
width: 120px;
}
#imgBox {
display: block;
margin-left: 10%;
margin-top: 10%;
width: 80%;
}
.chkBox {
text-align: center;
}
// -->
</STYLE>
</head>
<body>
<div id="mainContainer">
<div id="imgBox"></div>
</div>
<script language="JavaScript"><!--
var imgSho2 = { };
(function(){
var someImg = "b3.jpg";
var arImg =[
"1:"+someImg,
"2:"+someImg,
"3:"+someImg,
"4:"+someImg,
"5:"+someImg,
"6:"+someImg,
"7:"+someImg,
"8:"+someImg,
"9:"+someImg,
"10:"+someImg
];
var imgPrefix ="img";
var inputPrefix ="inp";
function $(strID){ return document.getElementById(strID); }
function LPad10(valu,dmax){
/* 100trillion max */
return "000000000000".substr(0, dmax - valu.toString().length) +valu;
}
function addNewImg(numImg){
/* Crude, but avoids IE setAttribute stuff. */
$("imgBox").innerHTML = $("imgBox").innerHTML +"<div class=\"imgBloc\"><div class=\"shoImg\" id=\"" +imgPrefix +numImg +"\"></div><div class=\"chkBox\"></div></div>";
}
imgSho2.init = function(){
var rcrd,rnum,imgLoc,padNum;
var oBloc;
for (var i=0; i <arImg.length; i +=1){
rcrd =arImg[i].split(":");
rnum =rcrd[0];
padNum =LPad10(rnum,2);
imgLoc =rcrd[1];
addNewImg(padNum);
oBloc = $(imgPrefix +padNum );
oBloc.style.background = "url('" +imgLoc +"')";
oBloc.nextSibling.innerHTML = "<input type=\"checkbox\" ondrag\"imgSho2.dragIt(this)\" onclick=\"imgSho2.stayt(this)\"></input>";
oBloc.nextSibling.firstChild.setAttribute("id2",inputPrefix +padNum);
}
}
imgSho2.stayt = function(that){
alert(that.getAttribute("id2"))
}
})();
imgSho2.init();
// -->
</script>
</body>
</html>
I reiterate:
It's not clear what 'popdum' wanted. I suggested a way in script to accomplish a display with checkboxes. It's not unlike what you see in M$ live image searches. Sometimes it's not always such a clean separation between ECMAscript and style sheets. Such styles can even be modified using javascript.
