1 Тема від Betterthanyou Востаннє редагувалося Betterthanyou (02.10.2017 20:35:01)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Тема: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

Є звичайне меню

<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</nav>

і CSS що додає картинку зверху, над меню.

nav::before  {
display: block;
text-align: center;
content: url("data:image/jpeg;base64,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");            
}

Я хочу зробити так, щоб до кожного пункту меню прив'язати картинку, і коли я буду натискати на якийсь пункт меню, тоді буде з'являтися відповідна картинка.

Наприклад
-До пункту "Home" прив'язана картинка "image1"
-До пункту "News" прив'язана картинка "image2"
-До пункту "Contact" прив'язана картинка "image3"

-Коли я натискаю на "home" з'являється картинка "image1" над меню (а всі інші картинки приховані)
-Коли я натискаю на "Contact" з'являється картинка "image3" над меню (а всі інші картинки приховані)
і т.д.

Таке можна зробити за допомогою CSS (якщо так, то як таке зробити) ?
https://jsfiddle.net/mkej0rt9/2/ - весь код тут

Betterthanyou вебсайт

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

:target вас врятує
https://jsfiddle.net/mjoy0cf9/

Подякували: Betterthanyou, NaharD2

3 Відповідь від Betterthanyou

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

Але як тепер ще посилання (наприклад: https://website.com/home) добавити, якщо атрибут href зайнятий ?

<a href="#img1">Home</a>

Betterthanyou вебсайт

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

то ви хочете, аби воно на одну маленьку мить показало картинку і відразу перекинуло на інший сайт?

Подякували: Betterthanyou1

5 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2297

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

Ще такий варіант, з js
https://jsfiddle.net/4uveb4zc/

Подякували: Betterthanyou1

6 Відповідь від Betterthanyou Востаннє редагувалося Betterthanyou (02.10.2017 22:34:17)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

FakiNyan написав:

то ви хочете, аби воно на одну маленьку мить показало картинку і відразу перекинуло на інший сайт?

Ні, це просто приклад https://website.com/home (не знав що такий сайт реально існує)
Якщо я маю свій сайт на localhost, я пишу

<nav>
<ul>
  <li><a href="localhost/home">Home</a></li>
  <li><a href="localhost/news">News</a></li>
  <li><a href="localhost/contact">Contact</a></li>
  <li><a href="localhost/about">About</a></li>
</ul>
</nav>

Я маю на увазі, що всі посилання не ведуть на зовнішні сайти, а лише на сторінки які знаходяться в моєму сайті

<a href="https://[мійВебСайт]/home">Home</a>

але якщо я добавлю :target то меню виглядатиме так

<nav>
<ul>
  <li><a href="#img1">Home</a></li>
  <li><a href="#img2">News</a></li>
  <li><a href="#img3">Contact</a></li>
  <li><a href="#img4">About</a></li>
</ul>
</nav>

Я хочу при натисканні на Home перейти на http://localhost/home і щоб над меню появилася картинка img1, одночасно

Як в цьому сайті (понатискайте пункти меню) http://www.imperial-classic.at, але тут, на мою думку, картинка вставляється за допомогою PHP або статично, я хочу таке саме зробити за допомогою CSS.

VTrim написав:

Ще такий варіант, з js
https://jsfiddle.net/4uveb4zc/

Ну, якщо не знайду способів з CSS, буду робити з JS

Betterthanyou вебсайт

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

ви ж розумієте, що кожна сторінка - це окремий html файл?

Подякували: Betterthanyou, ping2

8 Відповідь від Betterthanyou Востаннє редагувалося Betterthanyou (02.10.2017 23:21:10)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

FakiNyan написав:

ви ж розумієте, що кожна сторінка - це окремий html файл?

Зрозумів вже, я вибачаюся за тупе питання.

Betterthanyou вебсайт

9 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

Betterthanyou написав:
FakiNyan написав:

ви ж розумієте, що кожна сторінка - це окремий html файл?

Зрозумів вже, вибачайсь за тупе питання.

то це я ще й вибачатись маю???1!! ]:->

Подякували: Betterthanyou, 0xDADA11C7, /KIT\, ostap34PHP4

10 Відповідь від Betterthanyou Востаннє редагувалося Betterthanyou (02.10.2017 23:18:41)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

▼Прихований текст
FakiNyan написав:
Betterthanyou написав:
FakiNyan написав:

ви ж розумієте, що кожна сторінка - це окремий html файл?

Зрозумів вже, вибачайсь за тупе питання.

то це я ще й вибачатись маю???1!! ]:->

Я помилився, вже виправив.

Betterthanyou вебсайт

11 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 091
    • Репутація: 5658

Re: [CSS] Динамічна зміна картинки, при натисканні на пункт меню

ну ладно...