Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/20: Рейтинг темы: голосов - 20, средняя оценка - 4.85
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73

Наложение изображений

27.02.2013, 20:22. Показов 4240. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как лучше всего зделать етот елемент? У меня есть елементы которые отмечены на фото, как лучше всего ето реализовать?
Миниатюры
Наложение изображений  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
27.02.2013, 20:22
Ответы с готовыми решениями:

Наложение изображений друг на друга
Не получается наложить изображение 4.gpeg на logo.png. Второе изображение то что 4.gpeg просто квадратиком отображается. Может кто...

Наложение 2 изображений друг на друга
Мучался, мучался, сам не додумался, нужна помощь:) Есть 2 изображения, ну и обычный див блок, который располагается под ними . Нужно...

Прыгает размер изображений в карусели изображений CSS
Здравствуйте, рад что нашел такой форум. Есть сайт 124print.ru/1102.html Подскажите пожалуйста как убрать адаптивность картинок в...

11
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
27.02.2013, 22:55
Что именно реализировать? То самое, что и на картинке?
0
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73
27.02.2013, 23:59  [ТС]
Да, у меня элементы сейчас просто в столбик, как их лучше всего позиционировать?
0
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
28.02.2013, 00:05
Ну как я вижу, это вообще как слайдер там, что делается простым js кодом, css и html
JavaScript
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script type="text/javascript">
jQuery(document).ready(function(){
 function htmSlider(){
  /* Зададим следующие параметры */
  /* обертка слайдера */
  var slideWrap = jQuery('.slide-wrap');
  /* кнопки вперед/назад и старт/пауза */
  var nextLink = jQuery('.next-slide');
  var prevLink = jQuery('.prev-slide');
  var playLink = jQuery('.auto');
  /* Проверка на анимацию */
  var is_animate = false;
  /* ширина слайда с отступами */
  var slideWidth = jQuery('.slide-item').outerWidth();
  /* смещение слайдера */
  var scrollSlider = slideWrap.position().left - slideWidth;
 
  /* Клик по ссылке на следующий слайд */
  nextLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
    });
   }
  });
 
  /* Клик по ссылке на предыдующий слайд */
  prevLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap
     .css({'left': scrollSlider})
     .find('.slide-item:last')
     .prependTo(slideWrap)
     .parent()
     .animate({left: 0}, 500);
   }
  });
 
  /* Функция автоматической прокрутки слайдера */
  function autoplay(){
   if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
     is_animate = false;
    });
   }
  }
 
  /* Клики по ссылкам старт/пауза */
  playLink.click(function(){
   if(playLink.hasClass('play')){
    /* Изменяем клас у кнопки на клас паузы */
    playLink.removeClass('play').addClass('pause');
    /* Добавляем кнопкам вперед/назад клас который их скрывает */
    jQuery('.navy').addClass('disable');
    /* Инициализируем функцию autoplay() через переменную
       чтобы потом можно было ее отключить
    */
    timer = setInterval(autoplay, 1000);
   } else {
    playLink.removeClass('pause').addClass('play');
    /* показываем кнопки вперед/назад */
    jQuery('.navy').removeClass('disable');
    /* Отключаем функцию autoplay() */
    clearInterval(timer);
   }
  });
 
 }
 
 /* иницилизируем функцию слайдера */
 htmSlider();
});
</script>
CSS
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/* Задаем сброс обтекания */
.clear {
    margin-top: -1px;
    height: 1px;
    clear:both;
    zoom: 1;
}       
/* Slider */
.slider {
    /* Ширина контейнера */
    width: 900px;
    /* Внешние тступы сверху и снизу */
    margin: 50px auto;
    /* Внутренние отступы для ссылок navy */
    padding: 0 30px;
    /* Позиционирование */
    position: relative;
    /* Скроем то что выходит за границы */
    overflow: hidden;
}
/* Двойной клик по кнопкам вперед/назад вызывает выделение всех элементов слайдера,
поэтому предотвращаем это */
.slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; }
.slider::selection { background: transparent; color: #fff; text-shadow: none; }
 
.slide-list {
    position: relative;
    margin: 0;
    padding: 0;
}
.slide-wrap {
    position: relative;
    left: 0px;
    top: 0;
    /* максимально возможная ширина обертки слайдера */
    width: 10000000px;
}
.slide-item {
    /* Ширина слайда */
    width: 280px;
    /* Внутренние отступы */
    padding: 10px;
    /* Обтекание */
    float: left;
}
.slide-title {
    /* Шрифт */
    font: bold 16px monospace;
    /* Указываем, что элемент блочный */
    display: block;
}
 
/* навигация вперед/назад */
.navy {
    /* абсолютное позиционирование */
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    /* ширина элементов */
    width: 30px;
    cursor: pointer;
}
.prev-slide {
    left: 0;
    background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat;
}
.next-slide {
    right: 0;
    background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat;
}
.navy.disable {
    background: #dbdbdb;
}
/* навигация старт/пауза */
.auto {
    width: 7px;
    height: 11px;
    cursor: pointer;
    margin: 10px auto;
}
.play {
    background: url(bg/play.png) center no-repeat;
}
.pause {
    background: url(bg/pause.png) center no-repeat;
}
Разметка слайдера очень проста:
общий контейнер (slider),
Три контейнера для навигации (две кнопки на предыдущий/следующий слайд (navy) и одна кнопка(auto) для кнопок старт/пауза),
контейнер для всех слайдов (slide-list),
обертка всех слайдов (slide-wrap).
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
26
27
<div class="slider">
  <div class="slide-list">
    <div class="slide-wrap">
 
      ... тут будут слайды в контейнере slide-item
      <div class="slide-item">
        <img src="img/img-1.jpg" alt="" />
        <span class="slide-title">Первый слайд</span>
      </div>
 
<div class="slide-item">
        <img src="img/img-2.jpg" alt="" />
        <span class="slide-title">Второй слайд</span>
      </div>
 
<div class="slide-item">
        <img src="img/img-3.jpg" alt="" />
        <span class="slide-title">Третий слайд</span>
      </div>
 
    </div>
    <div class="clear"></div>
  </div>
  <div name="prev" class="navy prev-slide"></div>
  <div name="next" class="navy next-slide"></div>
  <div class="auto play"></div>
</div>
1
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73
28.02.2013, 11:17  [ТС]
Подскажи пожалуйста, как мне сделать чтоб при наведении в область рамки, появлялось новое изображение
Я пробовал
CSS
1
#рамка img:hover
то тогда новое изображение появляется только в том случае если курсор только на ободке рамки, а когда курсор в середине рамки то изображение пропадает!

Добавлено через 12 минут
Я немного не правильно выразился! Просто у меня внутри рамки есть изображение, и если я навожу курсор на изображение в рамке, hover перестает действовать! Как обойти эту проблему!
0
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
28.02.2013, 11:51
Делай хавер не для img, а для ссылки. То есть a:hover
0
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73
28.02.2013, 15:59  [ТС]
Извини я немного не понял тебя!
У меня это реализовано так!
HTML5
1
2
3
4
5
6
<div id="last_work1">
     <span>
          <a href"#"><img src="img/ramka1.png" class="last_work1_1"></a>
          <a href"#"><img src="img/last_work1.png" class="last_work1_2"></a>
     </span>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#last_work1 span img{
    float:left;
    position: relative;
}
 
