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

[gruppastimul]

Есть сайт в шапке 3 картинки

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

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

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

 

[fs84]

1. На яве, путем определения разрешения моника и автохайдом заданных элементов при размерах меньше указанного (т.к. в яве знаний мало - то сорри помочь не могу).
2. CSS - Для просмотра ссылки Войди или Зарегистрируйся
Т.е. бэкграунд и текст поверх картинки прописываем стилями (типа link1, link2, link3)
Стилей (css файлов) несколько - css1 - 1024x728, css2 - 640x480, css3 - 480x320 и т.д., под разные размеры моника, при размере меньше указанного - выдаем стиль (напр. css3 - 480x320), где ссылка со стилем link2 задается с значением в цсс display:none; - т.е. скрыть элемент и не учитывать то место которое он должен был занимать.

Если какие проблемы - стучи в личку.

 

[gruppastimul]

получилось )

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

 

[sotee]

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

<script language="JavaScript">
    window.onresize= page_resize;
    
    function page_resize() 
    {
        if (document.body.clientWidth<600)
        {
             ...
        }
    }
</script>

 

[gruppastimul]

вот по первому ответу я сделал так -

<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 )) помогите )

 

[Dimkich]

Чесно говоря не знаю как вставлять и удалять стили при ресайзе окна...
ИМХО не получится никак....
Но вот такой вариант 100% работает.
Может стоит переделать немного?
Посмотреть вложение test.rar

 

[sotee]

Пример с изменением стилей при ресайзе

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

<SCRIPT LANGUAGE="JavaScript"> 
window.onresize= page_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>

 

[tvsm22]

получилось )

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

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

 

[gregzem]

По поводу OnResize - у меня были с ним проблемы в FireFox, этот обработчик не всегда вызывается (например, при использовании колеса мыши). Поэтому я бы еще сделал, чтобы page_resize() вызывался раз в полсекунды через SetTimeout(..).

 

[Bubbles]

Возник подобный вопрос.Поскольку тема практически совпадает,напишу сюда :
Для просмотра ссылки Войди или Зарегистрируйся
Нужно чтобы большое изображение (выделено зелёным) при меньшем размере монитора (1024x768) просто обрезалось (красный пунктир) - то есть горизонтальная прокрутка не допустима!