Jak dodać "chmurkę" z informacją pojawiającą się po najechaniu na dane miejsce?

[allegropower]

podobny motyw zobaczymy tu:
http://www.medienstroeme.de/web/

jednak ja potrzebuję "chmurek" z info to opisania kilku elementów znajdujących się na zdjęciu.

proszę o pomoc

[headge]

W jakiejś galerii? Gdzie konkretnie?

[Robster]

Nie słyszałem o dodatku działającym w ten sposób. Najlepiej będzie jak potniesz to zdjęcie i złożysz je w HTML, dodając odpowiednim kawałkom właściwość alt.

[zwiastun]

@Robster - o wielu rzeczach pewno jeszcze nie słyszałeś. Koś jednak może takie Twoje oświadczenie odebrać jako informację, że nie istnieje (to coś, o czym piszesz).

Nie trzeba ciąć obrazka i składać w HTML, żeby opisywać "chmurkami" jego elementy. Istnieje wszakże coś takiego, jak mapa odsyłaczy (w HTML element map i elementy area), którym nadajemy atrybut alt, a ten możemy wykorzystać do stylizacji chmurki.

[Robster]

@zwiastun, jak ktoś zinterpretuje moją informację, to już nie moja sprawa. Napisałem że "nie słyszałem", a nie że "nie istnieje".

O mapie odsyłaczy nigdy nie słyszałem (teraz widać różnicę, w stosunku do "nie istnieje") i skoro mam chwilę czasu, to poczytam na ten temat ^^

[allegropower]

W jakiejś galerii? Gdzie konkretnie?

Dokładnie chce dodać jedno duże zdjęcie na stronie głównej i opatrzyć je w w/w chmurki z informacjami. Myślałem na altowaniem ale minus tego jest taki że zanim alt się pojawi trzeba dłuuugo czekać a pod linkiem którego podałem przy pierwszy wątku pojawia się informacja od razu. Niby to samo ale zależy mi na dobrym efekcie.

Podobny efekt wykorzystano na stronie. www.joomla.pl jeśli wejdziemy w zakłądkę zasoby i którykolwiek katalog to przy nazwie pliku do pobrania, po najechaniu na niebieską ikonkę "i" pojawia nam się tabelka z info nt danego pliku. O własnie taką informację chce wygenerować tylko nie wiem jak :/

[headge]

Czyli po prostu chcesz tooltipa? jeśli tak to temat jest nieco oklepany - wstaw do szablonu

<script>window.addEvent('domready', function(){
   //do your tips stuff in here...
   var zoomTip = new Tips($$('.zoomTip'), {
      className: 'top', //this is the prefix for the CSS class
      initialize:function(){
         this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
      },
      onShow: function(toolTip) {
         this.fx.start(1);
      },
      onHide: function(toolTip) {
         this.fx.start(0);
      }
   });
});</script>

W css np:

.top-tip {

  	float: left;
	background: #4D5364;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
	z-index: 50;
    margin-top: 20px;
	margin-left: -10px;

}

.top-title {
	padding: 0;
	margin: 0;
	font-weight: bold;
	color: #fff;
	font-size: 10px;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;

}

.top-text {
  	font-size: 10px;
	margin: 0;
	color: #fff;

}

I potem już tylko dodajesz klasę do obrazka, tekstu czy czegokolwiek innego:

class="zoomTip" title="Tytuł tooltipa :: Opis tooltipa."

[allegropower]

wielkie dzięki za konkretną informację. Jutro będę walczył i dam znać jak efekty.

[allegropower]

działa i to najważniejsze. Szkoda tylko że to taki zwykły alt się pojawia. Myślałem nad graficznie ładniejszą chmurką ale to może za jakiś czas. Jeszcze raz dzięki

[headge]

No to narysuj jakiś tooltip graficzny albo znajdź gotowy, potnij go na 3 części i wstaw jako background - opdowiednio górna część do .top-title dolna do .top-tip i środkowa do top-text. Trochę pracy i będzie ładniej.