Szukam Okno z napisem

Kilka szczegółów o moim forum i stylu, z którym mam problem:
nazwa stylu: nzwls.pl
wersja skryptu MyBB: 1.6
adres forum: brak
opis problemu:

Cześć, czy pomożecie mi zrobić takie coś że gdy mamy obrazek i gdy nachodzimy na niego myszką to pojawia się małe okno z napisem coś takiego jak niżej.

:roman_face:
http://okonet.ru/projects/tooltips/

A mógłbyś napisać co gdzie dodać?

tam jest wszystko krótko opisane, nawet z przykładami
choć polecam wersję angielską ( patrz post Wujasa ), to jeżeli potrzebujesz "po polsku": http://translate.google.com/translate?js...l=en&tl=pl

No wiem ale nie można nic pobrać z pkt 1... ^^

QRNA MASZ WSZYSTKO JAK NA DŁONI NAPISANE!
Pobierz stąd http://github.com/okonet/cooltips/downloads i rób tak jak napisane, wszystko jest jak na dłoni.

Dobra wszystko zrobiłem lecz jeszcze jedno. Jak dalej zrobić żeby był ten napis na obrazku?

Jaki znów napis na obrazku?
Dajesz

    $$("p .nalesnik").each( function(input) {
        new Tooltip(input, {backgroundColor: "#333", borderColor: "#333", 
        textColor: "#FFF", textShadowColor: "#000"});
    }); 


a potem siekasz w kodzie

<p><img class="nalesnik" src="placek.png" title="Obrazek ten przedstawia nowoczesne 
i zaawansowane technologicznie placki marki roman" /></p> 


streszczenie tutoriala spod linku zamieszczonego przez Wujasa i mnie ( w wersji pół-pl ), mod for MyBB
1. ściągasz paczkę
wrzucasz do folderu jscripts pliki ze skryptami: tooltips.js, jak zachodzi potrzeba, to także zawartość fiolderu libs z paczki ( część tych plików już powinna być na serwerze - nie nadpisuj )
2. wrzucasz plik tooltips.css ... gdzieś, jakoś nie widzę dobrej lokalizacji na ten plik w strukturze folderów MyBB, więc może niech wyląduje z pozostałymi w folderze jscripts albo utwórz folder style i tam to wrzuć
3.
wrzucić w jakiś szablon, np headerinclude taki kod:

<script type="text/javascript" src="jscripts/scriptaculous.js&load=builder,effects"></script>
<script type="text/javascript" src="jscripts/tooltips.js"></script>
<link rel="stylesheet" href="jscripts/tooltips.css" type="text/css" 
media="screen" /> 


powyżej dałem wszędzie ścieżkę do plików w folderze jscripts, jeżeli wrzuciłeś je gdzieś indziej - zmień nazwę folderu
4.
to jest część, której już zrobić za Ciebie nie mogę
nadajesz jakiemuś elementowi atrybut title z treścią do wyświetlenia, a potem używasz kodu który widzisz w poście wyżej - opis wujasa jest dobrym streszczeniem

end

No dobra dzięki więc teraz tylko w jakimś kodzie dodaje class="help" title="placki" oraz dodaje jeszcze w index'ie

$$("p .nalesnik").each( function(input) {
        new Tooltip(input, {backgroundColor: "#333", borderColor: "#333",
        textColor: "#FFF", textShadowColor: "#000"});
    });

Edit: Więc już chyba wszystko działa lecz nie pokazuje takiego okna jak było napisałem tylko takie coś (niżej) jak to zmienić?

to co pokazałeś, to jest najzwyklejszy atrybut title
do tego nie potrzeba żadnego skryptu

więc ... nic nie działa
tak jak napisałem, tej części nie zrobię już za Ciebie, bo to już jest specyfika Twojego problemu - gdzie i jak chcesz tego użyć

