ďťż

Jak zrobic taki over state, zeby w ramce ładował sie jakis obrazek?

       

Podstrony


telcocafe

A wiec mam zrobiony button i chce zeby po najechaniu na niego w danej ramce pokazywal sie obrazek/tekst. Jak to zrobic? Acha i chce zeby overstate byl tez na buttonie tzn ze po najechaniu na niego zmienia sie button a w ramce pojawia sie grafika.



Zdarzenia onmouseover i onmouseout + document.frames[] ?

<html><head> <script type="text/javascript" language="javascript"> <!--// function cos(obj) { document.getElementById('if1').src = 'http://poczta.o2.pl'; obj.style.background = '#ffd700'; } //--> </script> </head><body> <input type="button" value="mouse here" onmouseover="javascript:cos(this);" /> <br /><br /> <iframe src="http://forum.ks-ekspert.pl" id="if1" width="900" height="400">Twoja przegladarka nie wyswietla plywajacych ramek.</iframe> <!-- omg przeczytaj pierwszy z brzegu kurs js'a --> </body></html>
Użytkownik DJ_ProG edytował ten post 24 maj 2006, 13:41
@Dj_ProG

Dobra to jest to o co mi chodziło tylko że chciałbym żeby pare rzeczy bylo inaczej:
1. Zeby ten button gdzie jest napisane "mouse here" zmienic na wlasny
2. Zeby po przesunieciu myszki z buttona obrazek w ramce zmienial sie na ten co byl tam domyslnie.
3. Jak sie pozbyc z tej ramki obramowania?

Jak to zrobic? Sory za nooberskie pytania, ale nie znam sie na js'ach:/
Użytkownik couler edytował ten post 24 maj 2006, 15:14


<html><head> <script type="text/javascript" language="javascript"> <!--// function cos(obj) { document.getElementById('if1').src = obj; obj.style.background = '#ffd700'; } //--> </script> </head><body> <input type="button" value="POMYŚL TROCHĘ :/" onmouseover="javascript:cos('http://wp.pl')" onmouseout="javascript:cos('http://domyslna.pl')" /> <br /><br /> <iframe src="http://domyslna.pl" id="if1" width="900" height="400" frameborder="0">Twoja przegladarka nie wyswietla plywajacych ramek.</iframe> <!-- omg przeczytaj pierwszy z brzegu kurs js'a --> </body></html>

A co z tym buttonem? Nie chce zeby on byl taki biedny, ale zeby mozna bylo podstawic swoj.

EDIT:
Ok dziala. Tylko nie wiem teraz jak sie z tym wszystkim polapac i zrobic overstate nad buttonem:D Ale chyba sobie poradze xD
Użytkownik couler edytował ten post 24 maj 2006, 17:06

(...)
Jak to zrobic? Sory za nooberskie pytania, ale nie znam sie na js'ach:/

No dobra juz prawie sobie ze wszystkim poradzilem oprocz jednej rzeczy: Mianowicie z overstatem na buttonie. Zrobilem z tego skryptu co podał Coldpeer i teraz nie wiem jak połączyć 2 zdarzenia w js'ach: tak że po najechaniu na button (onmouseover) wykonywaly sie 2 zdarzenia: podmiana obrazka(buttonu) i podmiana tego co jest w ramce. Probowalem te zdarzenia rozdzielic srednikiem, ale cos nie da rady...

podmiana buttonu czy zmiana wyglądu? bo kodzik jest jasny - zmienia zawartość ramki i wygląd buttona. Jeśli chodzi o CSSy, to masz wzór i skorzystaj z niego. Jak nie o to chodzi, to napisz dokładnie o co.
a moze poprostu daj focusa na btnie? np tak:
<input type="button" value="POMYŚL TROCHĘ :/" onmouseover="javascript:cos('http://wp.pl');this.focus();" onmouseout="javascript:cos('http://domyslna.pl')" />
choba to chodzi.
Użytkownik DJ_ProG edytował ten post 24 maj 2006, 19:25
HHmmm......wydaje mi sie ze napisalem o co mi chodzi.....moze jeszcze raz napisze:
Chce zeby dzialy sie 2 zdarzenia

1. Podmiana obrazka
2. Podmiana zawartosci ramki

"MM_swapImage('Image3','','images/index_overz_15.gif',1) " "javascript:cos('http://wp.pl')"

Chce zeby zachodzily tutaj:
onmouseover=

Chyba teraz juz mozna zrozumiec o co chodzi. Teraz utknalem na tym jak polaczyc te 2 zdarzenia.
Użytkownik couler edytował ten post 25 maj 2006, 14:19
onmouseover="javascript:cos('http://wp.pl');MM_swapImage( 'Image3','','images/index_overz_15.gif',1)"


onmouseover="javascript:cos('http://wp.pl');MM_swapImage( 'Image3','','images/index_overz_15.gif',1)"

A czy sama procedura MM_swapImage() chodzi poprawnie? może jeszcze napisz jak jest zadeklarowana owa funkcja.

Tak procedura MM_SwapImage chodzi dobrze.Oto ona:
} function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }


(...)
"MM_swapImage('Image3','','images/index_overz_15.gif',1) " (...)

Heh niespecjalnie wiem o czy mowisz,ale procedura,ktora podalem dziala wysmienicie ;)
Użytkownik couler edytował ten post 27 maj 2006, 13:01

Heh niespecjalnie wiem o czy mowisz,ale procedura,ktora podalem dziala wysmienicie ;)

