Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Przycisk graficzny z tekstem ?
Forum PHP.pl > Forum > Przedszkole
Xajan3981
Witam.
Chcialem zapytac czy jest taka mozliwosc, ale wydaje mi sie ze jest bo widzialem taki efekt bodajrze na forum SMF.

A mianowicie istnienie przycisku na stronce, na ktory po najechaniu kursorem podswietla sie. Niby nic trudnego bo takich skryptow w necie jest mase.

Tylko problem jest w tym ze tekst na przycisku chce by byl wpisywany (np w kodzie zrodlowym).

Czyli skrypt taki musiał by dzialac na zasadzie podmieniania grafiki tla. Bo zeby tekst sie znalaz nad grafika, musi ona stanowic tlo czyli background dla odpowiedniej komorki. Tylko teraz w jaki sposob napisac skrypt (a moze takowy juz gdzies istnieje) by grafika tego tla (pod tekstem) byla zmieniana w zaleznosci od zdarzenia OnMouseOut, czy OnMouseOver (chyba ze w tym przypadku inne zdarzenia nalezy zastosowac).

Bede wdzieczny za wszelka pomoc z tym.
kamiseq
pytanie czy ci jest wogole to potrzebne
bo jakos mi sie nie wydaje zeby w taki spoosb moglbys nakladac ten tekst z jakims zaj.. efektem graficznym(ale moze sie myle). wiec jesli to bedze zwykla czcionka. to zastanow sie nad ustawieniem poprostu backgroundu z grafika, bedzie to abrdzo szybkie i praktycznie bez wad.

jedyna wada jest to ze ktos moze nie miec jakijs czionki i w IE pewnei bedzie troszke inaczej wygladac jesli przekombinujesz z ta czionka. coz hym..

cos podobnego jest tu http://www.mozilla.com/en-US/
Xajan3981
Wlasnie o cos takiego mi chodzilo, tekst ma byc zwykly bez zadnych efektow.
Poprostu buton na ktorym sie znajduje ma reagowac na najechanie na niego myszka by zmienial grafike tla.

Tylko w tym problem ze nie wiem jak to zrobic sad.gif
trylik
czy nie uważasz, że łatwiej będzie to zrobić korzystając z CSS? i wtedy tekst buttona będzie po prostu tekstem, który będziesz mógł dowolnie generować, a w definicjach stylów dodasz sekcje a i a:hover z odpowiednimi parametrami background: url(...) ?
Xajan3981
Heh no w sumie masz racje. Na CSS - bedzie chyba wygodniej i szybciej. Pokombinuje jutro i zobacze jaki bedzie efekt. Dzieki za wskazowki.
trylik
taki szybki przeyklad:

Kod
<?php
$napis="Kliknij mnie";
echo '<a href="link" class="button">' . $napis . '</a>';
?>


a styl css to np:
  1. .button a {
  2. background: url('tloNormalne.gif');
  3. }
  4. .button a:hover {
  5. background: url('tloHover.gif');
  6. }


http://sophie-g.net/jobs/css/e_buttons.htm
tutaj przykladowy tutorial

pzdr
Xajan3981
Wiem znam CSS winksmiley.jpg - chociaz sprawa troche inaczej wyglada.

A jeszcze male pytanko czy mozna zastosowac czcionke ktore by sobie odczytywal z serwera ? jezeli tak to w jaki sposob ?

Temat w sumie mozna zamknac, chcoc z checia bym sie dowiedzial jak ten problem mozna rozwiazac za pomoca js.
kamiseq
no z wykorzystaniem Js to albo prosto i brzydko dopisujesz w tagu onmouseover="roll();" i odpoweidnio onmouseout="rollout();"

albo efektywniej podpinasz sie do document.onmouseover = roll; document.onmousout = rollout; i wykrywasz na co sie nacisnelo i wtedy robisz to samo co wczesnej. dlaczego tak jest lepiej - bo nie zasmiecasz sobie html.

moge ci podeslac dobrego pdf o JS bo nei chce mi sie pisac:) a czegos sie nauczysz.

tylko ze w tym przypadku to ci wogole nie jest potrzebne! zobacz sobie jak to zrobili tam na mozilli i chyba to ci wystarczy. zwykle <ul> z <a> + tlo rozciagane na caly przycisk. szybko i przyjemnie za pomoca css, poczytaj sobie o hover:) ale przeciez znasz css ;-P
Xajan3981
Tylko ze ja mam gotowy styl i rozciagac tla przyciskow akurat w tym przypadku odpada, zrobilem to za pomoca CSS, tak ze z prawie identycznym efektem dziala na FireFoxie i IE, coprawda troche musialem sie z tym okombinowac. No ale juz jest

Co do pliku pdf to z checia skorzystalbym Arni_81@interia.pl
kamiseq
heh ale mi nie chodzi o rozciaganie tylko o repeat-x; guitar.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.