Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][AJAX] Jak to podświetlić?
Forum PHP.pl > Forum > Przedszkole
MateuszS
3.02.2009, 19:45:54
Oto kod. Chcę podświetlić obrazek header.jpg jednak nie wiem jak. Jest on jakby linkiem do wysuwanego menu.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="js/mintAjax.js"></script>
  4. <script type="text/javascript" src="js/kolorowetlo.js"></script>
  5. <script type="text/javascript" src="js/bajery.js"></script>
  6. <script type="text/javascript" src="js/wysmenu.js"></script>
  7.  
  8. </head>
  9. <body bgcolor="B7C059" width="100%" height="100%">
  10.  
  11.  
  12. <div style="margin-top: 10px; margin-left: 10px;">
  13. <dl id="menu0">
  14. <dt><img src="images/header.jpg"> </dt>
  15.  
  16. <dd>Element 1.1</dd>
  17.  
  18. <dt>Nagłówek 2</dt>
  19. <dd>Element 2.1</dd>
  20. <dd>Element 2.2</dd>
  21. <dd>Element 2.3</dd>
  22. <dt>Nagłówek 3</dt>
  23. <dd>Element 3.1</dd>
  24. <dd>Element 3.2</dd>
  25. <dd>Element 3.3</dd>
  26. </dl>
  27. </div>
  28.  
  29. <script type="text/javascript">
  30. // <![CDATA[
  31. new Menu('menu0');
  32. // ]]>
  33. </script>
  34.  
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


i Ajax
[HTML] pobierz, plaintext 
  1. function ColorIn() {
  2.     mint.fx.Color("box", "backgroundColor", null, "B22222", 20, 500);
  3.     mint.fx.Color("box", "borderColor", null, "000000", 20, 500);
  4. }
  5.  
  6. function ColorOut() {
  7.     mint.fx.Color("box", "backgroundColor", null, "B7C059", 20, 500);
  8.     mint.fx.Color("box", "borderColor", null, "8F9D11", 20, 500);
  9. }
[HTML] pobierz, plaintext

Tego kodu ajaxa nie wiedzialem jak zmodyfikowac aby mi pasowal pod ten moj obrazek. Prosze o pomoc
gebp
3.02.2009, 20:09:11 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="js/mintAjax.js"></script>
  4. <script type="text/javascript" src="js/kolorowetlo.js"></script>
  5. <script type="text/javascript" src="js/bajery.js"></script>
  6. <script type="text/javascript" src="js/wysmenu.js"></script>
  7. <script type="text/javascript">
  8. // <![CDATA[
  9. function ColorIn() {
  10. mint.fx.Color("obrazek", "backgroundColor", null, "B22222", 20, 500);
  11. }
  12. function ColorOut() {
  13. mint.fx.Color("obrazek", "backgroundColor", null, "B7C059", 20, 500);
  14. }
  15. // ]]>
  16. </script>
  17.  
  18. </head>
  19. <body bgcolor="B7C059" width="100%" height="100%">
  20.  
  21.  
  22. <div style="margin-top: 10px; margin-left: 10px;">
  23. <dl id="menu0">
  24. <dt id="obrazek" style="background-color: white;" onmouseover="ColorIn()" onmouseout="ColorOut()"><img src="images/header.jpg"> </dt>
  25.  
  26. <dd>Element 1.1</dd>
  27.  
  28. <dt>Nagłówek 2</dt>
  29. <dd>Element 2.1</dd>
  30. <dd>Element 2.2</dd>
  31. <dd>Element 2.3</dd>
  32. <dt>Nagłówek 3</dt>
  33. <dd>Element 3.1</dd>
  34. <dd>Element 3.2</dd>
  35. <dd>Element 3.3</dd>
  36. </dl>
  37. </div>
  38.  
  39. </body>
  40. </html>
[HTML] pobierz, plaintext


czytaj!
MateuszS
3.02.2009, 20:25:43
Wtedy podkreśli tylko div za obrazkiem ale obrazka juz nie sad.gif
gebp
3.02.2009, 20:29:31
Może źle zrozumiałem
Cytat
Chcę podświetlić obrazek

Co przez to rozumiesz?
MateuszS
3.02.2009, 21:07:25
Ok no nic juz zrobilem trosia inaczej i tez jest dobrze. Dzieki i przepraszam za klopot.

Ok żeby nie tworzyć nowego tematu niepotrzebnie:

