[HTML][JavaScript][CSS]Problem z "chmurką" w menu, Problem Opcje

[McGiorgio]

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 
 
<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>
 
[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 
<style>
.chmurka {
  position: absolute;
  font-family: Arial, Helvetica;
  color: #222222;
  font-size: 8pt;
  background: #FCF204;
  padding: 3px;
  border: 1px;
  border-style: solid;
  margin-top: 12px;
  margin-left: 8px;
  margin-right: -1000;
}
</style>
[HTML] pobierz, plaintext 

Mamy JavaSript

[HTML] pobierz, plaintext 
<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){
      v.title=t.innerHTML;
      document.body.removeChild(t);
    }
  }
}
</script>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<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_torwald...]

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>

Ten post edytował longinus_torwaldzki 12.08.2011, 10:55:48

[McGiorgio]

Sprawdzam....

Działa, wielkie dzięki.... jesteś WIELKI.

Ten post edytował McGiorgio 12.08.2011, 11:01:11

[longinus_torwald...]

spoko, też jestem nowy na forum ty gdzieś ponoć można kliknąć, że pomogłem to kliknij pls.

[McGiorgio]

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_torwald...]

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]

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 
.chmurka {
position: absolute;
max-width: 280px;
text-align:justify;
font-family: Arial, Helvetica;
font-size: 8pt;
color: #000000;
background: #E4E4E4;
padding: 5px;
border: 1px;
border-color:#214D70;
-webkit-border-top-right-radius: 10px; /* prawy górny */
-webkit-border-bottom-left-radius: 10px; /* lewy dolny */
-khtml-border-radius-topright: 10px;
-khtml-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px
border-bottom-left-radius: 10px;
border-style: solid;
margin-top: 12px;
margin-left: 8px;
margin-right: -1000;
}
[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 
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ę).