Jump to content
GSForum - Segélyvonal

Recommended Posts

Posted

Az hogyan oldhatnám meg, hogy lenne egy kép az oldalamon, ami állandóan megjelenne. Lenne oldalt egy menü, amikre rá lehetne kattintani, és akkor megjelenne egy átlátszó kép felette.

 

Konkrét példa:

 

Megjelenne egy vaktérkép Európáról, majd lenne oldalt egy menü, ahol lehetne válogatni, hogy mik jelenjenek meg rajta (vizek, városok stb.) ezeket a képeket pedig átlátszó gif, vagy png-ként menteném.

 

Elõre is köszönöm!

Posted

Minden képet beraksz egy külön divbe, a diveket ugyanarra a pontra pozícionálod csak eltérő z-indexszel (külön rétegeken), hogy egymás felett legyenek. A vaktérkép legyen legalul, az látszódjon, a többi ne (CSS-ben kikapcsolod a többit). Aztán csinálsz egy pici formot mondjuk, amiben checkboxokkal kiválasztható, hogy mi jelenjen meg, és JavaScriptből "ráülsz" a checkboxokra, és kapcsolgatod a különböző rétegeken ülő DIV-ek láthatóságát.

 

Nagyon szép feladat.

Posted

Uhh, kösz, de én ennyibõl nem tudom még összehozni. Ehhez van valami segédlet a neten, hogy tudnám kivitelezni?

Tacsiazuma
Posted

Én ezt PHP-s lekérdezõ karakterlánccal oldanám meg.

1 div-et csinálsz, abba ágyazod a PHP-kódot, és a lekérdezõ karakterláncban szereplõ ID változó értékétõl függ, melyik képet jeleníted meg.

Minden képnek lenne 1 ID-je és a menüpontok ezekre hivatkoznának

pl.

<a href="akármi.hu/index.php?id=1"></a>

És akkor a PHP elõveszi a szép kis $_REQUEST['id'] változót, és a DIV-be kerülõ képet ez alapján nyitja meg

print "<img src=\"kep".$_REQUEST['id'].".jpg\"></img>"

de belõheted azt is, hogyha épp ezt a képet nézi, akkor a menügomb máshogy nézzen ki, egy egyszerû IF vezérléssel.

Remélem, hogy értettél is valamit abból, amit írtam és hogy egyre gondoltunk.

 

U.i: Én is kezdõ vagyok a témában, szóval nyugodtan meg lehet szólni :D

Posted

Meg lehet oldani PHP-vel úgy, ahogy írod, sőt, kódot tekintve jóval egyszerűbb. De ahhoz, hogy működjön, kell egy szerver és rajta a feltelepített PHP -- ez már önmagában nem mindenkinek áll rendelkezésére -- és tudni kell hozzá PHP-ban programozni. A másik megoldáshoz meg JavaScriptben, az sem egyszerű.

 

A két megoldás között az a fő különbség, hogy a JavaScript vezérelte kép ki-be kapcsolás nem csinál oldalletöltést, míg a PHP-ból ezt csak úgy tudod megoldani, ha minden kattintásnál újra és újra letöltöd az oldalt. Szerintem egy kicsit ágyúval verébre ezt PHP-ban megcsinálni, de kétségtelenül meg lehet.

 

@vimiki: specifikusan erre nincs oktatóanyag, de

képek div-be rakása --> (X)HTML,

pozíconálás, elrejtés --> CSS,

JavaScript --> JavaScript.

 

Tutorial hegyek vannak a weben minden témában. Ne egyszerre akard megoldani, hanem lépésenként, és akkor azzal párhuzamosan tudsz tanulni is.

Posted

Meg lehet csinálni csak CSS-sel is (akármi:hover-rel), viszont csak FF-ben mûködne... :upsz:

Posted

Köszi a tanácsokat! Az nem lenne baj, ha csak Firefox-ban menne.

Posted

És ugye az sem baj, ha nem checkboxokkal mûködne, hanem egyszerû szöveggel? A példánál maradva a térkép mellett lennének felsorolva a "menüpontok", és amelyikre húzza a felhasználó az egeret, az az opció kapcsolódik be.

Posted

Persze, hogy nem lenne baj ;)

Posted
A példánál maradva a térkép mellett lennének felsorolva a "menüpontok", és amelyikre húzza a felhasználó az egeret, az az opció kapcsolódik be.

Az a baj, hogy ez csak bekapcsolt JavaScript esetén működne. :hááát:

Posted

OK, akkor az én megoldásom ez: csinálsz n számú DIV-et (ahány opció lesz), és mindegyikbe beteszed a kellő képet. Mindegyik DIV-et beleteszed egy olyan elembe, ami egy menüpont (pl. SPAN, vagy akár sima A is lehet, netán az is lehet DIV - én a SPAN-t választanám). Ez ugye adja a gyerek-szülő kapcsolatot (a DIV a gyerek, a SPAN a szülő). A gyerekeknek abszolút pozíciót adsz, hogy ne legyenek beszorulva a SPAN-ekbe, és hogy akárhol elhelyezhesd őket.

 

Ja, itt jegyezném meg, hogy az alap térképnek nem kell szülő, mivel annak mindig kell látszódnia, így nincs értelme, felesleges.

 

Akkor ugye az összes DIV-et rárakod az alap térképre, majd mindegyiknek adsz egy

visibility: hidden;

tulajdonságot, hogy alaphelyzetben ne látszódjanak. Ezután csinálsz mindegyik DIV-hez CSS-ben egy külön tulajdonságot, amit így címzel meg:

#span-neve-1:hover #div-neve-1 {
     visibility: visible;
}

Így ha a 'span-neve-1'-re visszük az egeret, megjelenik a 'div-neve-1' tartalma, amin rajta van a térkép, és mivel abszolút pozíciója lesz, rákerül az alap térképre.

 

Nos, kb. ennyi. ;) És ehhez nem kell se JS, se PHP. :)

 

Az a baj, hogy ez csak bekapcsolt JavaScript esetén működne.

Beszótá'? :D Amúgy nincs igazad, működik... ;)

Posted
Beszótá'? :D Amúgy nincs igazad, mûködik... ;)

Be hát! :D:P Nem tudtam, hogy CSS-szel akarod megoldani... ;)

Általában sok jó megoldással lehet találkozni a webet böngészve. A problémát az esetek többségében az jelenti, hogy ha kikapcsolom a JavaScriptet, akkor nem mûködnek ezek a megoldások. :hááát: Pedig JavaScript nélkül (CSS-szel) is meg lehet oldani sok mindent. Ezzel a megoldással is csak az a baj, hogy az átkozott Internet Explorer csak az "a:hover"-t ismeri... :S

Posted
az átkozott Internet Explorer csak az "a:hover"-t ismeri...

Igen, sajnos ez van. De még a 7-es Explorer sem akarja ismerni, sõt, elõreláthatólag a 8-as sem. :nem:

 

De említettem, hogy nem fog menni IE-n.

Posted

Köszönöm szépen, igyekszem mihamarabb kipróbálni.

----------------------------------------------------------------------------------------

Alakulgat, köszi Garono!

 

De van még gondom :)

 

Megoldható az, hogy ne csak akkor jelenjen meg, ha rajta van az egér, hanem akkor is, ha nem (pl rákattint és ott maradna)

 

A másik, egy kicsit el vannak csúszva egymás felett a képek...

 

Jaj, és itt van: Link

Posted

Sajnos nem igazán oldható meg. :( Esetleg még olyat lehet, hogy csak akkor jelenjen meg, ha kattint rajta (de azt folyamatosan).

 

Az elcsúszáson a pozícionálás segítene, pl. minden képhez (DIV-hez) ugyanazokat a "koordinátákat" adod meg.

akarmi {
     position: absolute;
     top: 200px;
     left: 20px;
}

Posted

Okés, kipróbálom! A kattintás az kár... :(

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...