Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
1

Картинка меняется при наведении мышки

28.10.2015, 03:15. Просмотров 1610. Ответов 13
Метки нет (Все метки)

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

В общем имеется вот такой код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

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

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


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

Помогите пожалуйста сделать так чтобы высота тоже в процентах растягивалась.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.10.2015, 03:15
Ответы с готовыми решениями:

при наведении картинка меняется...
Помогите разобрать скрипт: 1 &lt;script type=&quot;text/javascript&quot;...

Дергается меню при наведении мышки
Создал меню в бутстрап мышка наведена на средний пункт и он дернулся потому...

Как убрать подчеркивание при наведении мышки
в исходном коде написано следующее &lt;a...

При наведении курсора мышки сменить картинку
Не скажете как написан скрипт на изменении картинки при наведении. Не сложный а...

Как сделать так чтобы при наведении мышки на ссылку div менялось изображение при использовании z-index
Здравствуйте, уважаемые участники форума! Подскажите мне, пожалуйста, как...

13
Kven-M
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 218
28.10.2015, 12:37 2
Попробуйте значение height указать не 100%, а auto, при это ширину задайте в процентах.
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 14:39  [ТС] 3
Пробовал указывать в height не 100%, а auto как Вы сказали. Ничего не помогает. Я так понимаю ничего не получается из за того, что блок demo сделан в виде ссылки <a class="demo" href="#" . А ссылка разве не растягивается в процентах по высоте? Только в пикселях что ли? По ширине то в процентах все отлично растягивается.

Вот вообщем ссылка http://bronya-spb.ru/metallicheskiye-dveri-standart/haytek.html . Как Вы видите только кусочек картинки видно.

Ну помогите мне пожалуйста как нибудь решить эту проблему. Надо все таки сделать что бы не только ширина в процентах растягивалась, но и высота тоже.
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.10.2015, 15:26 4
Цитата Сообщение от faraon_forever Посмотреть сообщение
Ну помогите мне пожалуйста как нибудь решить эту проблему. Надо все таки сделать что бы не только ширина в процентах растягивалась, но и высота тоже.
1) Для того, чтобы указывать высоту/ширину чего либо в процентах, нужно чтобы высота/ширина родительского контейнера была известна. То есть, либо строго указываем родителю высоту в пикселях, либо высоту в процентах у всех родительских контейнеров вплоть до <html>
2) У картинки position:absolute, и она не влияет на размеры родительского контейнера
0
Kven-M
32 / 32 / 24
Регистрация: 16.04.2015
Сообщений: 218
28.10.2015, 15:33 5
Можно предположить, что действительно проблема связана с тем, что Вы поместили картинки в тег <a>. Вы отслеживаете наведение курсора на картинку, и тем самым она меняется на другую. В Вашем случае, я бы предложил использовать следующий код для смены картинок:
HTML5
1
2
3
<p><img src="uploads/2015/10/hitek-standart.jpg" width="34%" height="auto" 
onmouseover="this.src='uploads/2015/10/vnut_standart/hitek-2-standart.jpg'; this.width=34%;this.height=auto;" 
onmouseout="this.src='uploads/2015/10/hitek-standart.jpg'; this.width=34%;this.height=auto;" /></p>
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 15:41  [ТС] 6
Вы написали нужно строго указать в процентах строго вплоть до <html>/.

Спасибо большое за ответ. Но как мне это все организовать подскажите пожалуйста. Просто я в этом во всем еще чайник.

И еще вы написали что у картинки position:absolute, и она не влияет на размеры родительского контейнера.
Может можно как нибудь через !important организовать. Я слышал он вроде имеет приоритет

Простите, но я полный чайник. Подскажите пожалуйста как это организовать. Очень надо в процентах сделать не только ширину, но и высоту.

Для наглядного просмотра, ссылку на картинку я указал в посте выше
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.10.2015, 15:59 7
Например структура
HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>
<body>
<div class='container1'>
  <div class='container2'>
    <div class='img_container'><img src="http://www.cyberforum.ru/html/html/html/..."></div>
  </div>
