dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
share rss forum feed


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

1 recommendation

reply to DataDoc

Re: Need to let user select image for table cells

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:
·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.