• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Mapowanie obrazka jako tła - w div

Object Storage Arubacloud
0 głosów
718 wizyt
pytanie zadane 7 grudnia 2016 w HTML i CSS przez Bzytek Użytkownik (810 p.)
edycja 8 grudnia 2016 przez Bzytek

Witam
Mam z pozoru proste  pytanie.
Czy można zmapować obrazek umieszczony jako tło div.?
Sam div ostylowany jest w następujący sposób:

.mapa {position:relative;width:207px;height:1000px;left:20px;float:left; padding-left:30px;background:url(../pics/railway.jpg) no-repeat}


Wiem że mapować można obrazek. Ale jak zmapować tak ostylowany div, bo na tak ostylowanym obrazku chciałbym zmapować 8 miejsc do wyświetlenia stickytooltipów
Może ktoś  podpowie mi jak to rozgryźć? - poniżej screen

 

 

2 odpowiedzi

0 głosów
odpowiedź 7 grudnia 2016 przez hoktaur Pasjonat (22,250 p.)

Przykład poniżej dostosuj do siebie:

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

 

komentarz 8 grudnia 2016 przez Bzytek Użytkownik (810 p.)

Dzięki za odzew .

Oczywiście że wiem jak "normalnie " mapuje się stronę .Tak jak w twojej odpowiedzi. ALE  nie wiem czy ma on zastosowanie do diva którego tłem jest właśnie ten schemat bo białe tło to właśnie / background:url(../pics/railway.jpg)/ tego div  - Chyba raczej nie sad

 

komentarz 8 grudnia 2016 przez hoktaur Pasjonat (22,250 p.)
edycja 8 grudnia 2016 przez hoktaur

a może jak już koniecznie chcesz żeby to było tło a nie może być jako img to możesz w tym divie zrobić elementy np. a, div itp. wystylizowane jako position: absolute i używając top, left, right, bottom ustawić odpowiednio ??

<div style="position: relative">
  <div href=#" style="position: absolute; top: 10px, left: 10px; width: 100px; height: 100px;"></div>

</div>

 

–1 głos
odpowiedź 8 grudnia 2016 przez Skorpionita Nowicjusz (200 p.)
masz windowsa 98!?
komentarz 8 grudnia 2016 przez hoktaur Pasjonat (22,250 p.)

????? a co to ma do wątku.... ale jak już to kiedyś miałem i używałem tak jak C64, rosyjską grę z  ośmiorniczką czy co tam jeszcze..... wink

komentarz 9 grudnia 2016 przez Bzytek Użytkownik (810 p.)

Bo skorpionita ma widać win 11++ beta i wypasiony laptop cheeky

I tak gwoli ścisłości ..to win 7 z nakładką cheeky

 

Podobne pytania

0 głosów
3 odpowiedzi 495 wizyt
pytanie zadane 23 lipca 2016 w HTML i CSS przez niezalogowany
0 głosów
2 odpowiedzi 166 wizyt
pytanie zadane 28 października 2016 w HTML i CSS przez Giovacho Użytkownik (960 p.)
0 głosów
2 odpowiedzi 833 wizyt
pytanie zadane 4 marca 2017 w HTML i CSS przez Daniel Kudyba Obywatel (1,260 p.)

92,575 zapytań

141,424 odpowiedzi

319,649 komentarzy

61,960 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...