Web szerkesztés

[Redback]

Ez a kép lenne a menüje, egy oldalnak, amit készítünk haverral versenyre. Azt meg tudtam oldani, ( map - area ) hogy sokszög alakban lehet az egyes menüpontokra kattintani. Azt viszont nem, hogy hover-ben máshogy nézzenek ki. Esetleg valami ötlet? Ha lehet, akkor HTML-CSS, esetleg JS.

[Dew]

Originally Posted by Redback

hover-ben máshogy nézzenek ki. Esetleg valami ötlet? Ha lehet, akkor HTML-CSS, esetleg JS.

photoshop? mondjuk sötétebb/világosabb árnyalatra színezni azt a részt, és ha feléviszed az egeret, akkor az "átszínezett" jelenik meg? (esetleg, mint a menüpont backgroundimage-e? akár el is takarva az alatta lévő "alap képet")
(a sokszög alak miatt nem vagyok biztos, hogy lehet-e ilyet... de négyzetnél ez járható út, remélem itt is )

[Redback]

Originally Posted by Dew

photoshop? mondjuk sötétebb/világosabb árnyalatra színezni azt a részt, és ha feléviszed az egeret, akkor az "átszínezett" jelenik meg? (esetleg, mint a menüpont backgroundimage-e? akár el is takarva az alatta lévő "alap képet")
(a sokszög alak miatt nem vagyok biztos, hogy lehet-e ilyet... de négyzetnél ez járható út, remélem itt is )

Első gondolatom nekem is hasonló volt. De sajna nem működik. Szóval azzal van a gond, hogy hogyan tudom hover-ben megváltoztatni annak a résznek (sokszögnek?) a tulajdonságát.

[Dew]

Originally Posted by Redback

Első gondolatom nekem is hasonló volt. De sajna nem működik. Szóval azzal van a gond, hogy hogyan tudom hover-ben megváltoztatni annak a résznek (sokszögnek?) a tulajdonságát.

nem tudom a sokszöged hogy van megadva... de ha az eredeti ötletnél maradok, és a képet menüpontokra darabolva rakod be, akkor a képnél tudsz olyat megadni, hogy "onmouseover", meg "onmouseout".

<img id="menu1" onmouseover="kepcsere()" onmouseout="visszacsere()".....

js-ben meg pl:

procedure kepcsere() { document.getElementById('menu1').src='menu1hover.jpg'; }

procedure visszacsere() { document.getElementById('menu1').src='menu1.jpg'; }

de mindenesetre a menüpontjaidat (egyenként) ha belerakod egy div-be vagy span-ba, amiknek adsz ID-t (pl menu1, menu2, vagy fooldal, kontakt, stb...) akkor már tudsz hivatkozni a bennük lévő hivatkozásra, képre bármire.

A Grinzingi borozó weboldalán is ilyen képekkel oldották meg a menüpontokat, bár annyival egyszerűbb, hogy sima négyszögek a menüpontok.

http://www.grinzingi.hu/

(amúgy nagyon nem tetszik a weboldal, mert mindent pozicionálással raktak oda ahol van... kis felbontáson is pont ugyanannyira van a bal oldaltól a tartalom, mint egy bazinagy monitoron... nem is elegáns megoldás, és nem is szép a kinézete, ha nem pont azon a felbontáson nézed, amire csinálták)

[Redback]

Ha sima négyszögek lennének, lazán megoldanám CSS-ben is, semmi JS nélkül. De mivel ilyen sokszög az alakja, nem, hogy lehet háttered adni neki :/ De azért köszi a fáradtságot

[Dew]

Originally Posted by Redback

Ha sima négyszögek lennének, lazán megoldanám CSS-ben is, semmi JS nélkül. De mivel ilyen sokszög az alakja, nem, hogy lehet háttered adni neki :/ De azért köszi a fáradtságot

hmm... és az egész képet nem tudod kicserélni? ha a menu1 felé viszed az egeret, akkor az egész háttérképet cseréli le olyanra, amin a menu1 van színezve... (előtte töltesd be a képeket a weboldal megnyitásakor, hogy ne legyen az, hogy akkor tölti be... )
nem valami szép megoldás, de ha más nincs...

[Redback]

Originally Posted by Dew

hmm... és az egész képet nem tudod kicserélni? ha a menu1 felé viszed az egeret, akkor az egész háttérképet cseréli le olyanra, amin a menu1 van színezve... (előtte töltesd be a képeket a weboldal megnyitásakor, hogy ne legyen az, hogy akkor tölti be... )
nem valami szép megoldás, de ha más nincs...

még JS-es haver próbál valamit megoldani, ha nem sikerül, akkor szerintem menüt cserélünk, valami dobozosra, mert ezzel van még egy-két gond

[Dew]

Originally Posted by Redback

Első gondolatom nekem is hasonló volt. De sajna nem működik. Szóval azzal van a gond, hogy hogyan tudom hover-ben megváltoztatni annak a résznek (sokszögnek?) a tulajdonságát.

jahh, és a kérdésedre meg nem válaszoltam...

szóval még nem csináltam ilyen sokszöges cuccot, nem tudom hogy néz ki, de ha adsz neki ID-t (ha máshogy nem lehet, akkor div-be bele a sokszöget, és a div-nek adni ID-t), akkor css-ben tudsz rá hivatkozni így:

mondjuk ID='menu1'

#menu1 a:hover { .... }

[Csokibácsi]

Originally Posted by Redback

Ez a kép lenne a menüje, egy oldalnak, amit készítünk haverral versenyre. Azt meg tudtam oldani, ( map - area ) hogy sokszög alakban lehet az egyes menüpontokra kattintani. Azt viszont nem, hogy hover-ben máshogy nézzenek ki. Esetleg valami ötlet? Ha lehet, akkor HTML-CSS, esetleg JS.

Ez egy eléggé fapad megoldás (katt és töltsd le), csak css-el megoldva, de működik ... (van rá sok megoldási lehetőség egyébként, főleg ha kombinálod js-el).
A css-ben ha lecseréled a blank.gif-et blank1.gif-re, akkor látod a div-et amin a hover aktiválódik.

[Redback]

Originally Posted by Csokibácsi

Ez egy eléggé fapad megoldás (katt és töltsd le), csak css-el megoldva, de működik ... (van rá sok megoldási lehetőség egyébként, főleg ha kombinálod js-el).
A css-ben ha lecseréled a blank.gif-et blank1.gif-re, akkor látod a div-et amin a hover aktiválódik.

Köszi szépen Ma reggel szólt vissza a tanárunk, hogy nem illik Lázár Ervinhez a design... MA már egy vidám design-nal kezdünk