Zaloguj się

superman · (Ten post był ostatnio modyfikowany: 14-01-2010, 23:30 przez superman.)

mam problem - otóż zrobiłem w photoshopie menu i jest zapisane jako jpg z użyciem potem w html coś takiego:
<map id="map" name="map">
<area shape="rect" href="ps.html" coords="41,170,200,140" />
</map>

czy mogę zrobić coś takiego że jak najadę np na dane miejsce które się odnosi do podstrony to żeby tło się zmieniało na inny kolor? oczywiście w photoshopie też umieściłem tekst w formie kilku linków np o sobie

**dziamber** · 14-01-2010, 23:55

Nie lepiej wziąsc te menu z photoshopa i samemu pociąc i zakodowac? No chyba, że nie chce Ci się albo nie umiesz i poszedłeś na łatwiznę... ten photoshop tylko gówno z kodu robi

superman · (Ten post był ostatnio modyfikowany: 15-01-2010, 00:46 przez superman.)

(14-01-2010, 23:55)dziamber napisał(a): Nie lepiej wziąsc te menu z photoshopa i samemu pociąc i zakodowac? No chyba, że nie chce Ci się albo nie umiesz i poszedłeś na łatwiznę... ten photoshop tylko gówno z kodu robi

To powiedzcie mi dokładnie co mam zrobić - omówcie mi 2 sposoby - pierwszy taki jaki teraz mam a drugi taki jaki powinienem zrobić tylko z dokładnością bo jestem początkujący dopiero. Poniżej dołączam to przykładowe menu

**dziamber** · 15-01-2010, 01:00

Co do photoshopa to Ci nie pomogę, bo sam nie korzystam z ps'a, polecam gimpa. Co do drugiej metody, to tak, zakładam że potrafisz wyciąc w photoshopie elementy. Ja bym zrobił tak: kasuje wszystkie napisy, wycinam tylko tło dla tego pogrubionego napisu "menu", resztę bez problemów wykonamy w css. Następnie tworzysz diva, który będzie dla napisu menu, ustawiasz mu za tło obraz który wcześniej sobie przygotowałeś. Reszta to prosta lista ul, coś w tym stylu:

Kod:
ul li {

list-style: none;

border-bottom: 1px #000 solid; /* kreski pod elementami menu */

paddin-bottom: 10px; /* odstepy poszczegolnych linkow */

width: 100px; /* szerokosc menu */

}

programista20 · Liczba postów: 19 Liczba wątków: 1 Dołączył: 13-01-2010 Reputacja: 0

Nie wiem czy takie proste menu opłaca Ci się wykonywać w ps`ie ale to sprawa uznania polecałbym sam CSS

skoro tak polecam ci zrobić tak:
pociąć menu w paski i kodować jak niżej
//podaje przykład kolor po nejechaniu kolor2 i gdy kliknie kolor3

Kod:
<a href="..."><img style="border: 0" id="id_zdjęcia" src="adres_1" height="wysokość" width="szerokość" alt="HOME" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'adres_1')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'adres_2')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'adres_3')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'adres_4')" fp-style="fp-btn: Border Left 2; fp-proportional: 0" fp-title="HOME"></a>

Mam nadzieję iż się nie pomyliłem w składni
adres_1 - stan po najechaniu
adres_2 - stan początkowy
adres_3 - stan po kliknięciu
adres_4 - stan po zjechaniu z przycisku - czyli stan początkowy

superman · (Ten post był ostatnio modyfikowany: 15-01-2010, 03:19 przez superman.)

(15-01-2010, 02:16)programista20 napisał(a): Nie wiem czy takie proste menu opłaca Ci się wykonywać w ps`ie ale to sprawa uznania polecałbym sam CSS

skoro tak polecam ci zrobić tak:
pociąć menu w paski i kodować jak niżej
//podaje przykład kolor po nejechaniu kolor2 i gdy kliknie kolor3

Kod:
<a href="..."><img style="border: 0" id="id_zdjęcia" src="adres_1" height="wysokość" width="szerokość" alt="HOME" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'adres_1')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'adres_2')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'adres_3')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'adres_4')" fp-style="fp-btn: Border Left 2; fp-proportional: 0" fp-title="HOME"></a>
Mam nadzieję iż się nie pomyliłem w składni
adres_1 - stan po najechaniu
adres_2 - stan początkowy
adres_3 - stan po kliknięciu
adres_4 - stan po zjechaniu z przycisku - czyli stan początkowy

Z tym co kolega tutaj napisał to nie wiem czy dam radę ale znalazłem fajną stronkę i mi się spodobała http://pclab.pl/plik298_EasyBCD.1.7.2.html jak można wykonać takie przyciski w header i żeby po najechaniu tak jak na tej stronce zmieniał się kolor - czy to trudno zrobić?

programista20 · 15-01-2010, 04:16

