Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
#1

Ссылки в картинки баннера Слайд-шоу - HTML, CSS

28.03.2016, 13:17. Просмотров 590. Ответов 11
Метки нет (Все метки)

Доброго времени суток.
На сайте есть блок рекламных банеров с 9-ю картинками.
Что нужно дописать чтобы каждая картинка работала как ссылка?
В последствии будут меняться картинки и ссылки к ним тоже.
http://www.cyberforum.ru/html/thread1969640.html
Куда добавить href=

Сильно не бейте, сайт писал не я. Я обладатель.
Magniart.ru


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="backLink"><a id="back" title="Предыдущий" href="#"><div class="tr-left"><img width="80%" src="{THEME}/images/arrow-left.png"></div></a></div>
<div class="forwardLink"><a id="forward" title="Следующий" href="#"><div class="tr-right"><img width="80%" src="{THEME}/images/arrow-right.png"></div></a></div>
 
<div id="slideContainer">
<div id="slideShim" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz>
<img title="Слайд один" src="http://magniart.ru/uploads/baner1new1108d1000px.png" width="100%" height="auto" alt="Слайд один" />
<img title="Слайд два" src="http://magniart.ru/uploads/baner2otkr1000px.png" width="100%" height="auto" alt="Слайд два" />
<img title="Слайд три" src="http://magniart.ru/uploads/baner3kalend1000px.png" width="100%" height="auto" alt="Слайд три" />
 
<img title="Слайд Четыре" src="http://magniart.ru/uploads/baner-4.png" width="100%" height="auto" alt="Слайд Четыре" />
<img title="Слайд Пять" src="http://magniart.ru/uploads/baner-5.png" width="100%" height="auto" alt="Слайд Пять" />
<img title="Слайд Шесть" src="http://magniart.ru/uploads/baner-6.png" width="100%" height="auto" alt="Слайд Шесть" />
 
<img title="Слайд Семь" src="http://magniart.ru/uploads/baner-7.png" width="100%" height="auto" alt="Слайд Семь" />
<img title="Слайд Восемь" src="http://magniart.ru/uploads/baner-8.png" width="100%" height="auto" alt="Слайд Восемь" />
<img title="Слайд Девять" src="http://magniart.ru/uploads/baner-9.png" width="100%" height="auto" alt="Слайд Девять" />
</div>
Посоветовали добавить
HTML5
1
<a href="ссылка"><img title="Слайд один" src="http://magniart.ru/uploads/baner1new1108d1000px.png" width="100%" height="auto" alt="Слайд один" /></a>
В итоге первый слайд ушел ниже банера, и вышел из него. Но стал кликабелен.
Сможете помочь?
Заранее спасибо.

Добавлено через 13 часов 24 минуты
Очень нуждаюсь в помощи.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.03.2016, 13:17
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Ссылки в картинки баннера Слайд-шоу (HTML, CSS):

Как центрировать слайд-шоу?
Несколько часов провозился, никак не получается настроить вывод слайд-шоу по...

Слайд шоу из рекламных баннеров
Добрый день! У меня есть несколько рекламных картинок...

Вставка слайд шоу на сайт
Здравствуйте, в веб разработке не разбираюсь вовсе, но потребовалось сделать...

Какой скрипт для слайд-шоу
Подскажите кто знает скрипт для слайд шоу, в автоматическом режиме изменение...

Кнопки управлением слайд-шоу разместить слева относительно фотографий
Здравствуйте! На сайте есть слайд-шоу http://work.snamy.com.ua/residences.html...

11
Kraken73
56 / 56 / 35
Регистрация: 17.09.2015
Сообщений: 444
28.03.2016, 13:33 #2
Лучший ответ Сообщение было отмечено enoflow как решение

Решение

