Javascript show PNG image

Я нашел этот скрипт онлайн. Это почти то, что мне нужно. Посмотрите:Javascript show PNG image

<script type="text/javascript"> 
    imageArray = new Array("NOimglink", "imglink", "imglink", "imglink"); 
    altArray = new Array("", "Red Star", "Yellow Star", "Pink Star"); 

    function show() { 
     var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value; 
     var text = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text; 
     document.testStar.src = imageArray[Index]; 
     document.testStar.alt = altArray[Index]; 
     document.getElementById("item").innerHTML = document.getElementById("select1").value; 
    } 
</script> 
<div id="item"></div> 
<form action="../action/return.html" method="post" id="menuForm" name="menuForm"> 
    <select id="select1" onchange="show()" name="select1"> 
     <option value="0" selected="selected">Choose a color</option> 
     <option value="1">Red Star</option> 
     <option value="2">Yellow Star</option> 
     <option value="3">Pink Star</option> 
    </select> 
    <img id="testStar" height="35" alt="red star" src="" width="35" border="0" name="testStar">

В любом случае, есть ли какой-либо другой способ, кроме использования всех строк массива? ImageArray и altArray? У меня есть более 50 опций выбора, но массив слишком много. Любой более простой способ?

источник

2013-08-11 Timmy6118CP

Пожалуйста, покажите свой HTML. Конечно, есть другие способы сделать (в основном) все - что не работает с этим путем? Какова цель здесь, просто для обмена изображениями? – DACrosby

* но массив слишком много * Почему? Это слишком большой? Можете ли вы сделать это динамически, используя серверное программное обеспечение (PHP/ASP)? – h2ooooooo

Я добавил. Проблема в. Когда я выбираю параметр, он показывает изображение. Я не хочу ARRAY в javascript. Я хочу, чтобы изображение привело к чему-то еще. ETC: IN PHP Версия: $ blabla = "justadomain.com/image/icons/$ID.png"; $ ID будет значением опции – Timmy6118CP

1.) Не используйте innerHTML, это проприетарный метод Microsoft JScript. Нет, потому что какой-то низкий лоб решил, что дедушка в стандарте не означает, что кто-то должен его использовать. XHTML и даже обычный HTML - это не текст, а синтаксис. Поэтому, когда вы позже ссылаетесь на элемент, он может быть или не быть там, потому что вы можете ссылаться на DOM, или вы можете ссылаться на ничего, потому что то, что вы считали кодом, было сброшено как куча текста.

2.) Пересмотрено после того, как вы уточнили свой вопрос.

Сохраните как example.xhtml и убедитесь, что вы используете изображения с этими именами переменных или вы изменяете имена переменных в коде на имена изображений, которые вы тестируете.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Dynamic JavaScript Image Generation</title> 
<script type="application/javascript"> 
//<![CDATA[ 
function change_image() 
{ 
var se = document.getElementById('select_image'); 
var img_src = se.options[se.selectedIndex].value; 
var img_alt = se.options[se.selectedIndex].text; 
var img = document.getElementById('img_target'); 
img.alt=img_alt; 
img.src=img_alt+'.png'; 
} 
//]]> 
</script> 
</head> 

<body> 

<form action="" method="get"> 
<fieldset> 
<label for="select_image">Select an Image</label> 
<select id="select_image" onchange="change_image();"> 
<option value="img0">Image 0</option> 
<option value="img1">Image 1</option> 
<option value="img2">Image 2</option> 
<option value="img3">Image 3</option> 
<option value="img4">Image 4</option> 
<option value="img5">Image 5</option> 
</select> 
</fieldset> 
</form> 

<div><img alt="" id="img_target" src="img0.png" /></div> 

</body> 
</html>

источник

2013-08-11 19:53:32 John

Это не то, что мне нужно – Timmy6118CP

Затем вам нужно уточнить, если вы не зададите конкретный вопрос, вы не получите конкретный ответ. «Это не то, что мне нужно» - это не то, как вы реагируете на людей, пытающихся помочь вам. – John

Я добавил. Проблема в. Когда я выбираю параметр, он показывает изображение. Я не хочу ARRAY в javascript. Я хочу, чтобы изображение привело к чему-то еще.ETC: IN PHP Версия: $ blabla = "justadomain.com/image/icons/$ID.png"; $ ID будет значением опции – Timmy6118CP

Если вы хотите избежать всех массивов, вам нужно немного изменить свой HTML. Массив служит для поиска ключей и без этого вам нужно установить значение val в предыдущем поле val. То есть, сделать ваш option value s равен образом СРКА, как так:

<option value="" selected="selected">Choose a color</option> 
<option value="imgLink.png">Red Star</option> 
<option value="imgLink2.png">Yellow Star</option> 
<option value="img3.jpg">Pink Star</option>

Теперь это просто вопрос установки option value к новому ЦСИ, и используя option text как текст альта.

function show() { 
    var elemSel = document.getElementById('select1'), 
     testStar = document.getElementById("testStar"), 
     newSrc = elemSel.options[ elemSel.selectedIndex ].value, 
     newAlt = elemSel.options[ elemSel.selectedIndex ].text; 
    testStar.src = newSrc; 
    testStar.alt = newAlt; 
    document.getElementById("item").innerHTML = "Src: "+newSrc+" |Alt: "+newAlt; 
}

http://jsfiddle.net/daCrosby/JkhxP/1/

Редактировать

Если вы не хотите, расширение файла в значение, просто удалите его:

<option value="" selected="selected">Choose a color</option> 
<option value="imgLink">Red Star</option> 
<option value="imgLink2">Yellow Star</option> 
<option value="img3">Pink Star</option>

И если вы хотите полную ссылку для нового src, просто добавьте его:

var elemSel = document.getElementById('select1'), 
    newSrc = elemSel.options[ elemSel.selectedIndex ].value; 
newSrc = "example.com/img/" + newSrc + ".png";

http://jsfiddle.net/daCrosby/JkhxP/2/

источник

2013-08-11 20:08:43 DACrosby

Это близко! Мне нужны только значения, которые должны быть идентификаторами, и ссылка на изображение: «example.com/img/$id.png» и т. Д. – Timmy6118CP

Если вам нужны значения, которые должны быть идентификаторами, вам нужен какой-то массив. Если ваши изображения не названы 'id1.png',' id2.png' и т. Д. – DACrosby

Javascript show PNG image

ответ

Смежные вопросы