Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][CSS]Problem z "chmurką" w menu
Forum PHP.pl > Forum > Przedszkole
McGiorgio
12.08.2011, 10:45:08
Kolega poprosił mnie o pomoc z menu jego strony, robiłem kilka lat temu coś podobnego ale przy całkowicie innej konstrukcji menu, opisuje w czym problem.

Kiedyś dawno temu zbudował sobie menu o następującej, dość kijowej, konstrukcji:

[HTML] pobierz, plaintext 
  1.  
  2. <div class="menu_top_box1"onmouseover="this.className='menu_top_box1_clic';" onmouseout="this.className='menu_top_box1';" onclick="self.location.href='?page=klan';" title="Na tej stronie znajdziesz informacje na temat naszego klanu.">KLAN</div>
  3.  
[HTML] pobierz, plaintext


Jak zapewne się domyślacie menu działa dobrze.

Teraz wpadliśmy na pomysł aby opisy z title wyświetlały się w chmurce której parametry będą określone w css'sie.

Mamy styl
[HTML] pobierz, plaintext 
  1. <style>
  2. .chmurka {
  3.   position: absolute;
  4.   font-family: Arial, Helvetica;
  5.   color: #222222;
  6.   font-size: 8pt;
  7.   background: #FCF204;
  8.   padding: 3px;
  9.   border: 1px;
  10.   border-style: solid;
  11.   margin-top: 12px;
  12.   margin-left: 8px;
  13.   margin-right: -1000;
  14. }
  15. </style>
[HTML] pobierz, plaintext


Mamy JavaSript
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function chmurka(e,v){
  3.   if(v.title){
  4.     var t=document.createElement("div");
  5.     t.className="chmurka";
  6.     t.innerHTML=v.title;v.title="";
  7.     v.move=function(e){
  8.       e=e||event;
  9.       t.style.left=e.clientX + document.body.scrollLeft+"px";
  10.       t.style.top=e.clientY + document.body.scrollTop+"px";
  11.     }
  12.     v.move(e);
  13.     document.body.appendChild(t);
  14.     v.onmousemove=function(e){v.move(e)}
  15.     v.onmouseout=function(e){
  16.       v.title=t.innerHTML;
  17.       document.body.removeChild(t);
  18.     }
  19.   }
  20. }
  21. </script>
[HTML] pobierz, plaintext


Wiem, że normalnie powinno łączyć się to tak

[HTML] pobierz, plaintext 
  1. <p align="right">NAJEDZ TU KURSOREM >>> <a href="#" title="OPIS OPIS" onmouseover="chmurka(event,this)">KLAN</a></p>
[HTML] pobierz, plaintext


Ale nie ma zielonego pojęcia jak połączyć to z tym menu które już jest więc please help me!

longinus_torwaldzki
12.08.2011, 10:55:05
a nie po prostu tak?
Kod
<div class="menu_top_box1"onmouseover="chmurka(event,this);this.className='menu_top_box1_clic';" onmouseout="this.className='menu_top_box1';" onclick="self.location.href='?page=klan';" title="Na tej stronie znajdziesz informacje na temat naszego klanu.">KLAN</div>
McGiorgio
12.08.2011, 10:58:02
Sprawdzam....

Działa, wielkie dzięki.... jesteś WIELKI.
longinus_torwaldzki
12.08.2011, 11:02:56
spoko, też jestem nowy na forum ty gdzieś ponoć można kliknąć, że pomogłem to kliknij pls.
McGiorgio
12.08.2011, 11:13:50
Cytat(longinus_torwaldzki @ 12.08.2011, 11:55:05 ) *
a nie po prostu tak?
Kod
<div class="menu_top_box1"onmouseover="chmurka(event,this);this.className='menu_top_box1_clic';" onmouseout="this.className='menu_top_box1';" onclick="self.location.href='?page=klan';" title="Na tej stronie znajdziesz informacje na temat naszego klanu.">KLAN</div>


No dobra działa bo się opis pojawia w zdefiniowanej chmurce i to jest super tyle, że zostaje clasa menu_top_box1_clic i nie wraca do menu_top_box1
longinus_torwaldzki
12.08.2011, 11:27:13
dodaj onmouse out do chmurki:
Kod
<script type="text/javascript">
    function chmurka(e,v){
    if(v.title){
    var t=document.createElement("div");
    t.className="chmurka";
    t.innerHTML=v.title;v.title="";
    v.move=function(e){
    e=e||event;
    t.style.left=e.clientX + document.body.scrollLeft+"px";
    t.style.top=e.clientY + document.body.scrollTop+"px";
    }
    v.move(e);
    document.body.appendChild(t);
    v.onmousemove=function(e){v.move(e)}
    v.onmouseout=function(e){
        
   this.className='menu_top_box1'; // <------------------

    v.title=t.innerHTML;
    document.body.removeChild(t);
    }
    }
    }
    </script>

i wywal z diva
Kod
<div class="menu_top_box1"onmouseover="chmurka(event,this);this.className='menu_top_box1_clic';" onclick="self.location.href='?page=klan';" title="Na tej stronie znajdziesz informacje na temat naszego klanu.">KLAN</div>
McGiorgio
16.08.2011, 15:14:19
Działa znakomicie.

Wielkie dzięki za poprzednią pomoc, ale jak wiemy świat był by zbyt prosty gdyby na tym się zakończyło, wpadliśmy na pomysł aby troszeczkę te nasze chmurki uatrakcyjnić więc walczymy z css'em obecnie wygląda on tak.

[HTML] pobierz, plaintext 
  1. .chmurka {
  2. position: absolute;
  3. max-width: 280px;
  4. text-align:justify;
  5. font-family: Arial, Helvetica;
  6. font-size: 8pt;
  7. color: #000000;
  8. background: #E4E4E4;
  9. padding: 5px;
  10. border: 1px;
  11. border-color:#214D70;
  12. -webkit-border-top-right-radius: 10px; /* prawy górny */
  13. -webkit-border-bottom-left-radius: 10px; /* lewy dolny */
  14. -khtml-border-radius-topright: 10px;
  15. -khtml-border-radius-bottomleft: 10px;
  16. -moz-border-radius-topright: 10px;
  17. -moz-border-radius-bottomleft: 10px;
  18. border-top-right-radius: 10px
  19. border-bottom-left-radius: 10px;
  20. border-style: solid;
  21. margin-top: 12px;
  22. margin-left: 8px;
  23. margin-right: -1000;
  24. }
[HTML] pobierz, plaintext


chmurki nabrały krągłości i jest super ale nie mają przezroczystości więc mówię sobie wstawię

[HTML] pobierz, plaintext 
  1. filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;
[HTML] pobierz, plaintext


i tekst titla robi się przezroczysty, macie może pomysł jak to obejść (przezroczyste tło z pliku graficznego nie wchodzi w rachubę).
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.