Увеличение картинки при наведении

olgamar · 29.02.2012

Добрый день!
Прошу помощи у форума. На финальном этапе верстки страницы столкнулась с проблемой. Все скрипты, которые я видела на форуме или нагуглила, прекрасно работают в теле страницы, но не на нужном мне месте. Есть подозрение, что здесь либо конфликт стилей на полосе, либо я не правильно оформляю список. Буду очень благодарна за подсказку, как сделать ряд картинок с тем, чтобы при наведении на маленькую картинку всплывала большая.

HTML

HTML:

 <div id="beads">
		   <ul>
		    <li><img align="top" src="new Array/orientalsmallred.jpg" width="137" height="174" alt="Бусы в восточном стиле"></li>
		    <li><img align="top" src="new Array/orientalsmallred.jpg" width="137" height="174" alt="Бусы в восточном стиле"></li>
		    <li><img align="top" src="new Array/orientalsmallred.jpg" width="137" height="174" alt="Бусы в восточном стиле"></li>
		    <li><img align="top" src="new Array/orientalsmallred.jpg" width="137" height="174" alt="Бусы в восточном стиле"></li>
		    </ul>
		    </div>

CSS

HTML:

#beads {
width:680px;
position:relative;
top:10px;
}
#beads ul{
list-style:none;
margin:0;
padding:0;
}
#beads li{
display:inline;
 
}

#beads li img {
border:solid 1px #eba121;
margin:5px;

}

BaNru · 01.03.2012

1) Я же давал ссылку на CSS3 Галерею.

2) Событие "наведения" - это :hover

Код:

#beads li img:hover {
width: 200;
height: 200;
}

olgamar · 01.03.2012

Спасибо! Я еще не освоила CSS3. Проблема в том, что при таком увеличении растр растягивается и теряет четкость. Я думала, можно каким то образом при наведении показывать новую, увеличенную картинку. А потом, у меня будет не одна картинка в списке, а четыре и каждая при наведении должна показывать разные картинки соответственно

не работает код

dimamen777 · 01.03.2012

olgamar сказал(а):
Спасибо! Я еще не освоила CSS3. Проблема в том, что при таком увеличении растр растягивается и теряет четкость. Я думала, можно каким то образом при наведении показывать новую, увеличенную картинку. А потом, у меня будет не одна картинка в списке, а четыре и каждая при наведении должна показывать разные картинки соответственно

не работает код

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

BaNru · 01.03.2012

Special for olgamar
:biggrin:

Примерно так же, но с использованием CSS3, в моем блоге реализовано всплытие shortlinks (значок справа от заголовков)

olgamar · 01.03.2012

Special for BaNru

http://www.luckyframe74.com/index2.html

ну, это моя первая самостоятельная страница, так что...) Dimamen777, у меня тоже поначалу все дергалось. Я поняла, что тут нужно правильно подобрать ширину общего контейнера и всплывающих блоков, чтобы они не перекрывали друг друга. В общем, код такой:

HTML

HTML:

<div id="b">
		    <ul>
		    <li id="img1"><a href="#"><img src="img.jpg" width="137" height="174" /></a></li>
	 <li id="img2"><a href="#"><img src="img.jpg" width="137" height="174" /></a></li>
		    <li id="img3"><a href="#"><img src="img.jpg" width="137" height="174" /></a></li>
	 <li id="img4"><a href="#"><img src="img.jpg" width="137" height="174" /></a></li>
		    </ul>
		    </div>

CSS

HTML:

#b {
width:680px;
position:relative;
top:10px;
}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#b ul{
list-style:none;
margin:0;
padding:0;
}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#b li{
display:inline;
 
}

#b li img {
border:solid 1px #eba121;
margin:5px;

}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#img1:hover img {
position: absolute;
width:250px;
height: 300px;
top:-110px;
padding-bottom:-100px;[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#img2:hover img {
position: absolute;
width:250px;
height: 300px;
top:-110px;
padding-bottom:-100px;
}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#img3:hover img {
position: absolute;
width:250px;
height: 300px;
top:-110px;
padding-bottom:-100px;
}[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]#img4:hover img {
position: absolute;
width:250px;
height: 300px;
top:-110px;
bottom:110px;
right:75px;[/size][/font][/color]
[color=#5A5A5A][font=helvetica][size=4]}

А какой js тут можно еще применить, если не секрет?

и что произошло при передаче СSS?!

BaNru · 01.03.2012

И? А где там

olgamar сказал(а):
Я думала, можно каким то образом при наведении показывать новую, увеличенную картинку.

?!
И где отсутствие

olgamar сказал(а):
растр растягивается и теряет четкость

??

А то что блоки туда сюда прыгают - это так и надо?

vla · 01.03.2012

BaNru сказал(а):
растр растягивается и теряет четкость

тут два варианта:

надо иметь два изображения - миниатюра и изо для просмотра
миниатюру сделать из картинки хорошего качества сильно уменьшив в помощью width и height

BaNru · 01.03.2012

vla сказал(а):
тут два варианта: надо иметь два изображения - миниатюра и изо для просмотра миниатюру сделать из картинки хорошего качества сильно уменьшив в помощью width и height

BaNru сказал(а):
Special for olgamar :biggrin: Примерно так же, но с использованием CSS3, в моем блоге реализовано всплытие shortlinks (значок справа от заголовков)

vla · 01.03.2012

[member=BaNru], я и не спорю! Это первый вариант - две картинки:

<img src="/images/cat48.png" alt="Кошка"> - маленькая
<img src="/images/cat256.png" alt="Кошка"> - большая

BaNru · 01.03.2012

1) А зачем тогда его озвучивать, если я пример выложил двумя постами выше?
2) А второй вариант отпадает, ибо картинки при уменьшение без сглаживания получается ступенчатым.

