guziki graficzne (np. dla "wyszukiwarki")

DidExit

2010-08-06 19:59

witam. jak poprawnie przypisać grafikę guzikowi (np dla wyszukiwarki zamiast guzika z napisem "szukaj" to ikonka z lupą) tak aby była poprawnie widoczna w IE7?? bo jak wklepałem grafikę jako background (w plugins.css):

#searchForm .submit{background:url('img/Search_icon.png')no-repeat; border:none; height:19px; width:19px;}

to w Chrome 5.x i FF 3.x widzi, a w IE7 jest biały kwadracik

jeśli robię coś źle to proszę o poprawienie mnie (nie jestem zbyt dobry w te klocki)

aha i czy jest a myślę że jest możliwość aby po najechaniu na ikonkę wyszukiwarki zmieniła się na inną ikonkę (inny kolor)

» Quick.Cms v2.x

rzyber

2010-08-07 21:31

Co do samego obrazka wystarczy zrobić tak
Znajdz w pliku CSS wpis

<input type="submit" value="$lang[search] »" class="submit" /> - lub podobny, tak jest w quick.cart ;]

i zmień na

<input type="image" src="adresobrazka.gif" value="$lang[search] »" class="submit" />

rzyber

2010-08-07 21:32

tfuu nie w css tylko container.tpl ;]

rzyber.com

DidExit

2010-08-07 23:15

nie wiedzieć czemu ale nie widzi mi obrazka :(

boboo

2010-08-08 06:05

1. Miałem podobny problem z video. I albo grało w FF, a w IE nie, albo na odwrót.
Aż zaadresowałem "odgórnie" ścieżkę.
spróbuj w background:url() wpisać ścieżkę:
'//templates/img/Search_icon.png'
(2 slashe na początku "//")
2. Zmiana po najechaniu myszką - załatwiasz to pseudoklasą "hover".
Czyli>
#searchForm .submit:hover{background:url('img/Nowy_Search_icon.png')no-repeat; border:none; height:19px; width:19px;}

http://skupienie.kimla.de/?software-quickcart,106

rzyber

2010-08-08 09:56

Bo link powinien wyglądać tak <input type="image" src="$config[dir_templates]/img/obrazek.gif" value="$lang[search] »" class="submit" />

Oczywiście jeśli obrazek masz umieszczony w katalogu templates/img/ ;D

rzyber.com

DidExit

2010-08-08 18:04

dzięki serdeczne za odpowiedzi - wykorzystałem jak na razie obydwie odpowiedzi...

dla wyszukiwarki pogrzebałem w css
/* search form */

#searchForm .submit{height:19px;width:19px;margin:0 0 -7px -3px;background:url('img/Search_icon.png') no-repeat center;border:none;}
#searchForm .submit:hover{height:19px;width:19px;margin:0 0 -7px -3px;background:url('img/Search_icon2.png') no-repeat center;border:none;} (nie musiałem tego wpisywać >> //templates/)

jeden mały minus to taki że w przeglądarce IE jest tak jak być powinno (czyli ikonka jest równo względem wyszukiwarki) a w FF ikonka jest 1px wyżej a w Chrome jest 1px niżej... ale mi to nie przeszkadza...

a dla guzików powrót i drukuj pogrzebałem w container.tpl


<div class="print"><a href="javascript:window.print();"><img src="$config[dir_templates]img/mail_icon_page.png" alt="Tekst alternatywny" border="0" onmouseover="this.src = '$config[dir_templates]img/mail_icon_page2.png'" onmouseout="this.src = '$config[dir_templates]img/mail_icon_page.png'" alt="$lang['print']" title="$lang['print']" /></a></div>
<div class="back"><a href="javascript:history.back();"><img src="$config[dir_templates]img/mail_icon_page.png" alt="Tekst alternatywny" border="0" onmouseover="this.src = '$config[dir_templates]img/mail_icon_page2.png'" onmouseout="this.src = '$config[dir_templates]img/mail_icon_page.png'" alt="$lang['back']" title="$lang['back']" /></a></div>