Image map

erkakbe · Napísal **erkakbe**: 31.12.2007 2:32

Otazocka: Ked mam vlozeny image v CSS cez background-image mozem potom na nom zadefinovat clickable-regions cez image map? Resp. pouziva sa este image map alebo je niaky lepsi sposob?

viktorcech · Napísal **viktorcech**: 31.12.2007 9:58

nemusis cez image map, ale mozes vytvorit ahref odkazy s borderom, pevnou sirkou a vyskou a napozicovat ich do obrazka, ktory mas v nejakom dive ako pozadie.

erkakbe · Napísal autor témy **erkakbe**: 31.12.2007 13:22

to znie dobre. thx

edit: ok, spravil som to tak ze som do hlavneho divu co ma ako background stlpec nahodil dalsie divy ktore maju ako background jednotlive tlacitka a tie divy som tam potom napasoval...funguje to v poho ale ked prejdem kurzorom nad tym tlacitkom tak sa nezmeni (na ten prst) tak ako ked je nad normalnou linkou. da sa to niak fixnut?

edit2: mozem nastavit aby sa dokument v odkaze neotvaral ako nova stranka ale iba v niakom konkretnom dive?

m@-nX · Napísal **m@-nX**: 31.12.2007 15:57

musis dat tomu linku <a ....></a> rozmery ako ma ten div a display: block

twistik · Napísal **twistik**: 31.12.2007 18:41

alebo jednoducho nastavit kurzor na aky chces na ten dany div

erkakbe · Napísal autor témy **erkakbe**: 01.01.2008 17:37

m@-nX píše:

musis dat tomu linku <a ....></a> rozmery ako ma ten div a display: block

neviem ci som ta spravne pochopil.
html:

Kód:

<a href="strike.html" width="80px" height="20px">
          <div id="button_1">
          </div></a>

css:

Kód:

#button_1
      {
      width:80px;
      height:20px;
      margin-top:33px;
      background-image:url('img/button/home.PNG');
      display:block;
      }

twistik píše:

alebo jednoducho nastavit kurzor na aky chces na ten dany div

diky za tip : )
html:

Kód:

<a href="strike.html">
          <div id="button_1">
          </div></a>

css:

Kód:

#button_1
      {
      width:80px;
      height:20px;
      margin-top:33px;
      background-image:url('img/button/home.PNG');
      cursor:pointer;
      }

je to ok alebo sa to da optimalizovat?

ps: co to otvaranie dokumentu iba v konkretnom dive?

twistik · Napísal **twistik**: 01.01.2008 19:03

tak to mozes docielit cez framy ale to ti moc nedoporucujem...ale o divoch som este nepocul

erkakbe · Napísal autor témy **erkakbe**: 01.01.2008 22:14

o framoch viem ale nechcem ich pouzit. fakt sa to neda urobit niak jednoduchsie? lebo kopirovat cely layout rucne a ked sa nieco niekde zmeni tak to menit vo vsetkych dokumentoch sa mi tiez moc nechce

twistik · Napísal **twistik**: 01.01.2008 22:16

include v php

urob si kostru dokumentu a jednoducho includuj obsah

erkakbe · Napísal autor témy **erkakbe**: 01.01.2008 22:35

ok kuknem na to

vkmt · Napísal **vkmt**: 02.01.2008 17:28

preco si vlozil div do acka? nechapem..

HAE07 · Napísal **HAE07**: 02.01.2008 18:13

akoze ten kod hore je velmi zly

po prve nemozes davat div do a...a po druhe,ved z odkazu sprav blokovy prvok,daj mu rozmer,pozadie co len chces

vkmt · Napísal **vkmt**: 02.01.2008 18:14

HAE07 píše:

akoze ten kod hore je velmi zly

po prve nemozes davat div do a...a po druhe,ved z odkazu sprav blokovy prvok,daj mu rozmer,pozadie co len chces

pisal som uz na zaciatku:))) a aj tak urobil po svojom.. nechapem. nechaapem to.

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 20:55

HAE07 píše:

akoze ten kod hore je velmi zly

po prve nemozes davat div do a...a po druhe,ved z odkazu sprav blokovy prvok,daj mu rozmer,pozadie co len chces

az teraz ked som si to tu precital znova som to pochopil...idem to prerobit. ale fungovalo to ok : ) a mohol by si mi pls vysvetlit preco to tam vkladat nemam? vidim html a css 4 den

HAE07 · Napísal **HAE07**: 02.01.2008 21:09

lebo jednoducho sa to nerobi,nie je to validne.a na co budes do odkazu vkladat dalsi div,ked vsetky tie vlastnosti mozes dat odkazu len?napriklad:

Kód:

v html budes mat
<a href="#" class="nieco">nejaky text</a>

Kód:

a v css
a.nieco { display:block;
           width:200px;
           height:50px;
           background-image:url(obrazok.jpg);}

to uz je na tebe co jak spravis...pointa je proste v tom,ze odkazu nastavis display block,cize sa bude spravat ako blokovy prvok,cize mu mozes kludne nastavit rozmer aky len chces

netreba to komplikovat dalsim divom

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 21:12

no teraz to vyzera takto:
html:

Kód:

