- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Зачем быть уникальным в мире, где все можно скопировать
Почему так важна уникальность текста и как она влияет на SEO
Ingate Organic
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Добрый день уважаемое сообщество, занял один вопрос, может поможете?
Исходные данные - map.jpg - карта, odin.png и dva.png - полупрозрачные картинки размером с карту - на них схема маршрута от метро до места.
Суть задачи - при наводке на ссылку odin - менять display:none у первого дива на display:block, и при наводке на ссылку dva - менять display:none у второго дива на display:block. Никаких доп эффектов. Насколько я понимаю - это простейший яваскрипт :)
Пример кода:
<style>
#map{width:100px;height:100px;background-image:url('/img/map.jpg')}
#odin{width:100px;height:100px;background-image:url('/img/odin.png')}
#dva{width:100px;height:100px;background-image:url('/img/dva.png')}
</style>
<div id="map">
<div style="display:none" id="odin"></div>
<div style="display:none" id="dva"></div>
</div>
<a href="#">odin</a>
<a href="#">dva</a>
Спасибо заранее за помощь :)
эээ...
neolord, только "javascript:" не нужен.
мне понравился пример на js, но вот можно сделать так... только я не уверен за кросбраузерность..
ну в опере и в мозили и IE7 работает!!
<style>
#map{width:100px;height:100px;background-image:url('/img/map.jpg')}
#odin{width:100px;height:100px;background-image:url('/img/odin.png')}
#dva{width:100px;height:100px;background-image:url('/img/dva.png')}
/*добавить это*/
#map:hover,#odin:hover, #dva:hover {display:none}
#map:hover,#odin:hover, #dva:hover {display:block}
</style>
<div id="map">
<div id="odin"></div>
<div id="dva"></div>
</div>
<a href="#">odin</a>
<a href="#">dva</a>
Kolyaj
Если Вы насчет вариации с :hover для блочного элемента, то кажется его Ослик не понимает. Но могу ошибаться (не использовал пока :hover)
Сам буду благодарен за безЯвовское решение таких проблем :)
Kolyaj
Если Вы насчет вариации с :hover для блочного элемента, то кажется его Ослик не понимает. Но могу ошибаться (не использовал пока :hover)
Сам буду благодарен за безЯвовское решение таких проблем
Про hover писал wlad2, но он там что-то непонятное написал. Ховер для ссылок ИЕ понимает, но глюки бывают, да.
на счет IE 6 не уверен.
wlad2, вы процитировали два утверждения, в чем именно вы не уверены?
:hover используется для ссылкол, тогда ноу проблем...
Для замены свойст при наведении можно использовать следующую конструкцию: <a href="/" title="bla">blabla<div>content</div></a>.
В css:
a:link div, a:visited div {
display:none;
}
a:hover div, a:active div {
display:block;
}
Вот в упрощенном варианте, суть думаю ясна. Дальше для позиционирования и стилизации используем стандартные средства. У ссылки можно сделать position:relative, у div - position:absolute... ну еще margin'ы padding' и кучу всякого добра. Ну подобного рода конструкции скажем так, не семантичны=) хотя как вариант имеют право на жизнь. Вместо div можно использовать любые элементы, пример span - удобно для подсказок, да и проффи рекомендуют именно span внутри ссылки для всплывающих подсказок при наведении.