x-kom hosting

[HTML] Dymek informacyjny

UnlimitedPL
utworzono
utworzono

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
komentarz

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.

  • Dobra wypowiedź 1
UnlimitedPL
komentarz
komentarz

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
komentarz

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]

  • Dobra wypowiedź 1
UnlimitedPL
komentarz
komentarz (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.

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Strona wykorzystuje pliki cookies w celu prawidłowego świadczenia usług i wygody użytkowników. Warunki przechowywania i dostępu do plików cookies możesz zmienić w ustawieniach przeglądarki.