2013-05-06 72 views
-2

我有以下页面 enter image description here加载图像被提交

CODE

<table border="0" cellspacing="1" cellpadding="1" id="echipajucator" title="Echipa Jucator"> 
    <tr> 
     <th><div align="left"><span>Echipa</span></div></th> 
    </tr> 
</table> 

<table cellspacing="2" cellpadding="1" id="echipa"> 
    <tr> 
     <td> 
      <select name="selectechipa" id="select" onclick="check_list()"> 
       <option value="AC Milan" id="milan">Milan</option> 
       <option value="Juventus" id="juve">Juventus</option> 
       <option value="Napoli" id="nap">Napoli</option> 
       <option value="Bayern Munchen" id="bmun">B.Munchen</option> 
       <option value="Real Madrid" id="realm">Real Madrid</option> 
       <option value="Valencia" id="vale">Valencia</option> 
       <option value="P.S.G" id="psg">PSG</option> 
       <option value="Arsenal" id="ars">Arsenal</option> 
       <option value="Man. Untd" id="manutd">Man. United</option> 
       <option value="Chelsea" id="chls">Chelsea</option> 
      </select> 
     </td> 
    </tr> 
</table> 

当我提交我的形式,我得到这个表

enter image description here

<form name="atrbjucator"> 
<table> 
    <% 
     response.setContentType("text/html"); 
     String docType = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " + "Transitional//EN\">\n"; 
     String title = "Parametrii Jucator"; 
    %> 
    <% out.println(docType + 
      "<html>\n" + 
      "<head><title>"+title + "</title></head>\n"+ 
      "<body bgcolor=\"#FDF5E6\">\n" + 
      "<h1 align=center>" + title + "</h1>\n" + 
      "<table border=1 align=center>\n" + 
      "<tr bgcolor=\"#FFAD00\">\n" + 
      "<th>Nume Parametru<TH>Valoare Parametru"); 
     %> 
    <%-- http://www.roseindia.net/tutorial/servlet/useBeanInServlet.html --%> 
    <tr><td>Nume</td><td>${jucator.nume}</td></tr> 
    <tr><td>Prenume</td><td>${jucator.prenume}</td></tr> 
    <tr><td>Varsta</td><td>${jucator.varsta}</td></tr> 
    <tr><td>Pozitie</td><td>${jucator.pozitie}</td></tr> 
    <tr><td>Echipa</td><td>${jucator.selectechipa}</td></tr> 
    <% 

我想要做的是在提交的表格中根据选定的球队在球队名称(AC米兰)后添加一个小图标。

PS: 在Java,JavaScript中,JSP基础知识,JavaBeans的

我试图创建在JSP页面中的JavaScript和表

function loadImages() { 
      if (document.getElementById("select")) {   
       document.getElementById("milan").src = "/HTML-CODE/icons/milan.png"; 
       document.getElementById("juve").src = "/HTML-CODE/icons/juventus.png"; 
       document.getElementById("nap").src = "/HTML-CODE/icons/napoli.png"; 
       document.getElementById("bmun").src = "/HTML-CODE/icons/bayern.png"; 
       document.getElementById("realm").src = "/HTML-CODE/icons/madrid.png"; 
       document.getElementById("vale").src = "/HTML-CODE/icons/valencia.png"; 
       document.getElementById("psg").src = "/HTML-CODE/icons/psg.png"; 
       document.getElementById("ars").src = "/HTML-CODE/icons/arsenal.png"; 
       document.getElementById("manutd").src = "/HTML-CODE/icons/machester.png"; 
       document.getElementById("chls").src = "/HTML-CODE/icons/chelsea.png";  
      } 
     } 

我添加了功能上的身体的onload = “loadImages()”,但我没有图像。

+0

请出示你已经把一些精力来解决这一点。你有任何代码吗?你面临什么困难? – 2013-05-06 16:27:33

+0

困难?正如我所说的,根据我从第一种形式选择的球队,我们不知道如何在球队名字后面添加一个图标。 – Dave 2013-05-06 16:45:06

+0

@Dave你想只有一个基于用户选择的图像,不是吗?那你为什么要加载所有的图片。如果你是,你最初可以将所有图像的不透明度设置为0,并且可以将选中的图像的不透明度设置为1. – 2013-05-06 16:50:43

回答

1

这样做只是使用JavaScript,没有jsp。

<script> 
function changeimage(choice){ 
document.getElementById('icon').src=choice + ".png"; 
} 
</script> 

<img src="" id="icon" width='52' height='50'> 


<table cellspacing="2" cellpadding="1" id="echipa"> 
     <tr> 
      <td> 
       <select name="selectechipa" id="select" onchange="changeimage(this.value);"> 
        <option value="AC Milan" id="milan">Milan</option> 
        <option value="Juventus" id="juve">Juventus</option> 
        <option value="Napoli" id="nap">Napoli</option> 
        <option value="Bayern Munchen" id="bmun">B.Munchen</option> 
        <option value="Real Madrid" id="realm">Real Madrid</option> 
        <option value="Valencia" id="vale">Valencia</option> 
        <option value="P.S.G" id="psg">PSG</option> 
        <option value="Arsenal" id="ars">Arsenal</option> 
        <option value="Man. Untd" id="manutd">Man. United</option> 
        <option value="Chelsea" id="chls">Chelsea</option> 
       </select> 
      </td> 
     </tr> 
    </table> 

使用此javascript函数更改图像,请确保将图像命名为选项值。我使用的扩展名为.png,如果您在.png中没有图像,则可能必须使用if-else条件。如果你喜欢在PNG有像尤文图斯,其余全部为jpg,

if (choice=="Juventus") image="Juventus.png"; 
else image= choice+".jpg"; 

你的功能现在将有

document.getElementById('icon').src=image; 
更好

是改变选项的值,"Juventus.png", "AC Milan.jpg",,然后剥去扩展服务器端。

-1

我已经做到了!

<script type="text/javascript"> 
     function loadImage() { 
       if (document.getElementById("jucatorechipa").innerHTML == "AC Milan") { 
        icn.src="HTML-CODE/icons/AC Milan.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Arsenal") { 
        icn.src="HTML-CODE/icons/Arsenal.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Bayern Munchen") { 
        icn.src="HTML-CODE/icons/Bayern Munchen.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Chelsea") { 
        icn.src="HTML-CODE/icons/Chelsea.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Juventus") { 
        icn.src="HTML-CODE/icons/Juventus.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Man. Untd") { 
        icn.src="HTML-CODE/icons/Man. Untd.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Napoli") { 
        icn.src="HTML-CODE/icons/Napoli.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "PSG") { 
        icn.src="HTML-CODE/icons/PSG.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Real Madrid") { 
        icn.src="HTML-CODE/icons/Real Madrid.png"; 
       } 
       if (document.getElementById("jucatorechipa").innerHTML == "Valencia") { 
        icn.src="HTML-CODE/icons/Valencia.png"; 
       } 
     } 
    </script> 

这里使用这个脚本:

<tr><td>Echipa</td><td><span id="jucatorechipa">${jucator.selectechipa}</span> <img align="top" id="icn"/></td></tr>