Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Jak zrobić na przycisku obrazka tło w css - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Jak zrobić na przycisku obrazka tło w css (/thread-jak-zrobic-na-przycisku-obrazka-tlo-w-css)

Strony: 1 2

Jak zrobić na przycisku obrazka tło w css - superman - 14-01-2010

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

RE: Jak zrobić na przycisku obrazka tło w css - dziamber - 14-01-2010

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

RE: Jak zrobić na przycisku obrazka tło w css - superman - 15-01-2010

(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

RE: Jak zrobić na przycisku obrazka tło w css - dziamber - 15-01-2010

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 */
}


RE: Jak zrobić na przycisku obrazka tło w css - programista20 - 15-01-2010

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

RE: Jak zrobić na przycisku obrazka tło w css - superman - 15-01-2010

(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ć?

RE: Jak zrobić na przycisku obrazka tło w css - programista20 - 15-01-2010

(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>


RE: Jak zrobić na przycisku obrazka tło w css - superman - 15-01-2010

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

RE: Jak zrobić na przycisku obrazka tło w css - programista20 - 15-01-2010

(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żę

RE: Jak zrobić na przycisku obrazka tło w css - dziamber - 15-01-2010

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>