dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
share rss forum feed


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

Re: Need to let user select image for table cells

I'm floundering, can anyone fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<script type="text/javascript">
function toggleCells(){
  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;
  }
;
</SCRIPT>
 
<style type="text/css">
.image1 { background-image: url(Red.jpg); width: 60px; height: 60px;}
.image2 { background-image: url(White.jpg); width: 60px; height: 60px;}
.image3 { background-image: url(Tan.jpg); width: 60px; height: 60px;}
.image4 { background-image: url(Brown.jpg); width: 60px; height: 60px;}
</style>
  
</head>
<body>
  
<table class="imagetable">
<tr>
<td  class="image1";" onclick="toggleCells("class")"></td>
</tr>
</table>
  
</body>
</html>
 

--
"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.