Еще раз перечитай тему с начала.

olgamar · 01.03.2012

BaNru сказал(а):
И? А где там

olgamar сказал(а):

Я думала, можно каким то образом при наведении показывать новую, увеличенную картинку.

Нажмите, чтобы раскрыть...

?!
И где отсутствие

olgamar сказал(а):

растр растягивается и теряет четкость

Нажмите, чтобы раскрыть...

??

А то что блоки туда сюда прыгают - это так и надо?

При наведении показывается увеличенная картинка, по крайней мере у меня так во всех браузерах. Левая картинка сильно размыта.
Наверное, не надо, чтобы картинки прыгали. Поэтому я с утра вопрос и задала, как правильно сделать, ответа не было, поэтому как получилось, так и получилось

мне бы просто коррекцию кода получить.

Я пока совершенно не понимаю, что я сделала не правильно

Тигра когда-то писал код для увеличения картинки при наведении. У него была одна картинка, которая на hover увеличивалась. Я его переделала под себя, переложила на список, подозреваю, что где-то ошиблась, только не знаю где.
Как выглядит код с двумя картинками?

И как я применю CSS3 если у меня сайт на XHTML?!

Milera · 01.03.2012

1) Я же давал ссылку на CSS3 Галерею.

ксс3 на данный момент зло, очень большой процент браузеров еще его не поддерживает, в смысле очень много людей сидят на устаревших браузерах. Хотя конечно ксс3 очень удобен, но что-то мне подсказывает, что полноценно его использовать можно будет еще очень не скоро, от ие 6-7 отделаться еще не можем толком

вам надо сделать простенький яваскрипт код, при наведении увеличивать картинку, чтобы у вас ничего не скакало, сделайте 4 дополнительных элемента, с display:hidden; при наведении яваскриптом display:hidden убираем, ну а когда мышка уходит, то возвращается. В jquery для этого есть замечательное свойство hover, а обычным яваскриптом надо писать и на наведение и на убирание.

И как я применю CSS3 если у меня сайт на XHTML?!

да какая разница XHTML или HTML, да и уверена что х-кода у вас на сайте не используется.

olgamar · 01.03.2012

вроде не используется. Milera спасибо, но я новичок в web, я не знаю js.) вместо этого сейчас я могу использовать только какое-то готовое решение. Мне почему-то казалось, что CSS3 работает только в HTML5, сейчас вижу, что ошибалась...поэтому я его и не взяла

motek · 01.03.2012

olgamar сказал(а):
...И как я применю CSS3 если у меня сайт на XHTML?!

выбор стилей не зависит от заявленного доктайпа..., но у Вас стоят костыли для 5 ишака :blink: - зачем тогда css3?
если у Вас такие "дремучие" пользователи, то и :hover не подайдет
предложу вариант на jquery - тестировал в ИЕ6 - ниже нету

клац

olgamar · 01.03.2012

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

я училась по старым видеоурокам, сейчас переучиваюсь по htmlbook)

motek · 01.03.2012

так код там прямо на странице...

olgamar · 01.03.2012

заранее прошу прощения за может быть, странный вопрос.. мне нужно только вставить HTML и CSS в документ, больше ничего не нужно, мне как то нужно устанавливать jquery?

Milera · 01.03.2012

CSS3 работает только в HTML5

если вы о надписи
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

то открою вам тайну

Дальше
<!DOCTYPE html
ни один браузер не ходит, и какие бармаглотики написаны после никому не интересно, поэтому вполне можно писать <!DOCTYPE html>, например гугл именно так и делает

ой да точно, display:none; я с чем-то перепутала видимо

Просто мысля на коленке писалась.

motek · 01.03.2012

olgamar сказал(а):
заранее прошу прощения за может быть, странный вопрос.. мне нужно только вставить HTML и CSS в документ, больше ничего не нужно, мне как то нужно устанавливать jquery?

если хотите работать автономно (локально) - то залейте в папку со скриптами и поменяйте путь,
или можно подключить внешнюю библиотеку - тогда перед закрывающим </head> добавьте :

Код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Увеличение картинки при наведении

Познающая

Пацифизжу

Познающая

Well-Known Member

Пацифизжу

Познающая

Пацифизжу

Well-Known Member

Пацифизжу

Well-Known Member

Пацифизжу

Познающая

New Member

Познающая

злой как @

Познающая

злой как @

Познающая

New Member

злой как @

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей