Jak wykonać podświetlany "przycisk" graficzny?

[dodi_lumiere]

Witam

Na wstępie mówię że jestem zielony w Webmasteringu i nie wiem do kogo się zwrócić. Potrzebuje zrobić na aukcji allegro podświetlany "przycisk"graficzny. W sieci znalazłem taki kod :

Więc wkleiłem co trzeba i wstawiłem na allegro

Niestety przy zatwierdzaniu aukcji pojawia się komunikat, że kod zawiera niedozwolone znaczniki. Zostają one automatycznie usunięte i nie m tego efektu co chciałem. Poniżej lista dozwolonych elementów:

a

abbr

acronym

address

area

b

basefont

bdo

big

blockquote

body

br

button

caption

center

cite

code

col

colgroup

dd

del

dfn

dir

div

dl

dt

em

font

h1

h2

h3

h4

h5

h6

head

hr

i

img

ins

isindex

kbd

label

legend

li

map

menu

nobr

noframes

noscript

ol

optgroup

option

p

pre

q

s

samp

select

small

span

strike

strong

sub

sup

table

tbody

td

tfoot

th

thead

title

tr

tt

u

ul

var

style

proszę o pomoc, bo nie wiem jak mam to zrobić. Z góry dziękuję. Pozdrawiam

[adpawl]

css, pseudoklasa hover

http://csshover.pl/css/csshover/

…

http://webmade.org/porady/efekt-rollover-css.php

http://websta.pl/szybkie-triki/szybkitr … over-w-css

[dodi_lumiere]

Dzięki za info. W miarę skapowałem o co biega ale dalej mam problem. Zgodnie z info z pierwszej stronki www stworzyłem:

