动态图片显示

Question

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;

Answer 1

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

Answer 2

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

Answer 3

怎么切换单元格的背景呢（就是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>

Answer 4

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

Answer 5

可以在页面里混写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>

Answer 6

<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会的不多，大概就是这么个思路。

Answer 7

<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>
...还是多了个;号。。哈哈，，没在编辑器里写好复制过来就是麻烦。。