UnlimitedPL utworzono 1 stycznia 2012 utworzono 1 stycznia 2012 Witam. Chciałbym zrobić na swojej stronie takie coś jak na poniższym screenie. Aby po kliknięciu w odnośnik pokazywał się dymek z informacjami. Żeby można było zmieniać jego rozmiary, kolor tła, kolor tekstu. Niestety funkcja (title="tekst") to znacznie za mało. Jeśli ktoś wie jak to zrobić lub miał stronkę ze sposobem tego zrobienia byłbym bardzo wdzięczny za podzielenie się tą informacją. [img]http://iv.pl/images/36354127027590242656.jpg[/img]Tu jest fajny efekt tooltip ale nie mam pojęcia jak to zrobić. Pomoże ktoś? [CODE] http://flowplayer.org/tools/tooltip/slide.html [/CODE]
benkowik komentarz 1 stycznia 2012 komentarz 1 stycznia 2012 Taki efekt uzyska się za pomocą jQuery. 1. Musisz utworzyć niewidocznego DIV-a, którego pozycję będziesz ustalać bezwzględnie, 2. Wykrywasz kliknięcie myszką na tekst/link/obrazek, 3. Pobierasz pozycje myszki, 4. Ustawiasz atrybuty CSS dla utworzonego DIV-a - czyli pozycje uwzględniając współrzędne kliknięcia, 5. Pokazujesz DIV-a. 1
UnlimitedPL komentarz 1 stycznia 2012 Autor komentarz 1 stycznia 2012 1. <div id="cloud" position: absolute; display:none; > ... </div> (takie coś?) 2. mouseover, mouseout (lecz jak to zastosować?) 3. ?? 4. #cloud {x,y} 5. ?? Jakieś strzępki jak widać. Nie jestem jeszcze na takim poziomie wiedzy żeby to wykonać dlatego pytam tutaj...
benkowik komentarz 1 stycznia 2012 komentarz 1 stycznia 2012 1. tak, coś takiego 2. [CODE] jQuery(obiekt).click(function() { // kod po kliknięciu }); [/CODE] 3. [url="http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html"]http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html[/url] 4. Myślałem bardziej o użyciu: [CODE] top, left, margin-left, margin-top [/CODE] 5. Usunięcie: [CODE] display: none; [/CODE] lub zmiana wartości [CODE] display: block; [/CODE] 1
UnlimitedPL komentarz 1 stycznia 2012 Autor komentarz 1 stycznia 2012 (edytowane) Wiedziałem że mi nie wyjdzie bo jakoś tego jquery nie mogę ogarnąć. Mój kod: [CODE] <html> <head> <script="text/jquery"> jQuery(obiekt).click(function() { jakiś kod }); $("#someDiv").click(function(e){ var relativeX = e.pageX - this.offsetLeft; var relativeY = e.pageY - this.offsetTop; }); </script> <style type="text/css"> #cloud { margin-left: 20px; margin-top: 20px; display: block; } </style> </head> <body> <div id="cloud" position: absolute; display:none; > <a href="#">Jakiś tekst</a> </div> </body> </html> [/CODE] Teraz widzę, że Wy tu na forum macie też takie aczkolwiek jak w temacie najedziemy na kogoś nazwę użytkownika. Z tego co widzę to chyba będzie to działać tylko wtedy jak nacisnę w ten 1 piksel. To było by denne...[CODE] <html> <head> <script type="text/javascript"> $(document).ready( function() { $("img.hint").each( function() { $(this).attr( 'hint_title', $(this).attr('title') ) ; $(this).attr( 'title', '' ) ; }) ; $("img.hint").mousemove( function(e) { $("#hint").html( $(this).attr( 'hint_title' )) ; $('#hint').css({'top': e.pageY + 20, left: e.pageX + 20}); $("#hint").show() ; return false ; }) ; $("img.hint").mouseout( function() { $("#hint").hide() ; }) ; }); </script> <style type="text/css"> #hint { position: absolute ; display: none ; border: 1px solid #f00 ; padding: 10px ; } </style> </head> <body> <a href="#" title="to jest przykładowa treść dymka zawierającego długi tekst" class=”hint” >Jakiś tekst</a> </body> </html> [/CODE] Teraz działa tylko z tym że to jest najzwyklejszy dymek...
Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!
Możesz zadać pytanie bez konieczności rejestracji - wystarczy, że wypełnisz formularz.