div{

height: 100px;

width: 194px;

background: transparent url(http://www.pikpok.com.pl/allegro/test15.gif) 0 0 no-repeat;

}

div:hover{

background-position: -194px 0;

}

a następnie wkleiłem to w edytorze tekstowym na allegro. Ale efekt w edytorze wizualnym wygląda tak:

http://www.pikpok.com.pl/allegro/prod.jpg

pozdrawiam

[adpawl]

zgaduję, źle wstawiłeś kod css’a …pewnie nie objąłeś go tagiem STYLE :roll:

dziwnie też, że odnosisz się do każdego diva

może wrzuć cały kod jaki wklejasz na allegro

[dodi_lumiere]

no może i tak. nie znam się totalnie.

http://www.pikpok.com.pl/allegro/kod.txt

[manieKMP]

[dodi_lumiere]

super, to działa a gdy potrzebuję dołożyć kolejnego diva? W tym kodzie który wklejam pomiędzy wstawiam adres z nowym gifem a co wstawiam w miejscu gdzie ma się wyświetlić “przycisk” ?

– Dodane 10.03.2012 (So) 14:37 –

i ma jeszcze pytanie jak wstawić w tym kodzie odnośnik? myślałem że da radę to zrobić z edytora wizualnego na allegro ale ten nie widzi tego “przycisku” (nie da się go zaznaczyć)

pozdrawiam

[manieKMP]

Jeśli chcesz “prawdziwe” przyciski, które będą działać i np. przenosić do jakichś stron, radziłbym podeprzeć się tym co masz już w kodzie (jest w nim określone kilka takich przycisków).

Ze względu na to, że nie wiem do czego konkretnie te przyciski mają się odnosić, podam ogólny zarys powstania takich “tematycznych” przycisków (to “ap” nie wzięło się znikąd, jest skrótem od tekstu z gif’a).

1. Tworzymy sobie div’owy “kontener” przycisków (w nim będą one umieszczane)

-klasę div’a z poprzedniego przykładu zmieniasz z ap na np. produkty

-opcjonalnie można wpisać mu tło w postaci css’a + przygotowanego tła (ja bym do tego celu wykorzystał bodajże “pikpok_07.jpg” i ustawił mu powtarzanie w pionie)

2. Tworzymy przyciski graficzne

-zakładając że wszystkie grafiki dla przycisków są identyczne względem tego przytoczonego “test15.gif” (czyli różnią się między sobą jedynie tekstem), robimy “kumulację” własności współdzielonych, a jedynie określenie grafiki dajemy oddzielnie

Tak więc zamiennik do treści z poprzedniego postu mógłby wyglądać tak:

-dla css

a.ap, a.2, a.3, a.4 {

height: 100px;

width: 194px;

}


a.ap:hover, a.2:hover, a.3:hover, a.4:hover {

background-position: -194px 0;

}


a.ap {background: transparent url(http://www.pikpok.com.pl/allegro/ap.gif) 0 0 no-repeat;}

a.2 {background: transparent url(http://www.pikpok.com.pl/allegro/2.gif) 0 0 no-repeat;}

a.3 {background: transparent url(http://www.pikpok.com.pl/allegro/3.gif) 0 0 no-repeat;}

a.4 {background: transparent url(http://www.pikpok.com.pl/allegro/4.gif) 0 0 no-repeat;}


.produkty {

background: url('http://www.pikpok.com.pl/allegro/szablon/images/pikpok_07.jpg') repeat-y 0 0;

width: 240px;

}

-dla części html

[/code]

PS. Powyższe jest pisane z głowy i na ślepo, więc zastrzegam sobie prawo do możliwego jakiegoś drobnego błędu w wyświetlaniu (możliwe, że “ulli” będzie trzeba dla linków, co by je do pionu doprowadzić)

[dodi_lumiere]

Witam

męczę się z tym od paru godzin i dalej nic nie wychodzi :(. Wklejam ten pierwszy kod pomiędzy , a drugi w miejsce gdzie mają być te przyciski. ale żadnego z przycisków nie widać a na dodatek rozjeżdża mi się tekst w tabelach. co ma wstawić zamiast “#” i “_blank” ? ten _blant to adres do którego ma się odnieść przycisk ?

[manieKMP]

Za hash (#) wstawiasz link do strony, do której ma prowadzić dany przycisk/odnośnik. Wartości target nie ruszasz, bo _blank “mówi” przeglądarce jak/gdzie ma zostać wyświetlona strona z odnośnika, w tym wypadku w nowej karcie lub oknie.

Jak możesz, to udostępnij ten “szablon” allegro po dokonanych zmianach (w pełnej wersji), to wezmę i popołudniem zobaczę co może być nie tak i zwrócę poprawione.

[dodi_lumiere]

ok.było by super. dzisiaj znowu się męczyłem ze dwie godziny, ale nic nie udało mi się osiągnąć.

tu link do kodu:

http://www.pikpok.com.pl/allegro/kod.txt

dwa gify dla przykładu:

http://www.pikpok.com.pl/allegro/test15.gif -> odnośnik: http://pikpok.na.allegro.pl/index.php?c … d=24521739

http://www.pikpok.com.pl/allegro/test16.gif -> odnośnik: http://pikpok.na.allegro.pl/index.php?c … d=24521739

link do oryginalnego, niezmienionego kodu:

http://www.pikpok.com.pl/allegro/kod2.txt

próbowałem znaleźć w tym jakąś logikę, ale chyba coś mi nie wychodzi. Cały pomysł z tym szablonem miał się opierać właśnie na tych podświetlanych odnośnikach, dlatego mi tak bardzo na tym zależy. Z reszta jak widać w szablonie jest sporo miejsca na te odnośniki (produkty, produkty powiązane, producenci). Myślałem ze na tyle jest to proste ze zrobię to sam, ale po tygodniu poddałem się i wszedłem na forum dp.

pozdrawiam

[manieKMP]

Ok, wiem w czym był problem -w mojej sklerozie ;).

Wklej poniższe w oryginał, chyba że będziesz wiedzieć co zastąpić w tym zmienianym

-dla css (tag stylu)

a.p_1 {background: url(http://www.pikpok.com.pl/allegro/test15.gif) 0 0 no-repeat;}

a.p_2 {background: url(http://www.pikpok.com.pl/allegro/test16.gif) 0 0 no-repeat;}

a.p_3 {background: url(obrazek) 0 0 no-repeat;}

a.p_4 {background: url(obrazek) 0 0 no-repeat;}


a.p_1, a.p_2, a.p_3, a.p_4 {

display: block;

height: 20px;

width: 194px;

}


a.p_1:hover, a.p_2:hover, a.p_3:hover, a.p_4:hover {background-position: -194px 0;}

-dla html

[/code]

Jak widać z powyższego, w odstawkę poszły “produkty”, nie jest jednak potrzebne by tą część “upiększać”, bo przywrócenie domyślnego layoutu, poprzez zamianę contener na user_field (nie wiem czy tak było w standardzie, czy zostało coś usunięte, ale zabieg przywraca sporą część “szablonu”, w tym i tła), ujawnia że ta część jednak posiada grafikę itd. Tak więc “div” został dla rozeznania. W tym też najprawdopodobniej zawierał się problem z rozjeżdżaniem tabel, “produkty” miały nadmiarową szerokość, ustawioną na 240px, będąc w miejscu z szerokością bodaj 190px.

A teraz główny gwóźdź programu, czyli moja skleroza ;). Przyciski w poprzednio podanej formie nie mogły być wyświetlone, ponieważ zapomniałem o tym jaka jest interpretacja domyślnego ich wyświetlania -są elementami liniowymi-, przez co “nie można” bezpośrednio w nich wyświetlać obrazków (nie mogą być nimi ze względu na atrybut), chyba że się to “obejdzie” -nie w tym wypadku- lub wymusi -“bycie” elementem np. blokowym-.

PS. Za miast słowa obrazek, wpisujesz ścieżkę dla odpowiedniej grafiki. Za hash (#) wstawiasz link do strony, do której ma dany przycisk prowadzić.

Większa liczba przycisków nie powinna być problemem, chyba będziesz wiedział jak, gdzie i co “powielać”?

PPS. Ogólnie w kodzie masz “mały” bałagan (np. duble w klasach i id np. float’u), ale to już tak nieformalnie i w sumie mało ważne

[dodi_lumiere]

Dziękuję. Wszystko działa. temat uważam za zamknięty

– Dodane 13.03.2012 (Wt) 21:58 –

Witam

mam jeszcze jedno pytanie. Po naciśnięciu na dany odnośnik otwiera mi się nowa zakładka. a co jeżeli chciał bym aby się otworzyła na tej samej stronie ?

poniżej przykład tego co udało się dzięki Tobie zrobić:

http://pikpok.na.allegro.pl/farby-do-tw … ml?shops=1

pozdrawiam

– Dodane 13.03.2012 (Wt) 22:07 –

ok. już wykminiłem co trzeba zrobić.