Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 01.05.2008, 23:02   #1
SNkMaster
 
Регистрация: 07.11.2007
Сообщений: 4
Репутация: 10
По умолчанию Форма. Выпадающий список

короче, нужно чтобы в выпадающем списке вместо текста выводились картинки. такое вообще возможно?
Код HTML:
<select> 
<option>1</option> 
<option>2</option> 
</select>
если тупо сделать вот так
Код HTML:
<select> 
<option><img src="1.jpg"></option> 
<option><img src="2.jpg"></option> 
</select>
ничего не получается
SNkMaster вне форума   Ответить с цитированием
Старый 02.05.2008, 00:48   #2
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,222
Репутация: 896

icq: 303-206-418
skype: ad-soft.info
По умолчанию

можно, хитрым способом с использованием ява-Скрипт
ADSoft на форуме   Ответить с цитированием
Старый 02.05.2008, 03:10   #3
SkyM@n
Laravel/Vue expert
Профессионал
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Адрес: /dev/random
Сообщений: 2,834
Репутация: 927
По умолчанию

http://skymanphp.blogspot.com/2008/05/blog-post.html
SkyM@n вне форума   Ответить с цитированием
Старый 02.05.2008, 20:02   #4
SNkMaster
 
Регистрация: 07.11.2007
Сообщений: 4
Репутация: 10
По умолчанию

а можете сюда выложить?
SNkMaster вне форума   Ответить с цитированием
Старый 02.05.2008, 20:20   #5
SkyM@n
Laravel/Vue expert
Профессионал
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Адрес: /dev/random
Сообщений: 2,834
Репутация: 927
По умолчанию

Цитата:
Сообщение от SNkMaster Посмотреть сообщение
а можете сюда выложить?
Да, конечно:
Код HTML:
<style type="text/css">
    .icon {
        height: 32px;
        width:  32px;
        background-repeat: no-repeat;
        padding-top: 1px;
        padding-bottom: 1px;
        background-color: white;
    }
    .group {
        height: 35px;
        background-color: white;
    }
</style>
 <script type="text/javascript" language="javascript">
    function doIcon( pVal ) {
        var obj = document.getElementById( 'imgCombo' );
        var img = '/file/imgselect/' + pVal + '.png';
        obj.style.background = "url( '" + img + "' ) no-repeat";
    }
</script>
    <form>
 <select id="imgCombo" onchange="javascript: doIcon( this.value );" style="width: 54px;" class="group">     <option style="background-image: url(http://userpic.livejournal.com/69139645/14354736) repeat:no-repeat;" class="icon" value="xclock"> </option>     <option style="background-image: url(http://userpic.livejournal.com/69139683/14354736);" class="icon" value="firefox"> </option>  
 <option style="background-image:url(http://userpic.livejournal.com/69139702/14354736);" class="icon" value="gimp"></option>  
 </select>
</form>
SkyM@n вне форума   Ответить с цитированием
Старый 15.03.2010, 01:58   #6
dikdikdik
 
Регистрация: 15.03.2010
Сообщений: 5
Репутация: 25
По умолчанию

Этот способ показывает картинки в самом списке, но не показывает что выбрано (в поле выбранного значения уже после выбора - нет картинки).

И второе - в IE6 это вообще не работает - картинок нет даже в выпадающем списке.
dikdikdik вне форума   Ответить с цитированием
Старый 15.03.2010, 03:36   #7
SkyM@n
Laravel/Vue expert
Профессионал
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Адрес: /dev/random
Сообщений: 2,834
Репутация: 927
По умолчанию

Цитата:
Сообщение от dikdikdik Посмотреть сообщение
Этот способ показывает картинки в самом списке, но не показывает что выбрано (в поле выбранного значения уже после выбора - нет картинки).

И второе - в IE6 это вообще не работает - картинок нет даже в выпадающем списке.
Покажи ваш код, который Вы используете.
Во-вторых, ие6?? - нет такого браузера. Он уже в мифах.
SkyM@n вне форума   Ответить с цитированием
Старый 15.03.2010, 04:03   #8
dikdikdik
 
Регистрация: 15.03.2010
Сообщений: 5
Репутация: 25
По умолчанию

С первым вопросом уже разобрался. У меня часть картинок повторялась - т.к. они могут повторятся но с разными цифрами-значениями, которые я вывожу рядом с картинками-фонами. Поэтому функция работала неправильно. Пришлось скопировать картинки и привести их имена к виду 01.gif, 02.gif и т.д. - и всё получилось.