(15-01-2010, 03:17)superman napisał(a): Z tym co kolega tutaj napisał to nie wiem czy dam radę ale znalazłem fajną stronkę i mi się spodobała http://pclab.pl/plik298_EasyBCD.1.7.2.html jak można wykonać takie przyciski w header i żeby po najechaniu tak jak na tej stronce zmieniał się kolor - czy to trudno zrobić?

Masz dla orientacji odchudzone menu z takiej stronki
Nie zalecam kopiowania ale przypatrz się jak są dane wywoływane

Kod:
<style>

#header .left .menu{width:610px;padding:5px 10px 0 5px;height:40px;float:left;background:url(http://pclab.pl/img/menu_back.png) no-repeat;}

#header .left .menu ul{margin:0;padding:0;}

#header .left .menu ul li{float:left;list-style:none;}

#header .left .menu a{float:left;outline:none;padding-top:8px;height:32px;font-family:tahoma,sans-serif;font-size:12px;font-weight:bold;color:#FFF;text-decoration:none;text-align:center;}

#header .left .menu a{background:url(http://pclab.pl/img/menu.png) no-repeat;}

#header .left .menu a.home{width:29px;background-position:0 0;}

#header .left .menu a.articles{width:79px;background-position:-29px 0;}

#header .left .menu a.news{width:98px;background-position:-108px 0;}

#header .left .menu a.files{width:60px;background-position:-206px 0;}

#header .left .menu a.tags{width:60px;background-position:-206px 0;}

#header .left .menu a.contests{width:81px;background-position:-266px 0;}

#header .left .menu a.board{width:63px;background-position:-347px 0;}

#header .left .menu a.personalize{padding-right:22px;width:125px;background-position:-410px 0;}

#header .left .menu a.home:hover{background-position:0 -32px;}

#header .left .menu a.articles:hover,#header .left .menu .active a.articles{background-position:-29px -32px;}

#header .left .menu a.news:hover,

#header .left .menu .active a.news{background-position:-108px -32px;}

#header .left .menu a.files:hover,#header .left .menu .active a.files{background-position:-206px -32px;}

#header .left .menu a.tags:hover,#header .left .menu .active a.tags{background-position:-206px -32px;}

#header .left .menu a.contests:hover{background-position:-266px -32px;}

#header .left .menu a.board:hover{background-position:-347px -32px;}

#header .left .menu a.personalize:hover{background-position:-410px -32px;}

</style>

<body>

                <div id="header">

                            <div class="left">

                                <div class="menu" style="width: 616px">

                                    <ul style="width: 621px; height: 70px;">

                                        <li><a class="home" href="/"></a></li>

                                        <li><a class="articles" href="art.html">Artykuły</a></li>

                                        <li><a class="news" href="news.html">Aktualności</a></li>

                                        <li><a class="files" href="pliki.html">Pliki</a></li>

                                        <li><a class="tags" href="tag.html">Tagi</a></li>

                                        <li><a class="contests" href="tag.html=konkurs">Konkursy</a></li>

                                        <li>

                                        <a class="board" href="http://forum.pclab.pl/" style="height: 32px">Forum</a></li>

                                        <li><a class="personalize" href="#">Personalizuj</a></li>                                                                                                                

                                    </ul>

                                </div>

                                </div>

                                </div>

</body>

superman · 15-01-2010, 15:15

ok a powiedz mi jeszcze jak zrobić takie coś jak jest tam na stronce z prawej strony żeby jest możliwość wpisania tekstu i wyszukiwania np w google

programista20 · 15-01-2010, 18:57

(15-01-2010, 15:15)superman napisał(a): ok a powiedz mi jeszcze jak zrobić takie coś jak jest tam na stronce z prawej strony żeby jest możliwość wpisania tekstu i wyszukiwania np w google

Co do google to istnieje taka możliwość w programie AdSense
https://www.google.com/adsense/login/pl/?destination=%2Fadsense%2Fhome
Następnie przejdz tu:
https://www.google.com/adsense/afs-settings

A jeśli chcesz stworzyć wyszukiwarkę która będzie szukać treści na twojej witrynie w różnych działach które można uprzednio wybrać to pozostała ci nauka PHP + MySQL lub jakieś gotowe rozwiązanie ale takowego Ci nie przybliżę

**dziamber** · 15-01-2010, 20:30

programista20 piszesz, że polecasz css'a a za chwilę wciskasz kod js który można zastąpic css. Radzę pomyślec następnym razem nad wypowiedzią zanim użyjesz przycisku odpowiedz. Wyszukiwarka google:

Kod:
<form method="get" action="http://www.google.com/custom">

<fieldset style="border:0px;">

<a href="http://www.google.com/search"><img src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" style="border:0px;width:80px;height:30px;" /></a>

<input name="q" size="31" maxlength="255" value="" type="text" />

<input name="sa" value="Szukaj" type="submit" /> <br />

<input name="domains" value="kateos.org" type="hidden" />

<input name="sitesearch" value="" checked="checked" type="radio" />Szukaj WWW

</fieldset>

</form>

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie