Изменение изображения SRC на основе SELECT - PullRequest
Новая
       13

Изменение изображения SRC на основе SELECT

1 голос
/ 10 июля 2009

У меня есть тег выбора, который заполняется списком файлов при каждой загрузке страницы. Я хотел бы, чтобы изображение менялось на выбранный файл каждый раз, когда на него нажимают в выбранном входе. Это то, что у меня есть сейчас, и оно не работает должным образом. Однако при щелчке изображение и текст видны / скрыты, как и должно быть. Любая помощь будет принята с благодарностью. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> Table Edit The Shakespeare Studio </title>
    <link rel="stylesheet" type="text/css" href="../styles.css" />
</head>
<body>
<script language="javascript" type="text/javascript">
  function edit_image1()
  {
    if (document.getElementById('select1').value == "0") {
      document.preview1.style.visibility = "hidden";
      document.getElementById('random1').style.visibility = "visible";
    } else {
      var selected = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
      document.preview1.style.visibility = "visible";
      document.preview1.src = "../resources/uploads/"+selected;
      document.getElementById('random1').style.visibility = "hidden";
    }
  }
</script>
<div id="everything">
  <form action='tableEdit.php' method='GET'>
    <table border='1' id='cal'>
      <tr id='top'><td> Page Name </td><td> Image to Use </td><td> Preview </td></tr>
      <tr>
        <td> about </td>
        <td>
          <select name='aboutImage' id='select1' onchange='edit_image1()';>
            <option value='0' selected> RANDOM IMAGE</option> 
            <option value='IMG_6027.JPG'>IMG_6027.JPG</option> 
            <option value='IMG_6032.JPG'>IMG_6032.JPG</option> 
            <option value='kissme-1.jpg'>kissme-1.jpg</option> 
          </select>
        </td>
        <td>
          <img name='preview1' src='../resources/uploads/0'></img>
          <h3 id='random1'> Random </h3>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 10 июля 2009

Когда я сделал нечто подобное, я создал новый объект Image в скрипте. Вы можете сделать это, просто создав элемент "<IMG>" и установив свойство innerHTML родительского элемента.

Редактировать: что-то вроде этого: 

<html>
<head>
    <title>Image Replacement Example</title>
</head>
<body>
<div id="imageHolder">
    <img src="http://stackoverflow.com/content/img/so/logo.png">
</div>
<br>
<button onClick="javascript:newImage();return false;">Click Me</button>

<script type="text/javascript">
    function newImage()
    {
        var holder = document.getElementById("imageHolder");
        holder.innerHTML = "<img src='http://serverfault.com/content/img/sf/logo.png'>"
    }
</script>

0 голосов
/ 11 июля 2009

Вы можете сохранить пути к изображениям в массиве и синхронизировать каждый с выбранным индексом, например так: 

<table border="1">
    <tr><td>Page Name</td><td>Image to Use</td><td>Preview</td></tr>
    <tr>
        <td>about</td>
        <td>
            <select id="select1">
                <option selected>RANDOM IMAGE</option> 
                <option>IMG_6027.JPG</option> 
                <option>IMG_6032.JPG</option> 
                <option>kissme-1.jpg</option> 
            </select>
        </td>
        <td>
            <img id="preview1" alt="image" src="0.JPG">
            <h3 id="random1">Random</h3>
        </td>
    </tr>
</table>

<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "0.JPG";
images[1] = "IMG_6027.JPG";
images[2] = "IMG_6032.JPG";
images[3] = "kissme-1.jpg";
function edit_image1() {
    var index = select1.selectedIndex;
    if (index !== 0) {
        preview1.src = images[index];
        random1.style.visibility = "hidden";
    } else {        
        preview1.src = images[Math.floor(Math.random() * selectLength)];
        random1.style.visibility = "visible";
    }
    return true;
}
select1.onchange = edit_image1;
</script>
0 голосов
/ 11 июля 2009

В вашем коде есть несколько ошибок, но вы определенно на пути к тому, чтобы заставить его работать.

Вы правильно думаете, чтобы изменить значение «src» изображения, это будет правильно, что появляется, но помните, что сервер должен подключиться и загрузить новое изображение.

используя тот же HTML, что и у вас, используйте этот код JavaScript: 

function edit_image(){
    var doc = document;
    var selectedIndex = doc.getElementById('select1').selectedIndex;
    var previewVisible = doc.getElementById("preview1").style.visibility;
    var randomVisible= doc.getElementById("random1").style.visibility; 

    if (selectedIndex === 0){
        previewVisible = "hidden";
        randomVisible = "visible";
    } else {
        var previewSrc = doc.getElementById("preview1").src;
        var selectValue = doc.getElementById('select1').options[selectedIndex].value;

        previewSrc = "../resources/uploads/"+ selectValue;
        previewVisible = "visible";
        randomVisible = "hidden";
    }

Я полагаю, что это также было бы хорошим временем, чтобы дать вам несколько советов по написанию эффективного Javascript. Причина, по которой я установил все эти локальные переменные, заключается в том, что локальные переменные намного быстрее, чтобы JavaScript мог читать и взаимодействовать с ними, чем с глобальными объектами. объект «документ» является частью глобальной области видимости, и доступ к нему все время замедляется по мере роста вашей страницы и функций.

Я также устанавливаю переменную для каждого свойства document.getElementById ("someid"), потому что вызовы функций DOM в браузере действительно очень медленные.

Кроме того, установка переменной выглядит так: 

var links = document.getElementsByTagName("A");

создает переменную, ссылающуюся на QUERY на DOM, NOT ссылка на массив, содержащий все ссылки на странице. Так как вы постепенно делаете следующее: 

links.style.visibility = "visible";
links.innerHTML = "some new text";

В действительности вы выполняете ДВА запроса, чтобы захватить каждый якорь на странице.

Извините, если это много информации одновременно, но этот пример кода выглядел как хороший способ дать вам несколько советов по написанию лучшего Javascript и помочь создать лучшие веб-страницы для Интернета: -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...