动态图片显示

[right89757]

jsp+php做一个选购T恤的网页。可以选择T恤的底色、图案和自己输入文字，其中文字也可以选择字体颜色和大小。
怎样可以实现随时观察已选择的T恤样式（底色+图案+文字）
我保存了不同底色t恤的图片，用的radio button选择

function backgroundChoice (bgColor) {
		switch (bgColor) {
          		case "White": 
            		document.getElementById("bgColor").src = "T_White.png"; 
				//document.getElementById("designP").value = "This is Design 1"; 
           			break;
		 		case "Yellow": 
            		document.getElementById("bgColor").src = "T_Yellow.png"; 
			  //    document.getElementById("designP").value = "This is Design 2"; 
           			break;
				case "Blue": 
            		document.getElementById("bgColor").src = "T_Blue.png"; 
			//	document.getElementById("designP").value = "This is Design 3"; 
           			break;
				case "Green": 
            		document.getElementById("bgColor").src = "T_Green.png"; 
			//	document.getElementById("designP").value = "This is Design 4"; 
           			break;
				case "Pink": 
            		document.getElementById("bgColor").src = "T_Pink.png"; 
			//	document.getElementById("designP").value = "This is Design 5"; 
           			break;
				case "Red": 
            		document.getElementById("bgColor").src = "T_Red.png"; 
			//	document.getElementById("designP").value = "This is Design 6"; 
           			break;
				case "Purple": 
            		document.getElementById("bgColor").src = "T_Purple.png"; 
			//	document.getElementById("designP").value = "This is Design 7"; 
           			break;
				case "Gray": 
            		document.getElementById("bgColor").src = "T_Gray.png"; 
			//	document.getElementById("designP").value = "This is Design 8"; 
           			break;

[functionsub]

var backGround = {
    White : 'T_White.png',
    Yellow : 'T_Yellow.png',
    Blue : 'T_Blue.png',
    Green : 'T_Green.png',
    Pink : 'T_Pink.png',
    Red : 'T_Red.png',
    Purple : 'T_Purple.png',
    Gray : 'T_Gray.png'
}
function backgroundChoice (bgColor) {
    document.getElementById("bgColor").src = backGround[bgColor];
}

LZ你的代码也可以实现，不过不知道你到底想表达什么意思。 难道你的问题是背景跟图案重叠显示的问题么？？

[right89757]

引用 楼主 right89757 的回复:

jsp+php做一个选购T恤的网页。可以选择T恤的底色、图案和自己输入文字，其中文字也可以选择字体颜色和大小。 怎样可以实现随时观察已选择的T恤样式（底色+图案+文字） 我保存了不同底色t恤的图片，用的radio button选择JavaScript code?123456789101112131415161718192021222324252627282930313……

是的是的，就是重叠显示。难道要两个图片文件和文字重叠显示吗？

[functionsub]

引用 2 楼 right89757 的回复:

引用 楼主 right89757 的回复:jsp+php做一个选购T恤的网页。可以选择T恤的底色、图案和自己输入文字，其中文字也可以选择字体颜色和大小。 怎样可以实现随时观察已选择的T恤样式（底色+图案+文字） 我保存了不同底色t恤的图片，用的radio button选择JavaScript code?123456789101112131415161718192021……

是的，要达到你要的效果的话，用纯DOM实现的话只能这样了，2张图片，重叠显示， 或者是一个层设置背景图片来当背景图片用，里面再放一个img来当图案用，字的话也是同理。 要么用HTML5的canvas。

[right89757]

引用 2 楼 right89757 的回复:

引用 楼主 right89757 的回复:jsp+php做一个选购T恤的网页。可以选择T恤的底色、图案和自己输入文字，其中文字也可以选择字体颜色和大小。 怎样可以实现随时观察已选择的T恤样式（底色+图案+文字） 我保存了不同底色t恤的图片，用的radio button选择JavaScript code?123456789101112131415161718192021……

怎么切换单元格的背景呢（就是T恤的底色图片）？td有个id和background属性，然后怎么用jsp去控制他们？

function backgroundChoice (bgColor) {
		switch (bgColor) {
          		case "White": 
            		document.getElementById("bgColor").bgColor = "T_White.png"; 
				//document.getElementById("designP").value = "This is Design 1"; 
           			break;
		 		case "Yellow": 
            		document.getElementById("bgColor").bgColor = "T_Yellow.png"; 
			  //    document.getElementById("designP").value = "This is Design 2"; 
           			break;
。
。
。
。
<td style= colspan="4" rowspan="16" id="bgColor" background="T_White.png"></td>

[functionsub]

JSP不好控制的吧。 还是JS来控制 document.getElementById('bgColor').style.backgroundImage = 'url(T_White.png)';

[right89757]

引用 4 楼 right89757 的回复:

引用 2 楼 right89757 的回复:引用 楼主 right89757 的回复:jsp+php做一个选购T恤的网页。可以选择T恤的底色、图案和自己输入文字，其中文字也可以选择字体颜色和大小。 怎样可以实现随时观察已选择的T恤样式（底色+图案+文字） 我保存了不同底色t恤的图片，用的radio button选择JavaScript code?12345678910……

实在感谢，向您学习。

[functionsub]

可以在页面里混写JS跟JSP代码，JSP代码主要是用来给JS变量赋值，把你要用到的所有背景图片跟图案都赋值给JS变量，写法大概是这样：

<script type="text/javascript">
    var background = {};//存放背景图片
    var image = {};//存放图案
    <c:forEach items="${background}" var="s">
     	background['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}"></c:out>''
     </c:forEach>
    <c:forEach items="${image}" var="s">
     	image['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}"></c:out>''
     </c:forEach>
     function backgroundChoice (bgColor) {//设置背景图片
          document.getElementById('bgColor').style.backgroundImage = background[bgColor];
     }
     function imageChoice (color) {//设置图案
          document.getElementById('image').src = image[color];
     }
</script>

[functionsub]

<script type="text/javascript">
    var background = {};//存放背景图片
    var image = {};//存放图案
    <c:forEach items="${background}" var="s">
         background['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}"></c:out>';
     </c:forEach>
    <c:forEach items="${image}" var="s">
         image['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}">;</c:out>'
     </c:forEach>
     function backgroundChoice (bgColor) {//设置背景图片
          document.getElementById('bgColor').style.backgroundImage = background[bgColor];
     }
     function imageChoice (color) {//设置图案
          document.getElementById('image').src = image[color];
     }
</script>

上面的多了2个'。 主要是通过JSP来把你要用到的各种背景图片以及图案都放到JS变量里，然后再写就简单了。 上面写的foreach方法我就随便写写，JSP会的不多，大概就是这么个思路。

[functionsub]

<script type="text/javascript"> var background = {};//存放背景图片 var image = {};//存放图案 <c:forEach items="${background}" var="s"> background['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}"></c:out>'; </c:forEach> <c:forEach items="${image}" var="s"> image['<c:out value="${s.color}"></c:out>'] = '<c:out value="${s.imgurl}"></c:out>' </c:forEach> function backgroundChoice (bgColor) {//设置背景图片 document.getElementById('bgColor').style.backgroundImage = background[bgColor]; } function imageChoice (color) {//设置图案 document.getElementById('image').src = image[color]; } </script> ...还是多了个;号。。哈哈，，没在编辑器里写好复制过来就是麻烦。。