Hogy lehet olyat csinálni, hogy a kép egy bizonyos része kattintható legyen?
Úgy, mint az időkep.hu-n a hötérképen lehet Budapest és Balaton-nál

Csinálsz egy divet, ennek a képet teszed be háttérnek.
Ebbe a divebe teszel annyi divet, ahány kattintó linket szeretnél. Ezen divek mérete lesz a kattintási terület. Az elhelyezését a margin beállítással tudod megoldani. Hogy ténylegesen is működjön, a html-be a divhez be kell linkelni egy átlátszó gif-et, ez lesz a link.

Huhh, ez egy picit magas, de próbálkozok

css kell hozzá.

Vegyünk egy divet, ez lesz a hátteres.
html-be:

css:

Nézzük a belső diveket:
Ezeket az elöbb írt diven belülre kell helyezni, legyen most két darab ilyen linkelhető része a képnek:

A html a következőképpen módosul:

A hozzátartozó css így változik:

Körülbelül így. A keplinkdoboz marginjaival lehet beállítani a linkek pozícióját, a width, és height pedig a méretét adja. Akkora átlátszó gifet csinálj, mint ezen divek mérete. A méretet ne felejtsd beállítani a .linkkepe-nél is. Ha a #keplinkdoboz01, keplinkdoboz02-höz a border: 0; helyett átmenetileg beírod hogy border: 1px solid #000; akkor lesz egy fekete kerete is, ami azért jó, mert a pozícionálást segíti. Ha jó helyen vannak, visszaírhatod border: 0;-ra.

Még vannak vele prolémáim:

a CSS ezt tartalmazza:


Itt egy link, hogy milyen lett: Link

Az IE-ben hiába van beállítva, hogy mekkor a képméret,
#alap {
width: 385px;
height: 384px;
mégis összeugrik, a szélső kis gif-hez igazodnak a kép szélei.

Firefoxban pedig a kép megjelenik rendesen, de a kattintó gif-ek kinnmaradnak a kép szélén, nem mennek beljebb.

Lehet, hogy most ostobaságot kérdek, de a "margin: 20px 0 0 20px;" -ban a két középső 0 mit jelent?
És a z-index?

Köszi a segítséget!

A z-index csinálja azt, hogy a divek akár egymás felett is elmozdulhassanak. Tehát nem veszik figyelembe a html-ben lévő sorrendet.

A 20 px 0 0 20px az akár így is kinézhetne: 20px 0px 0px 20px, de ha az érték nulla, nem muszáj px-et írni mögé. Egyébként így kell értelmezni: top - right - bottom - left. (Fent - Jobbra - Lent - Balra)

Az ok, hogy úgy igazodik, az az, hogy nincs dokumentumtipus megadva. css alkalamzásánál kötelező! Ezenkívül a css sincs jól meghívva!

Tehát:

Még annyit, hogyha az IE-ben nem látszik a kép, akkor a kép elérési útja nem jó a html-ben.

Az IE-ben látszik a kép, de csak annyi része, ami a kis gif széle határol,a gif-en túli rész fehér volt.

Most már ugyan úgy jelenik meg mint Firefoxban, de a kis gifek még mindig kinn maradnak a szélen.

#keplinkdoboz01, keplinkdoboz02 {
Ezt a sort úgy módosítsd a css-ben, hogy a keplinkdoboz02 elé is tegyél egy #-et, tehát ilyen legyen a sor: #keplinkdoboz01, #keplinkdoboz02 {
Bocsi, ezt én rontottam.

A másik, hogy én ezt még sosem alkalmaztam önálló divben, hanem úgy, hogy volt egy fő div, és ebben a hátteres div, és benne a kattintó képek.

Tehát az egész html úgy módosulna, hogy:



A css-ben pedig az egész elejére jönne egy ilyen:



Ennek így már működnie KELL!

De még egyszerűbb Dreamweaverrel bemappelni

Na igen, persze. De minek ehhez egy hatalmas program? Egyáltalán nem egyszerübb. Egyébként ha annyira egyszerű, ajánlom Dreamvearverben magalkotni a game.minidiscweb.hu oldalam. Kiváncsi vagyok, sikerülne-e? (Mielött elkezdenéd: NEM fog összejönni )

Hát a linkromázáson kívül amit gondolom CSS-sel meg lehet oldani, azon kívül mit nem lehet DW-ben csinálni? Én annyira nem értek hozzá csak egyszerűbb dolgokat hozok össze, meg csomó mindent Tőled kérdezek meg MSN-en, de annyira nem tűnik lehetetlennek.

Tényleg nem működik. De rá fogok jönni, mi az oka. Egyszerüen nem veszi figyelembe a divre kiadott css beállítást, de hogy miért nem .... ?

Sajnos. Az utolsó ötleteidet is beletettem, de még mindig nem jön össze.

Sajnos én hibáztam. Olyannyira, hogy most egy apróbb módosítást végeztem a honlapom kezdőlapján, és 1.5 órámba került. Azt hiszem, gyakorolnom kell megint.

MiniDisc! Közben próbálgattam én is, hátha sikerül valami, megnézegettem az időkép.hu forráskódját és ezt találtam. És működik!!! Viszont van még vele problámám. a href= rész csak relatív hivatkozást vesz. És még egy, a kordináták ugye a terület bal felső, majd a jobb alsó sarkának koordinátáit adja meg?

Ja, épp javasolni akartam, hogy CSS és DIV-ek helyett használjuk a HTML megoldását erre, úgy hívják image map.

De ennek menie kell css-sel is simán ... Csak én bénázok most. Nem tudom, miért nem működik, hiszen már ugyanígy működik más lapjaimon is.

De azért köszi szépen!!! De azért még lenne gondom ezzel is. A fenti kódban a href= rész csak relatív hivatkozást vesz. Ez miért van?