<div id="link-list_2" class="link-list">               
      <a class="top_link" href="link_4.php"></a>                 
      <a class="link" href="link_5.php"></a>                 
      <a class="link" href="link_6.php"></a>        
    </div> 

css:

Kód:

a.top_link
    {
    width:80px;
    height:20px;
    margin-top:33px;
    cursor:pointer;
    }
    
    a.link
    {
    width:80px;
    height:20px;
    margin-top:22px;
    cursor:pointer;
    }

nastavit to slo aj bez display:block...mam to tam aj tak dat?

HAE07 · Napísal **HAE07**: 02.01.2008 21:20

ale ved o co ti teraz ide?ved je jasne,ze odkazy tam mas,mas ich odmarginovane.ale rozmery ti nezobere do uvahy,pokial tam nemas display block...ved na tomto prikalde ani tie rozmery vidiet nemozes,ved nebola rec o nejakom obrazku, ktoreho urcite casti budu ako odkaz?:)

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 21:21

praveze tie rozmery funguju presne na pixel

HAE07 · Napísal **HAE07**: 02.01.2008 21:23

hmm,tak to nechapem...neda sa odkazu zadat rozmer pokial nemas display block.no da sa,ale nemalo by ho brat do uvahy

si si isty,ze v kazdom prehliadaci ti ho bere?

vkmt · Napísal **vkmt**: 02.01.2008 21:25

odkazy musis floatovat

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 21:27

HAE07 píše:

hmm,tak to nechapem...neda sa odkazu zadat rozmer pokial nemas display block.no da sa,ale nemalo by ho brat do uvahy

si si isty,ze v kazdom prehliadaci ti ho bere?

to nie : ) uz som ho tam pridal

vkmt píše:

odkazy musis floatovat

nerozumiem na co reagujes

HAE07 · Napísal **HAE07**: 02.01.2008 21:29

no vidis,vravel som,ze to tam musi byt

heh

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 21:33

v pohode ale teraz mam iny problem. mam takyto kod v html

Kód:

<div id="link-list_2" class="link-list">               
      <a class="top_link" href="link_4.php"></a>                 
      <a class="link" href="link_5.php"></a>                 
      <a class="link" href="link_6.php"></a>        
    </div>

a ked tu stranku zavolam cez php takto:

Kód:

<?php include("menu/link-list_2.php"); ?>

tak mi to to posledne <a> hodi pod ten </div> takze sa to vo vysledku sprava ako keby to bolo napisane takto:

Kód:

<div id="link-list_2" class="link-list">               
      <a class="top_link" href="link_4.php"></a>                 
      <a class="link" href="link_5.php"></a>                 
     </div>
<a class="link" href="link_6.php"></a> 

a neni to tym odkazom..ak by som pod ten odkaz napisal napr "..." tak odkaz vezme do toho divu a pod div mi hodi tie "..."
Rovnakym sposobom volam na druhej strane uplne identicky dokument a ten sa zobrazuje spravne.

HAE07 · Napísal **HAE07**: 02.01.2008 21:36

fuha,no tak to je velmi zaujimave

ked ti mam pravdu povedat,netusim preco to robi...ved ked mas tak isto spraveny este iny dokument,musi to ist

zmaz a sprav zas

erkakbe · Napísal autor témy **erkakbe**: 02.01.2008 21:40

uplne identicke nie su v tom lavom je o jeden odkaz <a> viac ale inac presna kopia. takto vyzeraju tie divy v css:

Kód:

div.link-list /*spolocny class pre divy link-list_1 a link_list_2*/
    {
    width:100px;
    height:500px;
    float:left;
    background-color:white;
    }
  
    #link-list_1 /*lavy link-list*/
    {
    background-color:red;
    background-image:url('menu/img/link-list_1.PNG');
    }

    #link-list_2 /*pravy link-list*/
    {
    background-color:green;
    background-image:url('menu/img/link-list_2.PNG');
    }

serie sa ten pravy link-list_2

edit: teraz som odpalil ten float:left a sice sa to cele rozsypalo ale uz to zobrazuje spravne

edit2: zmenil som aj float:left na float:right takze si tie link-listy vymenili pozicie a serie sa stale iba ten 2

edit3: uz to funguje...zmenil som cestu odkial ten dokument pristupoval k layout.css a funguje to...ale nechapem...tie ostatne dokumenty boli v rovnakom adresari a hladali layout.css rovnako a fungovali ok

twistik · Napísal **twistik**: 03.01.2008 0:22

hodil by si mi prosim ta link ked to mas na nete? zaujimalo by ma to

vkmt · Napísal **vkmt**: 03.01.2008 0:57

vytvorenie image mapy je take jednoduche a zase tu riesite zbytocnosti.. staci jeden odkaz, jedno css a je to.. nevidim problem.

erkakbe · Napísal autor témy **erkakbe**: 03.01.2008 11:30

twistik píše:

hodil by si mi prosim ta link ked to mas na nete? zaujimalo by ma to

nemam robim to zatial offline

vkmt píše:

vytvorenie image mapy je take jednoduche a zase tu riesite zbytocnosti.. staci jeden odkaz, jedno css a je to.. nevidim problem.

aka image mapa? ty sam si mi povedal ze to cez nu nemam robit. a neriesi sa tu uz nic, funguje to ako ma, a ked nie tak to riesim neviem preco by som nemal

Image map

Podobné témy