Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] div na cala szerokosc
Forum PHP.pl > Forum > Przedszkole
xix
9.03.2011, 23:09:45
mam cos takiego:
[PHP] pobierz, plaintext 
  1. <div funkcja_java_script> <img> </div>
[PHP] pobierz, plaintext

obrazek jest po prawej stronie strony. chcialbym aby funkcja z diva reagowala na calej szerokosci strony, a nie tak, jak jest teraz, gdy reaguje tylko po najechaniu na obrazek.
probowalem roznych roznosci css, jak width:100%, position, margin, float... ale nie trafilem na nic, co by dzialalo tak, jak tego potrzebuje. nie moge znalesc, wiec co moze rozszerzyc mi diva na cala szerokosc strony?
bmL
10.03.2011, 00:05:51 
[HTML] pobierz, plaintext 
  1. <body funkcja_java_script>
  2.     <div id="kontener"> <img> </div>
  3. </body>
[HTML] pobierz, plaintext

W funkcji jeżeli masz jakieś słówka "this" to zamień je na "document.getElementById('kontener')"
xix
10.03.2011, 01:57:56
Niestety teraz caly dokument <body> na calej wysokosci mi reaguje, a nie tylko jeden div o wysokosci obrazka.
Probuje caly tez tylko diva zmieniac, ale tez to nic nie daje - reakcja jest tylko po dotknieciu obrazka, a nie szerokiego diva.
frantic09
10.03.2011, 07:26:21
Fajnie by było jakbyś pokazał trochę więcej kodu. Co jak co, ale
[HTML] pobierz, plaintext 
  1. <div funkcja_js> <img /> </div>
[HTML] pobierz, plaintext

przecież powinno działać wink.gif może div nie jest odpowiednio szeroki? smile.gif
xix
10.03.2011, 10:45:38
niech pliki wygladaja tak, jak mi bmL doradzil:

1.php:
[PHP] pobierz, plaintext 
  1. <body onMouseOver="fun1(document.getElementById('kontener'))" onMouseOut="fun2(document.getElementById('kontener'))">
  2. <div id="kontener" class="obr" ><img id="obra" src="./1a.png" />
  3. </div>
  4. ...
  5. COSTAM
[PHP] pobierz, plaintext


2.js:
[PHP] pobierz, plaintext 
  1. function fun1()
  2. {
  3.  var zmi1=document.getElementById('obra');
  4.  zmi1.src='./1b.png';
  5. }
  6. function fun2()
  7. {
  8.  var zmi2=document.getElementById('obra');
  9.  zmi2.src='./1a.png';
  10. }
[PHP] pobierz, plaintext


3.css (tu juz wstawialem wszystko, co mi przyszlo do glowy, chociaz width:100% na chlopski rozum powinno wystarczyc - mimo tego funkcja dziala po najechaniu na COSTAM na calym body, a mnie jest potrzebne dzialanie tylko do wysokosci obrazka):
[PHP] pobierz, plaintext 
  1. div.obr
  2. {
  3.  width:100%;
  4. }
[PHP] pobierz, plaintext
bmL
10.03.2011, 11:07:46 
[HTML] pobierz, plaintext 
  1. <img onmouseover="fun1()" onmouseout="fun2()" id="obra" src="./1a.png" />
[HTML] pobierz, plaintext

. . .
frantic09
10.03.2011, 11:53:08
Jeśli podajesz funkcje z parametrami w eventach jak onmouseout, onmouseover, onclick... 
[HTML] pobierz, plaintext 
  1. <body onMouseOver="fun1(document.getElementById('kontener'))" onMouseOut="fun2(document.getElementById('kontener'))">
[HTML] pobierz, plaintext

Wtedy w plikach js definiuj funkcje także z parametrami
[PHP] pobierz, plaintext 
  1. function fun1(parametr)
  2. {...}
  3. function fun2(parametr)
  4. {...}
[PHP] pobierz, plaintext


Wydaje mi się że lepiej byłoby przekazywać jedynie ID elementu, w następujący sposób:
[HTML] pobierz, plaintext 
  1. <img onMouseOver="fun1('obra')" onMouseOut="fun2('obra')" id="obra" src="./1a.png">
[HTML] pobierz, plaintext

A dopiero w JS bawić się z getElementById()
[PHP] pobierz, plaintext 
  1. function fun1(parametr)
  2. { 
  3.   var zmi1=document.getElementById(parametr);
  4.   zmi1.src='./1b.png';
  5. }
  6. function fun2(parametr)
  7. {
  8.   //może uda się krócej niż powyżej...
  9.   document.getElementById(parametr).src='./1a.png';
  10. }
[PHP] pobierz, plaintext
xix
10.03.2011, 12:17:31
nadal to u mnie nie dziala po zastosowaniu doslownym, jak i przenoszeniu Waszych porad na diva.
tak to powinno dzialac, jak ponizej, a nie wiem, gdzie blad:
http://www.pasteall.org/pic/show.php?id=9799
frantic09
10.03.2011, 12:47:03
Hm pokaże jak to działa u mnie (a działa, bo właśnie sobie to sprawdziłem smile.gif )

mój prosty plik HTML:
[HTML] pobierz, plaintext 
  1. <html>
  2. <script type="text/javascript" src="skrypt.js"></script>
  3. <body>
  4. <div style="width:50%; border: 1px solid blue;text-align:right;padding:10px">
  5. <!-- Tutaj słowo JAVASCRIPT powinno być pisane razem... nie wiem czemu mi to rozdziela -->
  6. <img onmouseover="java script:funkcja1('obra')" onmouseout="java script:funkcja2('obra')" id="obra" src="1.jpg">
  7. </div>
  8. Jakiś tekst, na którym funkcje maja nie działać... Dużo tekstu, kilka linijek.<BR/>
  9. Jakiś tekst, na którym funkcje maja nie działać... Dużo tekstu, kilka linijek....
  10. </body>
  11. </html>
[HTML] pobierz, plaintext


mój prosty plik JS (skrypt.js) :
[PHP] pobierz, plaintext 
  1. function funkcja1(parametr)
  2. { 
  3. document.getElementById(parametr).src='2.jpg';
  4. }
  5. function funkcja2(parametr)
  6. {
  7.   document.getElementById(parametr).src='1.jpg';
  8. }
[PHP] pobierz, plaintext


Oprócz tego mam też dwa pliki:
- 1.jpg

- 2.jpg


Wszystko w jednym katalogu.


############
A gdy chcesz, aby funkcje były wykonywane po najechaniu na DIVa wtedy przeklejasz eventy z IMG na DIV, mamy wtedy
[HTML] pobierz, plaintext 
  1. <!-- Tutaj oczywiście słowo JAVASCRIPT powinno być pisane razem... -->
  2. <div style="width:50%; border: 1px solid blue;text-align:right;padding:10px" onmouseover="java script:funkcja1('obra')" onmouseout="java script:funkcja2('obra')">
[HTML] pobierz, plaintext
xix
10.03.2011, 13:15:25
dobra zrobilem. dzieki wszystkim za pomoc.
problem tkwil jednak w zupelnie innym miejscu - w glebi pliku css przy pozycjonowaniu tekstu COSTAM tongue.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.