.last_work1_1 {
    top: 100px;
    left: -395px;
}
 
.last_work1_2 {
    top: 148px;
    left: -599px;
}
изображение например
CSS
1
background:url(img/f.png) no-repeat;
0
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
28.02.2013, 16:05
Смотри, для смены изображения при наведении ставишь бэкгранд какому-то класу a:hover. То есть, будет
CSS
1
 .ssilka a:hover{background:#000;}
0
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73
28.02.2013, 16:39  [ТС]
Пробовал a:hover, так ничего и не получилось(
0
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
28.02.2013, 16:42
В хтмл класс ссылке ставил?
0
2 / 2 / 0
Регистрация: 17.02.2013
Сообщений: 73
28.02.2013, 17:18  [ТС]
Да
HTML5
1
<a href"#" class="last_w"><img src="img/ramka1.png" class="last_work1_1"></a>
0
9 / 9 / 1
Регистрация: 24.02.2013
Сообщений: 59
28.02.2013, 17:41
maakkss, а что ты и ссылке, и картинке ставишь класс? убери у картинки класс и кинь мне ксс у ссылки
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
28.02.2013, 17:41
Помогаю со студенческими работами здесь

Наложение
Почему ровно не становятся элементы на картинку??? :wall: Картинки в архиве. Результат работы сайта на скрине &lt;!DOCTYPE...

наложение
Есть аватарка, есть статус онлайн, забыл как сделать чтобы статус ореинтировался от углов аватарки и налаживался на аватарку!

Наложение
Привет всем. Есть два прямоугольника.Один поярче , другой потемнее.Как засунуть тот что потемнее , под тот что поярче ?

Наложение <canvas>
Отсутствие ответов говорит о том что задача не осуществима или о том что я непонятно объясняю задачу?

Наложение слоёв
Имеется два похожих блока с содержимым, т.е. с примерной структурой блоков и стилей. В них есть наложение слоёв, фон задаётся задним...


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

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru