ugrás a tartalomhoz

Ezt szeretném megcsinálni de....

Laslie · 2008. Szep. 6. (Szo), 23.56
Üdvözöllek benneteket !

Új tag vagyok és a saját weboldalam építgetése kapcsán elakadtam.
Nagyon kezdő html-es vagyok és még azt sem tudom, hogy mi fán terem a Java-sript, meg a CSS. Így hát menet közben tanulgatom a különféle nyelveket.

Ha esetleg megnézné valaki hozzáértő ennek a lentebbi oldalnak egy funkcióját és tudna valami HTML-be beépíthető rutinban segíteni annak igencsak tudnék örülni. Olyan dolgot szeretnék előállítani mint amit a alábbi oldalon látok, mikor a kurzorral ráállok a jobb oldalon levő fényképező ikonra és akkor azonnal kidob egy hozzátartozó képet. Hab a tortán, ha rá is kattintok az ikonra akkor ki is "merevíti" a képet......Bár elég lenne az is ha csak egy meghatározott pozícióban láthatnám a képet, a rákattintós rész nem kell.....

Szóval ez lenne az az oldal...kicsit görgesd lefelé és jobb oldalt ott lesznek a fényképező ikonok.

http://www.elektrolight.hu/alkat/integralt/A-ana-k.html


Segítségeteket köszönöm
 
1

JS + CSS

Joó Ádám · 2008. Szep. 7. (V), 00.32
Némi JavaScriptre lesz szükséged. Ajánlok egy jó könyvtárat, anélkül ma már kínszenvedés a JS, a jQuery egy jó választás.
Helyezz el hivatkozásokat a megfelelő helyen a megjelenítendő képekre. Ezzel biztosítod, hogy JS nélkül is megtekinthetők legyenek. Aztán az oldal betöltődésekor menj végig ezeken, és adj meg egy onMouseOver eseményt, melynek kiváltásakor beszúrsz egy <img>-t mellé, mely értelemszerűen a képre hivatkozik. Ezt utána CSS-sel középre tudod igazítani.
Ilyenkor azonban be kell tölteni a képet, hogy addig is történjen valami, megadhatsz nekik egy animált hátteret, ami jelzi a töltést. Vagy a másik megoldás, hogy eleve beszúrod a képeket, elrejted CSS-sel, oldalbetöltéskor beszúrod a linkeket, amik fölé víve az egeret megjelennek, és ilyenkor a CSS-ből láthatóvá teszed őket.
A jQuery dokumentációban ismerkedj meg a kiválasztókkal, a ready(), a mouseover(), show(), hide(), class() (a formázást CSS-ben egy osztálynak add), after(), attr() tagfüggvényekkel. Ami a CSS-t illeti, a display és a position, left, top, right, bottom tulajdonságokra lesz szükséged.
2

kiegészítéskép

solkprog · 2008. Szep. 7. (V), 08.58
A fenti oldal HTML+CSS kombinációval (nem használt JS-t) oldta meg. Nyilván ebből következik hogy minden oldalletöltéskor (böngésző cache nem számolva) minden képet letöltet a böngészővel. Ami nem feltétlen szerencsés, de jóval egyszerűbb megoldás mind a JS + CSS (+HTML) megoldás. (pláne kezdőnek)
Én nem tanácsolnám a JS megoldást (neked még), mert előbb a HTML, CSS el ismerkedj össze, és utána jöhet a JS tanulás. (JS alapból sem a legkönnyebb téma)
HTML+CSS megoldást viszont könnyű megcsinálni. Kezdésként a HTML és CSS - Webszerkesztés stílusosan könyvet ajánlanám. Utána szerintem meg fogod tudni csinálni.

üdv,
Balázs
3

jQuery.after()

Velias9 · 2008. Szep. 8. (H), 16.00
Ehhez a függvényhez hozzáfűzném, hogy nem a megadott elem mögé szúrja be a HTML elemet, hanem az ott lévőt írja felül, tehát:

...

<div id="valami">blabalbla</div>
<span>Ezt felülírja</span>

...

$("<img src=\"valami.gif\" alt=\"\" />").after("#valami");
Ezt csinálja:

...

<div id="valami">blabalbla</div>
<img src="valami.gif" alt="" />

...
Ha beszúrás kell, akkor a 'jQuery.insertAfter()' függvény a nyerő (vagy a 'jQuery.insertBefore()').

Nem kötözködésképpen, csak nekem majd egy órámba telt kideríteni, hogy miért nem működik az egyik scriptem (ez miatt :)). Remélhatőleg másnak ezzel nem kell majd szívnia!

Hát, mindenkinek minden jót!
5

script

Laslie · 2008. Szep. 11. (Cs), 23.57
Nagyon köszönöm a segítségeteket...Ezzel a problémával egy kicsit leizzadtam. Pascalban jól programozok régóta, de ezek a "webnyelvek" túl bután vannak megcsinálva és szinte pilótavizsgásak...
De végül lett egy megoldás ami az elvártnak megfelelő....

Még igencsak béta változatos ,de jól mutatja a működést.

http://proba68.fw.hu/index-termekek-perselyek.html
4

Lightbox

jaczkog · 2008. Szep. 8. (H), 22.23
A Lightbox nevű scriptet szerintem pont erre találták ki, csak sokkal szebben csinálja.
Nem kell hozzá js tudás hogy használd, csak egy kis angol tudás.