[JS] Dymek, chmurka, czy jak kto inadzej to zwie :)

0

Witam...
Dokopałem się do skryptu wyświetlającego dymek do elementu pod kursorem. Troche go już przerobiłem. Teraz wygląda tak:

<html>
<head>
<title>DYMEK</title>
<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>
<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>
</head>

<body>

<p align="right">NAJEDZ TU KURSOREM >>> <a href="#" title="ZAWARTOŚĆ DYMKA" onmouseover="chmurka(event,this)">tekst</a></p>

</body>
</html>

Zostały jeszcze 2 problemy :/

  1. Pod IE (gdy tekst jest za bardzo w prawo) każdą spację zamienia w enter (tworzy tyle linijek ile jest wyrazów),
  2. Gdy dymek jest wysunięty w prawo za obszar strony to strona się rozszeża (chciałbym aby dymek przesuwał się w lewo).

Może potrafi mi ktoś pomóc ?? :>

Z góry dziękuję za pomoc...

0

a musi on sie poruszac wzgledem kursora czy tylko ma sie pojawic po najechaniu na link, bo to mozna bez JS zrobic - stylami ;)

0

A jeśli nie musi się poruszać to jak to zrobić??

0 
<style type="text/css">
a.tip {
	position: relative;
	text-decoration: none;
	font: normal 16px verdana;
	color: Black;
	z-index: 0;
	color: red;
}
a.tip:hover {
	position: relative;
	z-index: 100;
}
a.tip div.tip {
	position: absolute;
	width: 150px;
	display: none;
	left: 20px;
	top: 5px;
	font: normal 11px verdana;
	color: Black;
	z-index: 0;
}
a.tip:hover div.tip {
	position: absolute;
	width: 150px;
	display: block;
	visibility: visible;
	padding: 4px;
	background-color: #EDEFFE;
	border: solid 1px #5E6DFF;
	font: normal bold 11px verdana;
	color: Black;
	text-align: left;
	-moz-opacity: 0.85;
	opacity: 0.85;
	filter: alpha(opacity=85);
        z-index: 100;
}
</style>
<div style="font: normal normal 16px verdana">
text text text text text text text<br />
text text text text text text text<br />
text text text text text text text<br />
text
<a href="#" class="tip">link<div class="tip">dymek dymek <b style="color: red;">czerwien</b> dymek <img src="http://4programmers.net/templates/subMain/gfx/emots/beer.gif" border="0" /> dymek dymek dymek dymek dymek</div></a>
&nbsp;text text text text text<br />
text text text text text text text<br />
text text text text text text text<br />
text text text text text text text<br />
text text text text text text text<br />
</div>
0

Taaa... Ale to niczego nie zmenia. Bo jeśli dymek pokazuje się przy prawej krawędzi strony to i tak się ona rozszerza!!
// Dobra podałem szerokość dymka i jest już OK :)

Ale jak zrobić aby gdy kursor przeduwa się do prawej krawędzi to by dymk przesuwał się w lewo??

1 użytkowników online, w tym zalogowanych: 0, gości: 1