Нужен совет
Как сделать чтбы в статье можно было разместить большую картинку и на ней 4-5 маленьких, но чтобы маленькие были кликабельны и были гиперссылками?
Заранее благодарен за ответы и советы!
Есть карта мира (к примеру)… на ней хочу разместить объекты, при нажатии на которые делался бы переход на видео (к примеру)
Карта мира- это сравнительный образ, вместо неё будет большая картинка.
Простых решений точно нет, но и без флеша можно обойтись — вот например:Ещё есть простые и действенные решения (без флеш)?
Исходный код образца в помощь.
1. делаем большую картинку бекграундом дива
2. абсолютным позиционированием располагаем дивы на подложке в нужном месте, делаем их кликабельными
3. бекграунлом в п2. загоняем нужные маленькие картинки
если нужно динамически добавлять маленькие картинки то хз надо пробовать и программинг знать больше чем я
Вот примерно
HTML <div id="big_img"> <div id="1_img"></div> <div id="2_img"></div> <div id="3_img"></div> <div id="4_img"></div> </div> CSS #big_img { position: relative; /* Относительное позиционирование */ background: url(images/big_img.png) no-repeat #f0f0f0; /* Картинка и цвет фона */ height: 600px; /* Высота блока */ width: 800px; /* Ширина блока */ } #1_img { position: absolute; right: 100px; bottom: 200px" /* Положение от правого нижнего угла */ height: 50px; width: 50px;/* Размеры блока */ background: url(images/1_img.png) no-repeat #f0f0f0; /* Картинка и цвет фона */ } #2_img { position: absolute; right: 10px; top: 15px; /* Положение от правого верхнего угла */ height: 50px; width: 50px;/* Размеры блока */ background: url(images/2_img.png) no-repeat #f0f0f0; /* Картинка и цвет фона */ } #3_img { position: absolute; left: 100px; bottom: 200px" /* Положение от левого нижнего угла */ height: 50px; width: 50px;/* Размеры блока */ background: url(images/3_img.png) no-repeat #f0f0f0; /* Картинка и цвет фона */ } #4_img { position: absolute; left: 100px; top: 200px" /* Положение от левого нижнего угла */ height: 50px; width: 50px;/* Размеры блока */ background: url(images/4_img.png) no-repeat #f0f0f0; /* Картинка и цвет фона */ }
Привидите пжл пример ниже (кодом)
Простым решением станет следующее:
1. делаем большую картинку бекграундом дива
2. абсолютным позиционированием располагаем дивы на подложке в нужном месте, делаем их кликабельными
3. бекграунлом в п2. загоняем нужные маленькие картинки
если нужно динамически добавлять маленькие картинки то хз надо пробовать и программинг знать больше чем я
Сразу о примере подумал и раньше отредактировал...Привидите пжл пример ниже (кодом)
Но код можно и по другому сделать…
В статье данный код не работает!
Сразу о примере подумал и раньше отредактировал...Привидите пжл пример ниже (кодом)
Но код можно и по другому сделать...
Код "режется"
Будет точно работать если вставить через внешний файл, плюс убрать можно комментарии с кавычками, плюс, все точки с запятой проверить…В статье данный код не работает!
Код "режется"
Не режется просто нужно правильно его читать :)Код "режется"
HTML вставляете в тело страницы
CSS вставляете в стилевый файл
А вообще с такой тривиальной проблемой вам сюда htmlbook.ru
на указанном сайте вы найдете подробности и о раннее описаном Мадмаксом способе…
Так и сделал.
Не режется просто нужно правильно его читать :)Код "режется"
HTML вставляете в тело страницы
CSS вставляете в стилевый файл
А вообще с такой тривиальной проблемой вам сюда htmlbook.ru
на указанном сайте вы найдете подробности и о раннее описаном Мадмаксом способе...
Большая картинка просматривается, а маленькие нет!!!
Не совсем понял, весь код со стилями включить во внейшний файл или нет?
Будет точно работать если вставить через внешний файл, плюс убрать можно комментарии с кавычками, плюс, все точки с запятой проверить ...В статье данный код не работает!
Код "режется"