Spooch
-
Posts
10 -
Joined
-
Last visited
Spooch's Achievements
Explorer (1/14)
0
Reputation
-
Kray Storm, спасибо! Еще один вопрос. Хочу сделать нечто вроде этого - http://www.thebloggerseotips.org/2012/08/slightly-thicker-box-for-blogger.html Попробовал подстроить под себя - не работает. Похоже, дело в том, что там клик идет по картинке, а у меня - по активной области. Мне же надо, чтобы при клике по области вылезало окошко с картинкой. Как такое можно намудрить?
-
Сделал по шаблону, любезно предоставленному sigma77 и с параметром от Kray Storm! Спасибо вам огромное, выручили!!! У меня есть еще пара вопросов, можно их задать тут же? Первый - долго и упорно гуглил вопрос о "прибивании футера к низу страницы" и нашел следующее универсальное решение: в теле страницы основная часть и футер берутся в отдельные контейнеры <html> <body> <div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div> </body> </html> а в CSS пишется для них стиль html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 70px;} /* must be same height as the footer */ #footer {position: fixed; margin-top: -70px; /* negative value of footer height */ height: 70px; clear:both;} /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } Так вот, как только я сделал - все работало нормально (у меня там только 2 строчки текста по центру были), однако, в какой-то момент вдруг футер начал шалить! Мало того, что по центру он не отображается (слева стоит), так еще, если контента на странице много - уходит под него ( в моем случае - прячется под картинкой, т.е. его вообще не видно). Почему и как он поломался, ума не приложу! Может есть иной способ "прибить" его???
-
Kray Storm, sigma77, outline или opacity (из примера выше) - оба в принципе подходят, спасибо, а то с этим border'ом намаялся.. Тут встает основной косяк - я менял в примере у sigma77 hover на focus - при TAB'ировании все как надо, а вот при переходе на закладку, фокус переносится на фрагмент, но не срабатывает. Самое интересное, что когда я раньше сам пробовал вариант со спрайтом - у меня получилось через закладку заставить его исчезать (через style.display="none") а тут - вообще не работает по закладке. Хотя метод по сути один и тот же. В чем косяк, понять не могу! Заменил псевдокласс на :target - и заработало, похоже! Сейчас протестирую на сайте и отпишусь! Кстати, вопрос про спрайты - в примере я не увидел никакой прозрачной гифки 1Х1 - я сам смотрел несколько мануалов и везде они указывались как musthave. Получается, совсем не обязательно их использовать?
-
Теоретически, вместо Hover, focus будет работать? Чтоб "по наводке" закладочной все происходило? В любом случае, спасибо, чуть позже буду работать с вашим вариантом!!!
-
Сейчас, вот что тогда получилось: Сначала вышла какая-то белиберда - позиции фрагментов перепутались и картинка в паззл превратилась. Подредактировал код и все встало на места (правда, так и не понял, почему косяк такой). Код CSS .awki { height:200px; width:200px; background:url(../images/a.jpg) } /* awki */ .awki.a1 {background-position:0px 0px;} .awki.a2 {background-position:200px 0px;} .awki.a3 {background-position:400px 0px;} .awki.a4 {background-position:600px 0px;} .awki.a5 {background-position:800px 0px;} .awki.a6 {background-position:0px 200px;} .awki.a7 {background-position:200px 200px;} .awki.a8 {background-position:400px 200px;} .awki.a9 {background-position:600px 200px;} .awki.a10 {background-position:800px 200px;} .awki.a11 {background-position:0px 400px;} .awki.a12 {background-position:200px 400px;} .awki.a13 {background-position:400px 400px;} .awki.a14 {background-position:600px 400px;} .awki.a15 {background-position:800px 400px;} .awki.a16 {background-position:0px 600px;} .awki.a17 {background-position:200px 600px;} .awki.a18 {background-position:400px 600px;} .awki.a19 {background-position:600px 600px;} .awki.a20 {background-position:800px 600px;} .awki.a21 {background-position:0px 800px;} .awki.a22 {background-position:200px 800px;} .awki.a23 {background-position:400px 800px;} .awki.a24 {background-position:600px 800px;} .awki.a25 {background-position:800px 800px;} Вот часть кода, отвечающего за вывод фрагмента. <td> <a href="www.mysite.net/gallery/a25.html"> /* здесь линк, куда ссылается фрагмент */ <div id="a25"><img src="images/blank.gif" class="awki a7" alt=""></a></td></div></a></td> Далее немного покопал код и стала работать версия: <style> a25:target { visibility: hidden; } </style> <a href="www.mysite.net/gallery/a25.html"> <a25 id="a25"><img src="images/blank.gif" width="200" height="200" border="0" alt=""></a25></a> Правда, то, что мне надо - border, либо не фурычит, либо криво встает. Полагаю, это из-за того, что: 1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку 2) использован спрайт с 1х1px гифкой в основе
-
Да, квадратная. Проблема с отдельными картинками в том, что их будет много (пара сотен на странице и несколько таких страниц) - я боюсь представить, что тогда будет с загрузкой Насчет спрайта - пробовал, не получилось, после чего мне посоветовали перейти на текущий вариант. Только и тут застрял
-
Опять я в ступоре! Помогите советом, товарищи!!
-
Попробовал сделать как в той статье написано - не получается. У меня базовое изображение - картинка. При сохранении в SVG (через Inkscape) в коде нужных строк просто нет. Воспользовался онлайн-сервисом по конверту изображений в SVG - получилась черно-белая тень от оригинала. Похоже, этот вариант все-таки не подойдет..
-
Не совсем такое, мне нужна подсветка не при hover, а при onfocus или аналоге. Хотя базу, думаю, можно взять оттуда, если её реально переделать под мои нужды, естественно. Сейчас - спать, а днем посмотрю-покопаюсь! Спасибо!
-
Здравствуйте, уважаемые пользователи данного форума! У меня возникли трудности при написании сайта, потому прошу у вас помощи и совета. Собственно, задача передо мной такая: На странице висит квадратное изображение (1000х1000), разбитое через <map> и <area> на 25 областей (тоже квадраты, 196х196). Каждый фрагмент "заякорен", то есть на него ведет ссылка вида www.site.ru/index.html#a20 Нужно сделать так, чтобы после перехода по такой ссылке, нужный фрагмент выделялся (любым образом). Пример - карта луны, разделенная на участки для покупки. Клиенту дается ссылка на его участок, после перехода он на карте видит свой участок подсвеченным. Я начинал с разреки оригинала на куски, но мне посоветовали сделать спрайт. После посоветовали пойти путем <map> и <area>. Тут я не могу заставить работать события с <area>. Если со статичной картинкой <img> те же onfocus или onmouseover работают спокойно, то применительно к <area> не фурычит вообще ничего! Или у меня руки кривые.. или они не совместимы, хотя куча материала, что я перелопатил, говорит об обратном. Хотя, применительно к оnfocus, якорные ссылки не работают, я правильно понял? Пробовал разные варианты, вроде такого: <area name="border25" shape="rect" coords="802,802,998,998" onfocus="document.border25.src = 'images/border.jpg';" href="http://test.com" alt=""> для вызова рамки, чтобы наложилась на область - не работает. Вот тут, вроде как то, что мне может пожойти, но у меня уже мозг кипит и я тне могу переварить код по себя. Мне уже кажется, что придется вернуться к первому варианту с кучей мелких картинок - там вроде бы геморроя меньше с этим, но загрузка сервера бешенная! Вобщем, надеюсь, что тут получу совет по решению траблы..
