dslreports logo
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
1104
share rss forum feed


DataDoc
My avatar looks like me, if I was 2D.
Premium
join:2000-05-14
Martinsburg, WV
Reviews:
·Comcast
·Suddenlink

Need to let user select image for table cells

My wife has asked for a webpage that she can use to lay out an afghan using squares she's crocheted.

I'd like to have a table (7x9) that lets her right-click in a cell and choose which image will be shown in that cell. She should be able to choose among 4 images, with one of these being the default when it first loads.

I can lay out the table and appropriate cells, but I only have outdated knowledge of HTML, no JS and this is beyond me. Can anyone give me a starting point?
--
"Executive orders" or rule by fiat. You decide.


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
Quick and dirty way would be to setup each cell to have a fixed width and height. Assign a class, say "pattern1" to each cell. Create styles pattern1..patternn that has a background image of each of the patterns. Use jquery to assign a click event to each cell that cycles between patternx and patternx+1 cycling when n is reached.

Then to use it, she'd just need to click on each cell she wants to change, cycling between the images.


DataDoc
My avatar looks like me, if I was 2D.
Premium
join:2000-05-14
Martinsburg, WV
Reviews:
·Comcast
·Suddenlink
Thanks for the suggestions.

I've got a start to the page using 1 row and 4 styles, but after searching for jquery code to cycle images in a TD I'm stumped how to proceed.

--
"Executive orders" or rule by fiat. You decide.


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7
reply to DataDoc
javascript code:
$("td").click(function() {
var $class = this.attr("class");
this.removeClass($class);
switch($class){
case "image1":
this.addClass("image2");
break;
case "image2":
this.addClass("image3");
break;
case "image3":
this.addClass("image4");
break;
case "image4":
this.addClass("image1");
break;
}
});

No guarantees there are aren't any syntax errors as it's not tested in a browser but it should be enough to get an idea what to do.


DataDoc
My avatar looks like me, if I was 2D.
Premium
join:2000-05-14
Martinsburg, WV
Reviews:
·Comcast
·Suddenlink
I'm floundering, can anyone fix this?

--
"Executive orders" or rule by fiat. You decide.


cdru
Go Colts
Premium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7

1 recommendation

All sorts of issues. You were mixing pure javascript with jQuery features. Here's things fixed. You'll need to remove the colors from the 4 image classes when you use actual images.

html code:
<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function toggleCells(element){
switch(element.className){
case "image1":
element.className = "image2";
break;
case "image2":
element.className = "image3";
break;
case "image3":
element.className = "image4";
break;
case "image4":
element.className = "image1";
break;
}
}
</script>

<style type="text/css">
table{border:solid 1px Black;border-collapse:collapse}
table td{width:60px; height:60px;;border:solid 1px gray}
.image1 { background: Red url('Red.jpg');}
.image2 { background: White url('White.jpg');}
.image3 { background: Tan url('Tan.jpg');}
.image4 { background: Brown url('Brown.jpg');}
</style>

</head>
<body>

<table class="imagetable">
<tr>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
</tr>
<tr>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
</tr>
<tr>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
</tr>
<tr>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
<td class="image1" onclick="toggleCells(this);"></td>
</tr>
</table>

</body>
</html>


DataDoc
My avatar looks like me, if I was 2D.
Premium
join:2000-05-14
Martinsburg, WV
Reviews:
·Comcast
·Suddenlink

1 edit
Wow, thanks for fixing this! I've made the change to use images and now my wife can use pics of the actual squares for trying a layout.

Thanks again for taking the time to help.
--
"Executive orders" or rule by fiat. You decide.