2013-05-06 5 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 Milan)을 선택한 팀에 따라 작은 아이콘을 추가하는 것입니다.

PS : 자바, 자바 스크립트, JSP에서 기본 지식 자바빈

내가 테이블 JSP 페이지에서 자바 스크립트를 만들려고

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";  
      } 
     } 

I가 온로드로 신체의 기능을 추가 = "loadImages()"하지만 이미지가 없습니다.

+0

당신이 해결에 어떤 노력을 한 것을 보여주십시오. 코드가 있습니까? 당신이 직면 한 어려움은 무엇입니까? –

+0

어려움? 내가 말한 것처럼, 좀 더 팀의 이름 뒤에 어떤 식으로 팀을 선택했는지에 따라 아이콘을 추가하는 방법에 대해서는 잘 모릅니다. – Dave

+0

@ 사용자가 선택한 이미지를 기반으로 한 이미지를 원하십니까? 그런데 왜 모든 그림을로드하고 있습니까? 또한 처음에는 모든 이미지의 불투명도를 0으로 설정하고 변경하면 선택한 팀의 이미지 불투명도를 1로 설정할 수 있습니다. –

답변

1

jsp를 사용하지 않고 javascript를 사용하면됩니다.

<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> 

이미지를 바꾸려면이 자바 스크립트 기능을 사용하십시오. 이미지의 옵션 값으로 이미지 이름을 지정하십시오. 그리고 내가 사용하는 확장 기능은 .png입니다. 이미지가 .png가 아니면 if-else 조건을 사용해야 할 수도 있습니다. 당신은 PNG에서 유벤투스에 대한 이미지가있는 경우처럼,

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

함수는 이제 더 나은

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

"Juventus.png", "AC Milan.jpg",으로 옵션 값을 변경 한 다음 확장 서버 측을 제거하는 것입니다 것, 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> 
관련 문제