2013-05-06 70 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>