Mam takie coś: 
[HTML] pobierz, plaintext 
  1. <div style="margin-top: 10px; margin-left: 10px;">
  2. <dl id="menu0">
  3. <dt><div id="box" class="box" onmouseover="ColorIn()" onmouseout="ColorOut()"></div> </dt>
  4.  
  5. <dd>Element 1.1</dd>
  6.  
  7. <dt><div id="box" class="box1" onmouseover="ColorIn()" onmouseout="ColorOut()"></div></dt>
  8. <dd>Element 2.1</dd>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div.box {
  2. background-image: url("images/header.jpg"); 
  3. position:relative; -moz-border-radius: 8px; border-radius: 8px;  
  4. height: 28px; width: 206px;
  5. border: 3px solid #8F9D11;
  6. margin-bottom: 5px;
  7. }
  8.  
  9. div.box1 {
  10. background-image: url("images/header2.jpg"); 
  11. position:relative; -moz-border-radius: 8px; border-radius: 8px;  
  12. height: 28px; width: 206px;
  13. border: 3px solid #8F9D11;
  14. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. function ColorIn() {
  2.     mint.fx.Color("box", "backgroundColor", null, "#6B8E23", 20, 500);
  3.     mint.fx.Color("box", "borderColor", null, "#006400", 20, 500);
  4. }
  5.  
  6. function ColorOut() {
  7.     mint.fx.Color("box", "backgroundColor", null, "#228D22", 20, 500);
  8.     mint.fx.Color("box", "borderColor", null, "#8F9D11", 20, 500);
  9. }
[HTML] pobierz, plaintext


Powinny sie podswietlac oba buttony, jednak podswietla sie tylko gorny. O co moze chodzic?
isso
3.02.2009, 21:26:46
wydaje mi się, że w jQuery ;> addClass byłby prostszy... ale moge się mylić...
MateuszS
3.02.2009, 21:30:00
Ale to jest Ajax ;] Moze ktos wie czemu sie 2 nie podswietla sad.gif
isso
3.02.2009, 21:47:19
Cytat(MateuszScirka @ 3.02.2009, 21:30:00 ) *
Ale to jest Ajax ;]



... hmmm czy ja wiem? kurcze... to takie dość złożone... no niby jest to asynchroniczny javascript i xml ;] chociaż, ja bym jednak obstawiał przy tym, że głównym celem działania AJAX`u było "behind the scenes"... ale raczej zwiazane z przetwarzaniem danych... no ale może...?;]

Tzn. no może faktycznie racja, że jest;] z tym, że akurat jQuery to raczej Framework ;]
MateuszS
3.02.2009, 21:53:05
Ja tam w tym nowy jestem ;] Mialem ochote troche sie graficznymi efektami pobawic. Musze zrobic strone na Infe wiec czemu nie dzieki Ajaxowi ;]
isso
3.02.2009, 22:04:52
nie no, racja, racja... ale jQuery jest proste smile.gif weź sam zobacz smile.gif na pewno nie pożałujesz:)
matixrr
3.02.2009, 22:19:00 
[PHP] pobierz, plaintext 
  1. <?php
  2. <script type="text/javascript">
  3.  
  4. function ColorIn1() {
  5. mint.fx.Color("box", "backgroundColor", null, "#6B8E23", 20, 500);
  6. mint.fx.Color("box", "borderColor", null, "#006400", 20, 500);
  7. }
  8. function ColorIn2() {
  9. mint.fx.Color("box2", "backgroundColor", null, "#6B8E23", 20, 500);
  10. mint.fx.Color("box2", "borderColor", null, "#006400", 20, 500);
  11. }
  12.  
  13. function ColorOut1() {
  14. mint.fx.Color("box", "backgroundColor", null, "#228D22", 20, 500);
  15. mint.fx.Color("box", "borderColor", null, "#8F9D11", 20, 500);
  16. }
  17. function ColorOut2() {
  18. mint.fx.Color("box2", "backgroundColor", null, "#228D22", 20, 500);
  19. mint.fx.Color("box2", "borderColor", null, "#8F9D11", 20, 500);
  20. }
  21.  
  22. </script>
  23. </head>
  24. <body>
  25. <div style="margin-top: 10px; margin-left: 10px;">
  26. <dl id="menu0">
  27. <dt><div id="box" class="box" onmouseover="ColorIn1()" onmouseout="ColorOut1()"></div> </dt>
  28.  
  29. <dd>Element 1.1</dd>
  30.  
  31. <dt><div id="box2" class="box2" onmouseover="ColorIn2()" onmouseout="ColorOut2()"></div></dt>
  32. <dd>Element 2.1</dd>
  33. <dd>Element 2.1</dd>
  34. </body>
  35. ?>
[PHP] pobierz, plaintext
MateuszS
3.02.2009, 22:20:52
Dziala sposob matixrr'a. Dziekuje.
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.