Однако в Вашем же примере (по Вашей же ссылке) можно наблюдать похожую ситуацию:
http://skymanphp.blogspot.com/2008/05/blog-post.html
Там при выборе картинки браузера также рисунок не отображается в поле выбора (когда выпадающий список уже свёрнут обратно).

Что же касаемо IE6 - вашими бы молитвами... Однако - это браузер по умолчанию в XP (если ничего не устанвливать, а простых юзеров в мире большинство), но вы же не станете утверждать, что XP тоже похоронили?

Последний раз редактировалось dikdikdik; 15.03.2010 в 04:27.
dikdikdik вне форума   Ответить с цитированием
Старый 15.03.2010, 04:45   #9
SkyM@n
Laravel/Vue expert
Профессионал
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Адрес: /dev/random
Сообщений: 2,834
Репутация: 927
По умолчанию

Если у кого-то стит ХР. то он вряд ли пользуется ИЕ6. Сами то пробовали хоть день им пользоваться? Удобно? Вряд ли адекватный юзер будет на таком работать. Юзер любит все покрасивше, поудобнее.
Да и даже если сидят пользователи на ие6, так надо их оттуда стаскивать - кому же. если не разработчикам сайтов. Вон, даже майкрософт оффициально обьявила о его смерти. Остальное дело - за девелоперами.
Поодерживая ие6, вы только делаете хуже. Всем - и разработчикам, и пользователям, и сисадминистраторам.
Гугл его уже не поддерживает, что на нем тогда уже делать?

Последний раз редактировалось SkyM@n; 15.03.2010 в 04:48.
SkyM@n вне форума   Ответить с цитированием
Старый 15.03.2010, 15:03   #10
dikdikdik
 
Регистрация: 15.03.2010
Сообщений: 5
Репутация: 25
По умолчанию

Собственно, я и все в моём немаленьком радиусе обзора любят XP и уходить с него не собираются, при этом часть из них привыкли к IE и без восторгов воспринимают идею, что бывают и другие браузеры. Сам я проверяю кросплатформенность помимо файрфокса и оперы - всё в том же IE6, который у меня на XP, а ставить более другой IE - как-то и в голову не приходило, при том, что сам юзаю файрфокс...

Но у меня небольшой вопрос-развитие исходной темы.
Вот моя заготовка
http://archives.kh.ua/battle1.htm

В вот упрощенный листинг:

Код HTML:
<style type="text/css">
    .icon {
        height: 36px;
        width:  36px;
        background-repeat: no-repeat;
        padding-top: 1px;
        padding-bottom: 1px;
        background-position: right;
    }


</style>

<script type="text/javascript" language="javascript">
 function doIcon( pVal)
 {
  var obj = document.getElementById( 'imgCombo');
  var img = 'imgselect/' + pVal + '.gif';
  obj.style.background = "url( '" + img + "') no-repeat";
 }
</script>

<form>
 <select id='imgCombo' onChange="javascript: doIcon( this.value );" style="width: 65px;" class="icon">
                 <option style="background-image: url(imgselect/01.gif);" class="icon" value="01">2</option> 
                 <option style="background-image: url(imgselect/02.gif);" class="icon" value="02">3</option> 
                 <option style="background-image: url(imgselect/03.gif);" class="icon" value="03">4</option>
                 <option style="background-image: url(imgselect/04.gif);" class="icon" value="04">5</option>
                 <option style="background-image: url(imgselect/05.gif);" class="icon" value="05">4</option>
                 <option style="background-image: url(imgselect/06.gif);" class="icon" value="06">4</option>
 </select>
</form>
Не подскажите ли, как добиться, чтобы выбранная картинка с циферкой выглядели также как в списке (т.е. сначала циферка на белом фоне, потом картинка)?

Добавлять в функцию строку:
obj.style.background-position = "right";
пробовал - картинка вообще не отрисовывается после выбора.
dikdikdik вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ADO,DBGrid, выпадающий список ikeba БД в Delphi 6 02.11.2008 20:51
Выпадающий список Акашаев Нурлан Общие вопросы Delphi 3 27.06.2008 16:58
выпадающий список SunKnight БД в Delphi 1 24.03.2008 23:44
Выпадающий список в DBGrid Belik БД в Delphi 2 29.02.2008 19:25
выпадающий список Toxa Microsoft Office Excel 2 23.04.2007 09:40


22:50.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru