Селект с превью изображений

Тема в разделе "JavaScript", создана пользователем demon201984, 10 мар 2013.

Модераторы: ZiX
  1. demon201984

    demon201984 Постоялец

    Регистр.:
    27 сен 2008
    Сообщения:
    131
    Симпатии:
    19
    Имеется таблица в БД, в которой хранятся изображения - 2 поля id, название изображения и ссылка на изображение.
    Необходимо реализовать форму, в которой при выборе названия изображения из выпадающего списка в другом блоке будет отображаться превьюшка выбранного изображения.

    В сети нашел следующий пример:
    Код:
    <script language="JavaScript">
    function changeImage(form) {
    form.pic.src = form.imagename.value;
    }
    </script>
     
     
    
    <form name="form1">
     <img name="pic" src="images/1.jpg" alt=""></br>
    <select size=1 name="imagename" onChange="changeImage(this.form)">
     <option value="/images/1.png">Картинка 1</option>
    <option value="/images/2.png">Картинка 2</option>
    <option value=/images/3.png">Картинка 3</option>
    </select>
    </form>  
    Но он мне не подходит мне необходимо в поле value хранить id изобаржения, а ссылку на изображение хранить как-то иначе.

    В яваскрипт не силен, если кто знает как можно реализовать подскажите пожалуйста.
     
  2. ВладимирТрой

    ВладимирТрой Постоялец

    Регистр.:
    29 янв 2013
    Сообщения:
    53
    Симпатии:
    19
    можно попробовать через title (написал селекторы на jquery)
    Код:
    <script language="JavaScript">
    function changeImage(p) {
    	var form = $(p).closest("form");
    	var src = $(p).find("option:selected").attr("title");
    
    	form.find("[name=pic]").attr("src", src);
    }
    </script>
     
     
    
    <form name="form1">
     <img name="pic" src="images/1.jpg" alt=""></br>
    	<select size=1 name="imagename" onChange="changeImage(form)">
    		<option value="1" title="/images/1.png">Картинка 1</option>
    		<option value="2"  title="/images/2.png">Картинка 2</option>
    		<option value="3" title="/images/3.png">Картинка 3</option>
    	</select>
    </form>  
    
    
     
    bububu и demon201984 нравится это.
  3. intellion

    intellion Создатель

    Регистр.:
    25 ноя 2007
    Сообщения:
    11
    Симпатии:
    0
    Пример Владимира рабочий. Кроме title можно использовать и свой аттрибут (не входящий в стандартные)
     
  4. ВладимирТрой

    ВладимирТрой Постоялец

    Регистр.:
    29 янв 2013
    Сообщения:
    53
    Симпатии:
    19
    использование нестандартных атрибутов невалидно для верстки, w3c будет ругаться