hmmm
zauważyłem błąd
albo stosuj się do opisu Wujasa albo do tego ze strony autora
branie w ciemno pół na pół nie doprowadzi do niczego
jak używasz Wujasowych placków ( $$("p .nalesnik") ) to nie używaj class="help" z tutoriala autora, trochę konsekwencji

Jaki znów napis na obrazku?
Dajesz

    $$("p .nalesnik").each( function(input) {
        new Tooltip(input, {backgroundColor: "#333", borderColor: "#333", 
        textColor: "#FFF", textShadowColor: "#000"});
    }); 


a potem siekasz w kodzie

<p><img class="nalesnik" src="placek.png" title="Obrazek ten przedstawia nowoczesne 
i zaawansowane technologicznie placki marki roman" /></p> 


i full gratis podałem Ci kod, szkoda że go nie ubrałeś w JS tak jak pisze autor.
Dodaj sobie na koncu headerinclude

<script type="text/javascript">
$$("p .nalesnik").each( function(input) {
new Tooltip(input, {backgroundColor: "#333", borderColor: "#333", 
textColor: "#FFF", textShadowColor: "#000"});
});
</script> 


a następnie gdzie chcesz

<p><img class="nalesnik" src="placek.png" title="Obrazek ten przedstawia nowoczesne 
i zaawansowane technologicznie placki marki roman" /></p> 


I musi działać, oczywiście zastosuj wcześniej opis SR'a.
I nie pisz że nie działa bo działa.
http://fnatic.pl/fnatic.pl/
@edit
A jak byś chciał np. dymek tylko nad tekstem to

    $$("p .nalesnik").each( function(input) {
        new Tooltip(input, {backgroundColor: "#333", borderColor: "#333", 
        textColor: "#FFF", textShadowColor: "#000"});
    }); 


$$("p .nalesnik").

Tutaj określasz na jaki element będą nadawane dymki. Jeśli będą znajdować w paragrafach to będzie to $$("p .nalesnik").
Jesli natomiast w liscie to
$$("ul .nalesnik").
i wtedy kod dla tego będzie

<ul>
<li class="nalesnik" title="Widzisz dymek?">Jakis punkt w liscie</li>
</ul> 


Jeśli ma to być nad zwykłym tekstem robisz
$$("p .nalesnik").

<p>Ogólnie rzecz biorąc będzie to tekst w
 którym pokaże Ci <span class="nalesnik" title="DYMEK">DYMEK</span></p> 


mam nadzieje że wyczerpałem temat i następne post będzie brzmiał "dzięki działa".

No dobra tylko że gdy dodam ten kod script nawet gdy do index'u to wyświetla go na samej górze forum.


@edit: gdy zapiszę ten kod script to jak wyżej jest błąd oraz go jakoś zmienia na taki

<script&nbsp;type="text/javascript">
$$("p&nbsp;.nalesnik").each(&nbsp;function(input)&nbsp;{
new&nbsp;Tooltip(input,&nbsp;{backgroundColor:&nbsp;"#333",&nbsp;borderColor:&nbsp;"#333",&nbsp;
textColor:&nbsp;"#FFF",&nbsp;textShadowColor:&nbsp;"#000"});
});
</script>

Strona główna » Paczki szablonów » Templates » Niezgrupowane szablony » Edycja szablonu: headerinclude

i tam dodaj ten kod między:
<script type="text/javascript">

jakieś tam pierdoły są i dodaj pod nie to

$$("p .nalesnik").each( function(input) {
new Tooltip(input, {backgroundColor: "#333", borderColor: "#333",
textColor: "#FFF", textShadowColor: "#000"});
});

przed końcem </script>

nie kopiuj żywcem kodu ze znaczników code, lub z innych witryn, bo często się pojawiają te spacje ( &nbsp; )
skopiuj sobie ten kod najpierw do np notepada++ ( notatnik chyba też wystarczy ), żeby znikły te specjalne spacje, a potem skopiuj już z notatnika ten kod i wklej w szablon

z takimi &nbsp; niemal na pewno coś się gdzieś posypie i działać nie będzie