Chyba nie zrozumiales o co chodzi :( Chodzi mi o polaczenie tych dwoch procedur MM_swapimage i tej co napisales, tak zeby odpalaly sie jednoczesnie przy zajsciu onmouseover. Nie wiem jak je polaczyc :huh:


Chyba nie zrozumiales o co chodzi  :( Chodzi mi o polaczenie tych dwoch procedur MM_swapimage i tej co napisales, tak zeby odpalaly sie jednoczesnie przy zajsciu onmouseover. Nie wiem jak je polaczyc :huh:

Mozesz napisac to troche jasniej bo niezrozumialem o co chodzi:

wez tam gdzie jest kodzik "cos() { ... }" daj na koncu (przed "}")

nie wiem, ktorej procki uzywasz, ale wezmy, ze ma byc tak
<script type="text/javascript" language="javascript"> <!--// function cos(obj) { document.getElementById('if1').src = obj; obj.style.background = '#ffd700'; MM_swapImage('Image3','','images/index_overz_15.gif',1); } //--> </script>
no i w onmouseover daj tylko odwolanie do cos
onmouseover="javascript:cos();"

Hhmmm zrobilem tak jak napisales w poprzednim poscie, ale po najechaniu na button nic sie nie dzieje.... w dodatku IE wywala ze jest jakis blad.
Użytkownik couler edytował ten post 29 maj 2006, 16:49
to może spojrz na kod i pomyśl jak go rozwiązać. ja nie mam swojej czarodziejskiej kuli jak pewien user ;)

tak na serio - moze wreszcie podasz strone, kod, blad, co?
i jak juz to w [ codebox ][/ codebox].
Użytkownik DJ_ProG edytował ten post 30 maj 2006, 14:11
Oka o to caly kod:
<html><head> <script language="Javascript" type="text/Javascript"> <!-- function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <script type="text/javascript" language="javascript"> <!--// function cos(obj) { document.getElementById('if1').src = obj; obj.style.background = '#ffd700'; } //--> </script> </head><body> <a href="media.html"><img src="images/index_14.gif" border="0" onmouseover="MM_swapImage('Image3','','images/index_overz_15.gif',1) ;javascript:cos('images/index_overz_14.gif')" onmouseout="MM_swapImgRestore();javascript:cos('images/index_04.gif') "></a> <br><br> <iframe src="images/index_14.gif" id="if1" width="900" height="400" frameborder="0">Twoja przegladarka nie wyswietla plywajacych ramek.</iframe> </body></html>

W onmouseover i onmouseout procedury oddzielilem srednikami, zeby mozna bylo sie polapac.

UZYWAJ CODEBOXOW !!! :excl: !!!

widac ze podstaw nie znasz
<html><head> <script language="Javascript" type="text/Javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } /* OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG OMG */ function cos(obj) { document.getElementById('if1').src = obj; } //--> </script> </head><body> <a href="media.html"><img src="images/index_14.gif" border="0" onmouseover="javascript:MM_swapImage('Image3','','images/index_overz_15.gif' ,1);cos('images/index_overz_14.gif');" onmouseout="javascript:MM_swapImgRestore();cos('images/index_04.gif');"></a> <br><br> <iframe src="images/index_14.gif" id="if1" width="900" height="400" frameborder="0">Twoja przegladarka nie wyswietla plywajacych ramek.</iframe> </body></html>

co do tych funkcji MM_ to nie ingerowalem w nie... choc mozna to o wiele latwiej zrobic. jak? naucz sie podstaw.
Użytkownik DJ_ProG edytował ten post 30 maj 2006, 17:14
Czy mi sie wydaje czy to nie dziala? Jest tak samo jak bylo poprzednio....czyli nie dziala druga procedura podczepiona pod onmouseover.


Czy mi sie wydaje czy to nie dziala? Jest tak samo jak bylo poprzednio....czyli nie dziala druga procedura podczepiona pod onmouseover.

Tak przyznaje sie ze nie znam js co podkreslalem od samego poczatku...nie bede sie teraz tego uczyl bo stronke musze zrobic w krotkim czasie a uczenie sie js'a zajmie go za duzo...A i powiedz z jakiej przegladarki korzystasz. Ja uzywam firefoxa i na nim to nie dziala.
Użytkownik couler edytował ten post 04 czerwiec 2006, 12:32
[ot]
omg sprawdzane pod ff i ie.
A nauka JSa nie trwa tak długo (sorry, od pierwszego postu na tej stronce minęło 11 dni, więc jeszcze więcej byś się dowiedział) a to są podstwy, baaardzo przydatne w przyszłości.
A wogóle z takim podejściem do sprawy to pozytywne nie widzę twojej postawy, a jedynie pracę na "odwal się". Skoro tak, to po co wogóle o to pytać?
[/ot]

Jaką pracę na "odwal sie?". Robie rożne projekty i potrzeba do nich rożnych umiejętności. Raz potrzeba php jeszcze flash by sie przydal i oczywiscie photoshop. Uczenie sie tego wszystkiego zajmuje za duzo czasu, dlatego zajmuje sie tylko najwazniejszymi rzeczami...Watpie zebys ty byl znal chociaz podstawy wszystkich rzeczy, ktore moga sie przydac do robienia stronki. Pierwszy raz do jej tworzenia potrzebny mi byl js. Moze jak znajde troche czasu to zaczne sie go uczyc.
Użytkownik couler edytował ten post 04 czerwiec 2006, 19:22
  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.