</div>
</body>
<html>
css
CSS
1
2
3
4
5
6
7
8
html, body, .container1, .container2{
  width:100%;
  height:100%;
}
.img_container{
  width:73%;
  height:66%
}
Цитата Сообщение от faraon_forever Посмотреть сообщение
И еще вы написали что у картинки position:absolute, и она не влияет на размеры родительского контейнера.
Может можно как нибудь через !important организовать. Я слышал он вроде имеет приоритет
Дело не в приоритете, дело в том, что объект вырван из нормального потока и он не будет влиять на размеры/положение других объектов.
Цитата Сообщение от faraon_forever Посмотреть сообщение
Подскажите пожалуйста как это организовать. Очень надо в процентах сделать не только ширину, но и высоту.
Задавайте размер контейнера в %, устанавливайте ему background-image и меняйте его по ховеру
пример
HTML5
1
<div class='img'></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html, body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.img{
    width:100%;
    height:100%;
    background-image:url("http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    transition:all .5s;
}
.img:hover{
    background-image:url("http://purrfectcatbreeds.com/wp-content/uploads/2014/06/siberian-cat1.jpg");
}
http://jsfiddle.net/shakalaka/ca256whz/
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 16:14  [ТС] 8
Спасибо за ответ. Но я так понял Вы предлагаете через hover сделать. Но разве так как мне нужно через position:absolute не ужели не возможно организовать никак?

И еще в коде ниже Вы указали background-image:url. Но у меня много постов на сайте. И в каждом посте разные адреса картинок.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html, body{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.img{
    width:100%;
    height:100%;
    background-image:url("http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    transition:all .5s;
}
.img:hover{
    background-image:url("http://purrfectcatbreeds.com/wp-content/uploads/2014/06/siberian-cat1.jpg");
}

Даже не знаю как сделать. Жаль, но я в этом новичок
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.10.2015, 16:28 9
Цитата Сообщение от faraon_forever Посмотреть сообщение
Но разве так как мне нужно через position:absolute не ужели не возможно организовать никак?
Да что организовать-то? У вас ошибка была в указании процентных значений. Укажите процентные значения правильно. для картинки display:block; max-width:100%
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 16:54  [ТС] 10
Вставлял ваш код который Вы предложили

HTML5
1
2
3
<p><img src="uploads/2015/10/hitek-standart.jpg" width="34%" height="auto" 
onmouseover="this.src='uploads/2015/10/vnut_standart/hitek-2-standart.jpg'; this.width=34%;this.height=auto;" 
onmouseout="this.src='uploads/2015/10/hitek-standart.jpg'; this.width=34%;this.height=auto;" /></p>
Ничего не работает. Картинка не отображается. Вы указали не полный путь до картинок. Я решил указать полный путь до картинок. Тогда картинка начала отображаться. Но при наведении мыши на картинку. Она не меняется.

Увы ничего не получилось

Добавлено через 25 минут
Shakalaka, Какая ошибка в процентных значениях. Я и так указал процентные значения и для высоты и для ширины. Но почему то по ширине картинка растягивается и проценты работают. А по высоте вообще ничего не меняется в процентах. Только если в пикселях указываю, тогда меняется высота. Но мне нужно чтобы высота менялась в процентах тоже. А display: block и так указан в классе demo

Еще раз показываю код

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  .demo { 
    position:relative; 
    margin:0; 
    height: 100%;
    width: 32%;
    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);}
А это стоит в html
HTML5
1
2
3
4
<a class="demo" href="">
<img class="raz" src="http://bronya-spb.ru/wp-content/uploads/2015/10/hitek-standart.jpg" />
<img class="dva" src="http://bronya-spb.ru/wp-content/uploads/2015/10/vnut_standart/hitek-2-standart.jpg" />
</a>

А вот ссылка на сам пример. http://bronya-spb.ru/metallicheskiye-dveri-standart/haytek.html

Видимо ничего у меня не получится организовать в процентах
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.10.2015, 17:18 11
Цитата Сообщение от faraon_forever Посмотреть сообщение
Какая ошибка в процентных значениях. Я и так указал процентные значения и для высоты и для ширины.
Вопрос, для чего я писал вам все предыдущие посты? Даже цветом же выделил, показал разметку и css...
ЕСЛИ ВЫ УКАЗЫВАЕТЕ БЛОКУ ЗНАЧЕНИЕ ВЫСОТЫ В ПРОЦЕНТАХ, ДОЛЖНА БЫТЬ ОПРЕДЕЛЕНА ВЫСОТА РОДИТЕЛЯ, ЕСЛИ У ВАС РАЗМЕРЫ РОДИТЕЛЯ УКАЗАНЫ В ПРОЦЕНТАХ, ДОЛЖНО БЫТЬ ИЗВЕСТНО ЗНАЧЕНИЕ ЕГО РОДИТЕЛЯ И ТАК ВПЛОТЬ ДО КОРНЕВОГО ЭЛЕМЕНТА, ТО ЕСТЬ HTML
кусок вашей разметки
HTML5
1
2
3
4
5
6
7
8
<div class="entry-content post_content">
    <p>
        <a class="demo" href=""><br>
            <img class="raz" src="http://bronya-spb.ru/wp-content/uploads/2015/10/hitek-standart.jpg"><br>
            <img class="dva" src="http://bronya-spb.ru/wp-content/uploads/2015/10/vnut_standart/hitek-2-standart.jpg"><br>
        </a>
    </p>
</div>
вы указали высоту в процентах для a.demo, но у родителей p, div высота не задана явно, она auto;
http://jsfiddle.net/shakalaka/fsp9oq5h/ смотрите, я не знаю как вам еще объяснить..
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 17:40  [ТС] 12
Хорошо. Я прописал для родителей в процентах так как вы сделали тут http://jsfiddle.net/shakalaka/fsp9oq5h/

То есть в css я добавил вот это

CSS
1
2
3
4
5
6
html, body, .entry-content, p{
    height:100%;
}
.demo{
    background:#ccc;
}
Но по прежнему картинка не растянулась по высоте. Можете посмотреть сами. Вот ссылка http://bronya-spb.ru/metallicheskiye-dveri-standart/haytek.html
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
28.10.2015, 17:55 13
Цитата Сообщение от faraon_forever Посмотреть сообщение
Я прописал для родителей в процентах
Вам хоть говори, хоть стреляй... Сколько по-вашему родителей у вашего блока .demo?
Кто будет указывать высоту для <div id="content" class="clearfix"> и <div id="main" class="col620 clearfix" role="main"> и <article id="post-303" class="post-303 post type-post status-publish format-standard has-post-thumbnail hentry category-metallicheskiye-dveri-standart">
Я же вам уже раз 5 написал - все родители.
0
faraon_forever
0 / 0 / 0
Регистрация: 12.05.2013
Сообщений: 22
28.10.2015, 22:34  [ТС] 14
Извините я просто новичок в этом. Теперь я понял что нужно абсолютно во всех родителях указывать в процентах.
Но это не удобно. А в друг там этих родительных классов сотни целые.

Да и вообще даже если в каждой родительской категории прописать высоту в процентах. Вдруг потом еще шаблон криво станет работать.

Есть какой нибудь другой выход из ситуации? Помогите пожалуйста. Просто хочется чтобы изображение менялось и при этом растягивалось как в ширину так и в высоту
0
28.10.2015, 22:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.10.2015, 22:34

CSS, изменить фон div при наведении мышки
здравствуйте &lt;div id='nav'&gt;&lt;a href='#'&gt;Домой&lt;/a&gt;&lt;/div&gt; #nav{ ...

Изменить стиль внутреннего блока при наведении мышки
Есть код div.container{ border: 2px solid green; width: 200px; height:...

Не меняется блок при наведении курсора
.header__title{ font-size: 56px; margin-bottom: 30px; font-family:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru