Как сделать чтобы картинки автоматически убирались при маленьком разрешении экрана ?

Тема в разделе "Веб-дизайн", создана пользователем gruppastimul, 8 сен 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. gruppastimul

    gruppastimul Ваш

    Регистр.:
    22 окт 2006
    Сообщения:
    802
    Симпатии:
    130
    Есть сайт в шапке 3 картинки
    [​IMG]

    как сделать, чтобы при уменьшения экранного разрешения картинки не наезжали друг на друга, а пропадала какая-нибудь картинка (например под номером 2) и шапка уже выглядела так

    [​IMG]

    а то у меня получается только так

    [​IMG]

    надеюсь понятно )))
     
  2. fs84

    fs84 Читатель

    Заблокирован
    Регистр.:
    19 дек 2006
    Сообщения:
    150
    Симпатии:
    43
    1. На яве, путем определения разрешения моника и автохайдом заданных элементов при размерах меньше указанного (т.к. в яве знаний мало - то сорри помочь не могу).
    2. CSS - http://www.nulled.ws/showpost.php?p=191590&postcount=40
    Т.е. бэкграунд и текст поверх картинки прописываем стилями (типа link1, link2, link3)
    Стилей (css файлов) несколько - css1 - 1024x728, css2 - 640x480, css3 - 480x320 и т.д., под разные размеры моника, при размере меньше указанного - выдаем стиль (напр. css3 - 480x320), где ссылка со стилем link2 задается с значением в цсс display:none; - т.е. скрыть элемент и не учитывать то место которое он должен был занимать.

    Если какие проблемы - стучи в личку.
     
    kirf и gruppastimul нравится это.
  3. gruppastimul

    gruppastimul Ваш

    Регистр.:
    22 окт 2006
    Сообщения:
    802
    Симпатии:
    130
    получилось )

    а можно чтобы так же это все работало не только при смене разрешения у монитора, но так же если мышкой уменьшаешь размер окна и автоматически происходило такое вот маштабирование путем убирания не нужных элементов на сайте )
     
  4. sotee

    sotee Создатель

    Регистр.:
    10 июл 2008
    Сообщения:
    17
    Симпатии:
    5
    На событие window.onresize нужно повесить функцию, которая будет в зависимости от размеров окна (document.body.clientWidth и document.body.clientHeight) прятать картинку или подгружать нужный css

    PHP:
    <script language="JavaScript">
        
    window.onresizepage_resize;
        
        function 
    page_resize() 
        {
            if (
    document.body.clientWidth<600)
            {
                 ...
            }
        }
    </script>
     
    gruppastimul нравится это.
  5. gruppastimul

    gruppastimul Ваш

    Регистр.:
    22 окт 2006
    Сообщения:
    802
    Симпатии:
    130
    вот по первому ответу я сделал так -

    PHP:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- 
    Script Begin
      
    if (screen.width==800)
        {  
    document.write("<link rel='Stylesheet' href='css/style3.css'>");
        }
      else if (
    screen.width==1024)
        {  
    document.write("<link rel='Stylesheet' href='css/style2.css'>");
        }
      else
        {  
    document.write("<link rel='Stylesheet' href='css/style.css'>");
        }
    //  Script End -->
    </SCRIPT>
    как мне тоже самое вставить в window.onresize )) помогите )
     
  6. Dimkich

    Dimkich Постоялец

    Регистр.:
    10 июл 2007
    Сообщения:
    119
    Симпатии:
    36
    Чесно говоря не знаю как вставлять и удалять стили при ресайзе окна...
    ИМХО не получится никак....:ah:
    Но вот такой вариант 100% работает.
    Может стоит переделать немного?
    Посмотреть вложение test.rar
     
    gruppastimul нравится это.
  7. sotee

    sotee Создатель

    Регистр.:
    10 июл 2008
    Сообщения:
    17
    Симпатии:
    5
    Пример с изменением стилей при ресайзе

    PHP:
    <link id="lnk" rel="stylesheet" type="text/css" href="style.css" />

    <
    SCRIPT LANGUAGE="JavaScript"
    window.onresizepage_resize

    function 
    page_resize()  
    {
      
    obj=document.getElementById("lnk");
      if (
    document.body.clientWidth<800
        
    obj.href='css/style3.css'
      else 
        if (
    document.body.clientWidth<1024
          
    obj.href='css/style2.css'
        else 
          
    obj.href='css/style.css'
    }
    </SCRIPT> 
     
  8. tvsm22

    tvsm22

    Регистр.:
    20 мар 2008
    Сообщения:
    321
    Симпатии:
    54
    Я конечно не знаю, что за сайт вы делаете, но разумно ли это, убирать картинки, если окно изменяется мышкой. Я бы испугался :)
     
  9. gregzem

    gregzem

    Регистр.:
    21 окт 2007
    Сообщения:
    200
    Симпатии:
    63
    По поводу OnResize - у меня были с ним проблемы в FireFox, этот обработчик не всегда вызывается (например, при использовании колеса мыши). Поэтому я бы еще сделал, чтобы page_resize() вызывался раз в полсекунды через SetTimeout(..).
     
  10. Bubbles

    Bubbles

    Регистр.:
    27 июл 2007
    Сообщения:
    327
    Симпатии:
    68
    Возник подобный вопрос.Поскольку тема практически совпадает,напишу сюда :
    [​IMG]
    Нужно чтобы большое изображение (выделено зелёным) при меньшем размере монитора (1024x768) просто обрезалось (красный пунктир) - то есть горизонтальная прокрутка не допустима!
     
Статус темы:
Закрыта.