+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: problemy z obrazkami mouseover (/thread-problemy-z-obrazkami-mouseover)
problemy z obrazkami mouseover - fafor - 14-02-2011
uzylem tego scriptu do zrobienia przyciskow mouse over ale pojawil sie problem, jak wstawiam te obrazki jeden kolo drugiego to pomiedzy nimi jest przerwa paru pixeli po obu bokach na gorze i dole. border orbazkow jest 0, probowalem dodac vspacing itp ale nie dziala, a jak dodaje style position relative top left to na roznych przegladarkach inaczej wyglada, prosze o pomoc.
Kod:
head:
<SCRIPT LANGUAGE="JavaScript">
loadImage1 = new Image();
loadImage1.src = "homw.png";
staticImage1 = new Image();
staticImage1.src = "homg.png";
</script>
body:
<a href="home.html" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="homg.png" border=0></a>RE: problemy z obrazkami mouseover - Kartofelek - 14-02-2011
Oj poplądanie.
1) Znaczniki piszemy z małych liter.
2) atrybut language? Przedwojenny. Zmień na type="text/javascript"
3) zmiana obrazków za pomocą js? Przedwojenna metoda. O wiele lepiej za pomocą CSS Sprite
4) Nadaj elementowi img typ wyświetlania block lub inline-block.
RE: problemy z obrazkami mouseover - fafor - 14-02-2011
dobra probowalem tego css sprite kozystajac z szblonu: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
ale pojawia sie pewien problem. W tym szablonie nie ma linkow wiec jak nacisne dany przycisk to on zostanie zaznaczony nawe jak myszka najade na inny, gdy dodam linki strona sie przeladuje i przycisk nie bedzie juz zaznaczony, jak mozna temu zaradzic?
RE: problemy z obrazkami mouseover - Kartofelek - 14-02-2011
a bardzo prosto:
HTML:
Kod:
<a href="" id="link1">Cos</a>
<a href="" id="link2">Cos2</a>Obrazek ma postać:
Kod:
[ 1off ][ 2offf ]
[ 1hover ][ 2hover ]
[ 1active ][ 2active ]style mają postać:
Kod:
a {float:left; width:100px; height:20px; display:block; background:url(XXXX.jpg) no-repeat; siała baba mak....}
#link1 {background-position:0 0;}
#link1:hover {background-position:0 -20px;}
#link1.aktywny {background-position:0 -40px;}
#link2 {background-position:-100px 0;}
#link2:hover {background-position:-100px -20px;}
#link2.aktywny {background-position:-100px -40px;}Zrozumiał?
Niestety w technice sprite CSS wychodzi ułomność Firefoxa :}, który jako jeden z nielicznych nie obsługuje background-position-y, co jest w moim odczuciu jednym z większych baboli. Czemu? Odpowiedz sobie sam (odpowiedzi szukaj w klasach).
Ah powinienem pisać kursy ;] A nie sory przecież ja już to robię