Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Suggestions on the right software package

Status
Not open for further replies.
mmogul

mmogul

IS-IT--Management
Dec 1, 2003
218
US
I want to develop a web page that allows the user to create a design on a grid - example: select a color for each cell in the grid -- like tiles on a floor.

So I want the user to be able to define the grid size (example: 10 x 12) and then select a color from a palette. Then the user can click on each cell in the grid to turn it to that color.

I have not done much web development work. I would like to find a tool that is good for developing this type of application and would not be too difficult to learn.

thanks
 
Sort by date Sort by votes
I'd ask in forum216. But you'll need to give more information, such a what the output is (surely you wouldn't just want a pretty 'game' onscreen - you'd want to do something with the data, right?)...

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Your other option is Flash.
But to do what you want, neither Flash nor Javascript will be an instant fix.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Thanks to both. BillyRay - actually the only output that could possibly be required might be the ability to print the design. I run a small importing company We distribute a tile used for playrooms, home gyms, health clubs etc and it comes in many colors / patterns. This would really just be a sales tool that would help users understand that they can create tile patterns. The idea is to make the site more "fun", thereby the user may be more likely to want to get more information.
 
Upvote 0 Downvote
Hi

LOL. I was almost sure this is your homework. (-:

Well, I think if you manage to have that "puzzle", attaching to a mail through the contact form would be fairly easy.

Personally I also would make it with JavaScript.

Feherke.
 
Upvote 0 Downvote
Here is a start:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">

<head><title>Tile Pattern</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function s(id){
cell=document.getElementById(id)
}
function c(bcolor){
cell.style.backgroundColor=bcolor
}
</script>
<style type="text/css">
body   {background-color:black; color:white; font-family:sans-serif}
table  {margin-bottom:20px}
td     {height:50px; width:50px}
th     {height:20px; width:60px}
</style></head>

<body onload="s('c1')">

<table border="1"><tr>
<td id="c1" onclick="s('c1')">&nbsp;</td>
<td id="c2" onclick="s('c2')">&nbsp;</td>
<td id="c3" onclick="s('c3')">&nbsp;</td>
</tr><tr>
<td id="c4" onclick="s('c4')">&nbsp;</td>
<td id="c5" onclick="s('c5')">&nbsp;</td>
<td id="c6" onclick="s('c6')">&nbsp;</td>
</tr><tr>
<td id="c7" onclick="s('c7')">&nbsp;</td>
<td id="c8" onclick="s('c8')">&nbsp;</td>
<td id="c9" onclick="s('c9')">&nbsp;</td>
</tr></table>

<table border="1"><tr> 
<th style="background:#ff0000;color:black" onclick="c('#ff0000')">RED</th>
<th style="background:#00ff00;color:black" onclick="c('#00ff00')">GREEN</th>
<th style="background:#0000ff;color:black" onclick="c('#0000ff')">BLUE</th>
</tr></table>

<h3>Click a tile and then click a color</h3>

</body></html>

Clive
 
Upvote 0 Downvote
I needed a distraction this evening so I did this

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="Author" content="Pete Eveleigh - Earl &amp; Thompson Marketing" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />

	<title>Tiles</title>

	<style type="text/css">
		/*<![CDATA[*/
		#pallette img {
			border:1px solid #ccc;
		}
	
		#grid {
			border:1px solid #ccc;
			padding:0;
			border-collapse:collapse;
		}
		
		#grid td {
			border:1px solid #ccc;
			border-collapse:collapse;
			padding:0;
			width:16px;
			height:16px;
		}
		
		#grid img {
			display:block;
		}
		/*]]>*/
	</style>
	
</head>

<body>
<div id="pallette">
	<img src="images/tiles/white.gif" alt="white" onclick="setcolour('white');return false;" />
	<img src="images/tiles/blue.gif" alt="blue" onclick="setcolour('blue');return false;" />
	<img src="images/tiles/green.gif" alt="green" onclick="setcolour('green');return false;" />
	<img src="images/tiles/red.gif" alt="red" onclick="setcolour('red');return false;" />
</div>

<table id="grid">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	
	
</table>


<script type="text/javascript" charset="utf-8">
		var colour = "blue";
		var grid = document.getElementById('grid');
		var cells = document.getElementsByTagName('TD');
		
		for(i=0;i<cells.length;i++){
			cells[i].onclick=function(){
				this.innerHTML='<img src="images/tiles/'+colour+'.gif" alt="blue" />';
			}
		}

		function setcolour(col){
			colour = col;

		}
		
	
</script>
</body>
</html>

You'd probably want to write something to dynamically generate the grid

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
You'll need some coloured 16x16px coloured gif files too

I used images instead of background colours so they print.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Digital Dose
  • Locked
  • Question
My website refreshes twice when it is opened on any browser. 1
Replies
3
Views
256
sartechy
sartechy
tyutghf
  • Locked
  • Question
Linkedin updates on website
Replies
0
Views
150
tyutghf
tyutghf
dkwel
  • Locked
  • Question
Working with Retina on a standard resolution
Replies
8
Views
149
audiopro
audiopro
Unknown1157
  • Locked
  • Question
XHTML validation help on W3
Replies
2
Views
95
spamjim
spamjim
c0deM0nK424
  • Locked
  • Question
Joomla Installation problem - Could not connect to the database ?
Replies
3
Views
108
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top