слайдер такой.
Вам легче на картинку повесить событие и через js сделать переходы
HTML5
1
<img title="Слайд один" src="http://magniart.ru/uploads/baner1new1108d1000px.png" width="100%" height="auto" alt="Слайд один" onclick="location.href = 'http://www.yandex.ru/'">
ну и для красоты можно css задать
CSS
1
cursor:pointer;
1
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2546 / 2208 / 1002
Регистрация: 15.12.2012
Сообщений: 8,128
28.03.2016, 13:34 #3
enoflow, вообще в админке, в настройках слайдера должна быть опция , которая позволяет вставлять ссылки... А так прежде чем, что-то предпринимать сначала расставьте ссылки для всех слайдов...
0
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
28.03.2016, 13:37  [ТС] #4
Ребята спасибо за проявленный интерес.
Вечером буду у компа потестирую.
Сайт мне отписали. А вот тут решил заменить пару нюансов и сел за учебники.
В админка нет управления этим Банером ничего.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2546 / 2208 / 1002
Регистрация: 15.12.2012
Сообщений: 8,128
28.03.2016, 13:42 #5
Цитата Сообщение от enoflow Посмотреть сообщение
В админка нет управления этим Банером ничего.
enoflow, а картинки Вы как в него подгружаете? Неужели ручками сорцы пишите? Или через категории? Эх, dle - это не cms, а просто рассадник геммороя...
0
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
28.03.2016, 15:51  [ТС] #6
fedor загрузка достаточно простая. Есть раздел загрузки картинок. Главное это название баннера должно быть один в один. Дизайнер рисует и загружаем. Он встаёт отлично. Но столкнулись с необходимостью кликабельномти вот и пошли вопросы. Про сорцы не понял - я не силён в сленге 😂😄 в целом параллельно ищем человека для аудита сайта что бы указал что где не так. Но вот не знаю сколько это стоит. Что бы не развели.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2546 / 2208 / 1002
Регистрация: 15.12.2012
Сообщений: 8,128
28.03.2016, 16:11 #7
enoflow, узнаю DLE... Source(сорц или сорс) - источник/ссылка на картинку... Сокращённо src- атрибут тега <img>, где указывается адрес картинки... Думаю кое-что прояснилось... Если Вы говорите, что картинки надо грузить только по определённому имени - жёсткие ребята делали сайт... В целом аудит сайта зависит от потребностей правообладателей, к примеру те же самые кликабельные слайды, размеры шрифта, заголовки и прочие элементы... А юзабилити можно оценить, исходя из метрики или аналитики... Поэтому Вам нужен больше оптимизатор, чем аудитор...
0
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
28.03.2016, 16:28  [ТС] #8
Fedor да дле. В целом доволен. Управление сайтом не сложное. Наполнение и прочие.
Про оптимизатора - цена вопроса? Как я понимаю он код подправит ошибки и прочее.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2546 / 2208 / 1002
Регистрация: 15.12.2012
Сообщений: 8,128
28.03.2016, 16:30 #9
Цитата Сообщение от enoflow Посмотреть сообщение
Про оптимизатора - цена вопроса?
Это будет зависеть от количества правок надо полагать... Даже примерно не могу сказать...
1
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
28.03.2016, 19:28  [ТС] #10
Друг спасибо огромное! Все заработало. Осталось прописать ссылки нужные.
Только при наводке не видно пальца, что банер кликабелен.
Указали про содание CSS но я писал не силен что куда. Но соображаю вроде неплохо, если подтолкнете в каком направлении смотреть почитаю литературы и доведу до ума.
Еще раз спасибо.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2546 / 2208 / 1002
Регистрация: 15.12.2012
Сообщений: 8,128
28.03.2016, 20:36 #11
Цитата Сообщение от enoflow Посмотреть сообщение
Указали про содание CSS но я писал не силен что куда.
Для картинок надо прописать стиль:
CSS
1
#slideShim>a>img{cursor:pointer}
1
enoflow
0 / 0 / 0
Регистрация: 26.03.2016
Сообщений: 9
28.03.2016, 21:29  [ТС] #12
теперь вопрос куда, у меня есть два файла .css попробую навтыкать и по сохранять.

Добавлено через 9 минут
Все нуб разобрался. нашел куда воткнуть.
Ну и сложныи делом вы занимаетесь еще раз всем спасибо.
0
28.03.2016, 21:29
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.03.2016, 21:29
Привет! Вот еще темы с решениями:

Слайд-картинки, как на главной странице Apple
Помогите создать слайд-картинки, как у эпл. Шапка сайта у меня есть. Её высота:...

Расположение картинки-ссылки
Мужики, помогите, ибо я потратил все свои нервы уже. Вот что мне необходимо...

окантовка картинки ссылки
делаю ссылку ток за месть текста картинка (якобы симпотная кнопка нарисована)...

Ссылки на картинки из галереи
Помогите сделать рамку вокруг картинки больше.(на изображении 5 картинка в 1...


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

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

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