Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.10.2015, 02:19   #1
faraon_forever
Пользователь
 
Регистрация: 12.05.2013
Сообщений: 11
По умолчанию При наведении мышкой, меняется картинка

Здравствуйте Уважаемые Вебмастера.
Срочно нужна ваша помощь.

В общем имеется вот такой код
Код:
<style type="text/css">
  .demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
    
</style>

<a class="demo" href="#">
<img class="raz" src="http://изо2.jpg" />
<img class="dva" src="http://изо1.jpg" />
</a>


Так вот. При наведении мышкой на картинку, появляется другая. Все нормально. Но дело в том, что высота и ширина вот в этом блоке фиксированная. То есть в пикселях.
Код:
 .demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}
А мне нужно сделать в процентах, для того чтобы изображение растягивалось под любой экран.

Когда в этом блоке вместо width:400px я указываю width:32%. То картинка растягивается. Но только по ширине. Тогда я решил указать это и для высоты. Вместо height: 400px я прописал height: 100%. Но дело в том что, по высоте блок становится маленький. И вообще не растягивается.


Ребята почему только ширина в процентах растягивается, а высота в процентах не хочет. Только в пикселях.

Помогите пожалуйста сделать так чтобы высота тоже в процентах растягивалась.

Последний раз редактировалось Stilet; 28.10.2015 в 07:36.
faraon_forever вне форума Ответить с цитированием
Старый 29.10.2015, 21:58   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Вопрос Не совсем понятна задача

Можно вообще отказаться от использования <img>, примерно так
Код HTML:
<!DOCTYPE html>
<html>
<style>
.fon {
  position:absolute;
  height:27%;
  width:25%;
  background-image:url("http://img1.liveinternet.ru/images/attach/c/1//48/902/48902126_mashina.jpg");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.fon:hover {background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQjffsjq5l8fRyVuIFe4RWOF3x9pl8dBZL0Gi4djXoIV8lLzoo");}
</style>
<body>
  <div class="fon"></div>
</body>
</html>
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении курсора на кнопку меняется картинка Kurd57 Мультимедиа в Delphi 4 14.02.2012 19:14
Звук при наведении мышкой на кнопку Syltan JavaScript, Ajax 1 25.04.2010 07:36
Java скрипт, при наведении на карту она остается картой но картинка меняется Dimazess Помощь студентам 6 14.03.2010 16:46
получить значение ID при наведении мышкой badfilin JavaScript, Ajax 9 25.04.2009 19:35