Podstrony
- telcocafe
- skrypt działa strona nie działa strona działa skrypt nie działa co z tym zrobić?
- [CSS] wielkosc tabelki 1 zalezna od wielkosci tabelki 2
- [html Css] Obramowanie Czcionki jak obramowac czcionke??
- CSS 2.1 + PHP5 Nie odczytuje grafiki!!!!
- Stałe menu Jak zrobic stałe menu
- Parser szablonów Jak zrobić parser szablonów ?
- forum w html jak zrobić forum w html
- [HTML] Logowanie do ftp poprzez pole tekstowe Jak zrobić logowanie do ftp poprzez pole
- [XHTML/CSS] Opera problem z wyświetlaniem Problem z wyświetlaniem strony w opera
- [cSs] jasnoszary border 'jotpegów' Pomocy !! :)
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- freetocraft.keep.pl
telcocafe
Zrobić obrazek, na którym mogę pisać pisać jest łatwo:<td style="background-image: url(img/upper_menu_bc.gif)" align="center" width="120"><a href="index.html">Strona główna</a></td>
Zrobić efekt rollover obrazka jest równie łatwo:
http://webmaster.hel...pt/rollover.htm
Ale jak zrobić rollover obrazka, po którym mogę pisać (obrazka w tle)?! Musiałbym go dać w tagu, który ma atrybut "name". Ale ani "td", ani "div" go nie ma. Oba mają "id", ale rollover dla "id" nie chce działać. Więc jak to zrobić??
<td style="background-image: url(img/upper_menu_bc.gif)" onmouseover="this.style.backgroundImage='url(img/nowy1.gif)'" onmouseout="this.style.backgroundImage='url(img/upper_menu_bc.gif)'"align="center" width="120"><a href="index.html">Strona główna</a></td>
Użytkownik kokoss15 edytował ten post 25 listopad 2007, 09:14
Dzięki, działa! A teraz idźmy dalej - ja w ten sposób sobie zrobiłem przycisk na stronie (oczywiście z linkiem) i podzieliłem go na trzy części (lewa część, środek i prawa część), czyli trzy komórki w tabeli. Oczywiście, jeśli zmieniam obrazek w jednej komórce (w tym przypadku - zmieniam kolor przycisku), to muszę zmienić też dwie pozostałe części. Teraz - jak zrobić, żeby się zmieniły obrazki we wszystkich trzech komórkach tabeli?
<script type="text/javascript"> function zmien(id,obrazek1,obrazek2){ var p1 = document.getElementById(id+"1"); var p2 = document.getElementById(id+"2"); var p3 = document.getElementById(id+"3"); if(p1.style.backgroundImage == 'URL('+obrazek1+'cz1.gif)'){ p1.style.backgroundImage == 'URL('+obrazek2+'cz1.gif)'; p2.style.backgroundImage == 'URL('+obrazek2+'cz2.gif)'; p3.style.backgroundImage == 'URL('+obrazek2+'cz3.gif)'; } else if(p1.style.backgroundImage == 'URL('+obrazek2+'cz1.gif)'){ p1.style.backgroundImage == 'URL('+obrazek1+'cz1.gif)'; p2.style.backgroundImage == 'URL('+obrazek1+'cz2.gif)'; p3.style.backgroundImage == 'URL('+obrazek1+'cz3.gif)'; } } </script> <td style="background-image: url(img/img1cz1.gif)" align="center" width="120" id="11" onmouseover="zmien('1', 'img/img1', 'img/img2')" onmouseout="zmien('1', 'img/img1', 'img/img2')"></td> <td style="background-image: url(img/img1cz2.gif)" align="center" id="12" width="120" onmouseover="zmien('1', 'img/img1', 'img/img2')" onmouseout="zmien('1', 'img/img1', 'img/img2')"><a href="index.html">Strona główna</a></td> <td style="background-image: url(img/img1cz3.gif)" id="13" align="center" width="120" onmouseover="zmien('1', 'img/img1', 'img/img2')" onmouseout="zmien('1', 'img/img1', 'img/img2')"></td>
To będzie tak:
Do 3 komórką tabeli dajesz id jakiś_napis1, jakiś_napis2, jakiś_napis3. Oczywiście to jakiś napis możesz sobie zmieniać tylko oczywiście żeby to 1,2 i 3 zostało na końcu. I do każdej komórki przypisujesz takie same zdarzenia onmouseover, onmouseout:
zmien('jakiś_napis', 'img/img1', 'img/img2') gdzie jakiś_napis to to co tam możesz sobie zmieniać (byle bez tego 1,2,3) 'img/img1' to podstawowa ścieżka do pierwszego obrazka a 'img/img2' to ścieżka do obrazka po zmianie. nie podawaj dokładnych ścieżek. Obrazki mają nazywać się: twoja_nazwacz1.gif i twoja_nazwacz2.gif oraz twoja_nazwacz3.gif To twoja nazwa może się zmieniać ale to cz1,cz2,cz3 oraz rozszeżenie gif musi zostać i w tych parametrach podajesz tylko to folder/twoja_nazwa, bez tego cz1 i gif!
Użytkownik kokoss15 edytował ten post 25 listopad 2007, 12:12
Rozumiem, że to:
if(p1.style.backgroundImage == 'URL('+obrazek1+'cz1.gif)'){ p1.style.backgroundImage == 'URL('+obrazek2+'cz1.gif)'; p2.style.backgroundImage == 'URL('+obrazek2+'cz2.gif)'; p3.style.backgroundImage == 'URL('+obrazek2+'cz3.gif)'; }
miało wyglądać tak:
if(p1.style.backgroundImage == 'URL('+obrazek1+'cz1.gif)'){ p1.style.backgroundImage = 'URL('+obrazek2+'cz1.gif)'; p2.style.backgroundImage = 'URL('+obrazek2+'cz2.gif)'; p3.style.backgroundImage = 'URL('+obrazek2+'cz3.gif)'; }
Ale nawet po tej poprawce... kod nie chce działać. W sumie nie wiem, czemu, bo powinien, ale nie chce działać i już. :P
Spróbuj tak:
<script type="text/javascript"> function zmien(id,obrazek){ var p = document.getElementById(id); p.style.backgroundImage == 'URL('+obrazek+')'; } </script> <td style="background-image: url(img/img1cz1.gif)" align="center" width="120" id="11" onmouseover="zmien('11', 'img/img2cz1.gif')" onmouseout="zmien('11', 'img/img1cz1.gif')"></td> <td style="background-image: url(img/img1cz2.gif)" align="center" id="12" width="120" onmouseover="zmien('12', 'img/img2cz2.gif')" onmouseout="zmien('12', 'img/img1cz2.gif')"><a href="index.html">Strona główna</a></td> <td style="background-image: url(img/img1cz3.gif)" id="13" align="center" width="120" onmouseover="zmien('13', 'img/img2cz3.gif')" onmouseout="zmien('13', 'img/img1cz3.gif')"></td>
Użytkownik kokoss15 edytował ten post 25 listopad 2007, 13:28
Spróbuj tak:
<script type="text/javascript"> function zmien(id,obrazek){ var p = document.getElementById(id); p.style.backgroundImage == 'URL('+obrazek+')'; } </script> <td style="background-image: url(img/img1cz1.gif)" align="center" width="120" id="11" onmouseover="zmien('11', 'img/img2cz1.gif')" onmouseout="zmien('11', 'img/img1cz1.gif')"></td> <td style="background-image: url(img/img1cz2.gif)" align="center" id="12" width="120" onmouseover="zmien('12', 'img/img2cz2.gif')" onmouseout="zmien('12', 'img/img1cz2.gif')"><a href="index.html">Strona główna</a></td> <td style="background-image: url(img/img1cz3.gif)" id="13" align="center" width="120" onmouseover="zmien('13', 'img/img2cz3.gif')" onmouseout="zmien('13', 'img/img1cz3.gif')"></td>
To, co wyżej, można też było zrobić od razu (funkcja zmień jest tutaj niepotrzebna), ale efekt będzie taki, że każda część przycisku będzie zmieniać kolor osobno.
W końcu zrobiłem tak:
<script type="text/javascript"> function activate(){ document.getElementById('bl').style.backgroundImage='url(img/upper_menu_abl.gif) '; document.getElementById('bc').style.backgroundImage='url(img/upper_menu_abc.gif) '; document.getElementById('br').style.backgroundImage='url(img/upper_menu_abr.gif) '; } function deactivate(){ document.getElementById('bl').style.backgroundImage='url(img/upper_menu_bl.gif) '; document.getElementById('bc').style.backgroundImage='url(img/upper_menu_bc.gif) '; document.getElementById('br').style.backgroundImage='url(img/upper_menu_br.gif) '; } </script> <td style="background-image: url(img/upper_menu_bl.gif)" onmouseover="activate()" onmouseout="deactivate()" width="7" id="bl"></td> <td style="background-image: url(img/upper_menu_bc.gif)" onmouseover="activate()" onmouseout="deactivate()" align="center" width="120" id="bc"><a href="index.html">Strona główna</a></td> <td style="background-image: url(img/upper_menu_br.gif)" onmouseover="activate()" onmouseout="deactivate()" width="7" id="br"></td>
I to ładnie działa. Natomiast nie wiem, czemu jak wcześniej próbowałem czegoś podobnego z użyciem getElementById, to nie chciało znaleźć tego obiektu. No i nie wiem, czemu twój drugi kod nie działał (bo w sumie powinien).
Ale dzięki i tak za pomoc.