Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript]Graficzny tooltip
Forum PHP.pl > Forum > Przedszkole
elmozaur
witajcie.
Czy znacie moze jakis latwy sposob na uzyskanie graficznego tooltipa?
mam np liste obrazkow w formie linkow:
  1. <a href="pic1/pic1.jpg">pic1</a><br/>
  2. <a href="pic2/pic1.jpg">pic2</a><br/>
  3. <a href="pic3/pic1.jpg">pic3</a><br/>
  4. <a href="pic4/pic1.jpg">pic4</a><br/>
  5. <a href="pic5/pic1.jpg">pic5</a><br/>


I teraz chcialbym aby po najechaniu na link pokazywal sie graficzny tooltip (nazwa_katalogu/prev.jpg) przy wskazniku myszki.

Pytanie nr2: jak takie "niesystemowe" rozwiazanie ma sie do standardu HTML/xHTML. To znaczy czy validatory nie robia z tego problemu ?

za info z gory dziekuje i pozdrawiam
Grzesiek
vokiel
Możesz użyć do tego bibliotek js, ale także w czystym CSS.
Tworzysz link, w nim dajesz jakis <span> przed zamknięciem </a>, w css span ukrywasz, a po najechaniu myszka na a pokazujesz.

Pure CSS Tooltips
Kowalik
A powie mi ktoś jak zrobić aby ten tooltip miał dowolny kształt? Chciałbym aby wyglądał jak komiksowa chmurka... jak osiągnąć taki efekt?
erix
Wpisz sobie tooltip w Google...
Kowalik
Cytat(erix @ 12.03.2009, 18:07:14 ) *
Wpisz sobie tooltip w Google...

I nic takiego nie znalazłem... Jedynie zwykłe tooltipy z 'barwionym' tłem ew znienna czcionką, a ja chcę zastosować grafikę chmurki.
Hazel
http://perfectionorvanity.com/2006/06/08/j...rollover-w-css/

Tu masz rollover, tooltip polega na tym samym. Czysty CSS. A jak chcesz zaprząc JS do tego, to na przykład:

http://webmaster.helion.pl/kurshtml/skrypt/rollover.htm

Też rollover, ale tooltip też analogicznie.
Kowalik
Ale ja nie chcę podmieniać grafiki :| Nie da siętego zrobić aby po prostu po najechaniu na grafikę/button pojawiała się nowa warstwa w dowolnym kształcie dostosowująca gabaryt do zawartości?
Hazel
Dostosowująca gabaryt do zawartości? biggrin.gif No coraz lepsze kwiatki, widzę.

Kod
<a href="strona" onmouseover="chmurka(true);" onmouseout="chmurka(false);">Tekst</a><div style="display: none; position: relative; top: 10px; " id="tooltip"><img src="grafika.jpg" /></div>

<script type="text/javascript">

function chmurka(bool)

{

       document.getElementById('tooltip').style.display = (bool ? 'block' : 'none');

}</script>




Pisane z palca i ma jedynie oddawać podstawową zasadę działania.
Kowalik
Dobra, zanim zacznę się bawić z tym kodem pokażę dokladnie o co mi chodzi bo w końcu znalazłem coś podobnego biggrin.gif



Czy ten kod zrobi cośpodobnego?
vokiel
CSS tooltip też to zrobi, wystarczy że odpowiednio go ostylujesz.
Na prawdę, to czy tooltip będzie wywoływany w czystym css, czy przez js, czy cokolwiek innego nie ma znaczenia, ważne jest jak go ostylujesz.

Co prawda tooltip z dodatkowymi danymi, typu zdjęcia itd lepiej jest ładować na żądanie, nie wczytywać całej zawartości przy ładowaniu strony (tak jak w przykładzie który pokazałeś). Czyli w tym przypadku przydałoby się użyć do tego ajaxa, i ładować content do tooltipa dynamicznie. (ale i tak tooltipa trzeba ostylować w css biggrin.gif)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.