dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
1060
share rss forum feed


DataDoc
My avatar looks like me, if I was 2D.
Premium
join:2000-05-14
Martinsburg, WV
Reviews:
·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:
·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.

<html>
<head>
 
<style type="text/css">
.image1 { background-image: url(Red.jpg); width: 60; height: 60}
.image2 { background-image: url(White.jpg); width: 60; height: 60}
.image3 { background-image: url(Tan.jpg); width: 60; height: 60}
.image4 { background-image: url(Brown.jpg); width: 60; height: 60}
</style>
 
</head>
<body>
 
<table class="imagetable">
<tr>
<td class="image1"></td><td class="image1"></td><td class="image1"></td><td class="image1"></td><td class="image1"></td><td class="image1"></td><td 
 
class="image1"></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
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:
·Suddenlink

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