Tooltipps per Java

[Andreas69]

Hallo,
ich wollte Tooltipps per Java in unserer neuen Homepage nutzen. In der alten Homepage nutzte ich sie bereits für den Terminkalender und es funktionierte auch einwandfrei. Nun sollten sie, da ich durch Komplikationen mit unserem Menü und den MS-IE nicht auf Java verzichten kann, beim vorstellen unseres Teams zum Einsatz kommen. Wenn man mit dem Mauszeiger über eins der Bilder fährt, sollte ein kleiner Steckbrief eingeblendet werden.
Habe ich jetzt bei einem Bild (erstes Bild ganz oben links “Michael Altvater“) ausprobiert, funktioniert aber nicht.
Irgendwie vermisse ich da auch einen ahref= Befehl, aber in der formatierten Seitenansicht der Seite des Anbieters ist dieser auch nicht zu finden bei diesem Tipp.
Kann bitte jemand helfen?

LG
Andreas

[Helmut]

...
wenn Du jetzt schon viel mit CSS machst, die Tooltips gibts auch ganz ohne Javascript http://www.cssplay.co.uk/menu/balloons.html

Cu Helmut

[Andreas69]

Jooo Helmut, da hast Du Recht.
Mir hat prm ja auch schon einen Link für tooltipp per CSS zur Verfügung gestellt. Da ich es auf Anhieb nicht mit dem Einbinden der Bilder geschafft hatte, ging mit mir wieder die Ungeduld durch und ich wollte auf das Java-Script zurückgreifen.
Nun denn, werde es jetzt mal mit der von Dir geposteten Seite versuchen, Danke.

Bis denne
Andreas

[prm]

Ich hatte mich letzte Woche und am Wochenende leider wenig erfolgreich bemüht, eine Anleitung für einen Bilder-Tooltipp zu schreiben.
Das Problem dabei ist, dass Internet Explorer und Firefox das Infofenster trotz Definition an unterschiedlichen Stellen einblenden, bzw. den z-index falsch ausgeben.
hab' mich jetzt nochmal drangesetzt und es scheint in beiden Browsern zu funktionieren. Versuch's mal damit:
CSS:

Code:

a.info
{
position:relative;
color:#2D006B;
text-decoration:none;
display: block;
}


a.info span
{
display: none;
}

a.info:hover span
{
display:block;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
position: relative;
top: -100px;
left: 0;
}

HTML

Code:

<p><a class="info" href="#"><img src="deinbild.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</p>

Die Positionierung kannst du über CSS an dieser Stelle vornehmen:

top: -100px;
left: 0;

Mit einem bild klappt's. bei mehreren scheint es noch Probleme zu geben, da hab' ich momentan den Dreh noch nicht raus.
Bitte ggf. um kurze Rückmeldung, ob das so klappt, weil ich es noch nicht intensiv ausgetestet habe.

[prm]

So scheint es auch für mehrere Bilder zu funktionieren:
CSS

Code:

ul
{
margin: 0;
padding:0;
list-style: none;
}

li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}

a.info
{
position:relative;
color:#2D006B;
text-decoration:none;
}

a.info span
{
display: none;
}

a.info:hover span
{
display:block;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
position: relative;
top: -100px;
left: 0;
z-index:5;
}

HTML

Code:

<ul>
<li>
<a class="info" href="#"><img src="bild1.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</li>
<li>
<a class="info" href="#"><img src="bild2.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</li>
</ul>

[Andreas69]

Hallo prm,

Du wirst Dich hoffentlich nicht nur wegen meiner Anfrage da jetzt so reingekniet haben, oder?
Nachdem Helmut mir geantwortet hatte, nahm ich mir den Link zu der Seite mal vor und steigerte mich da so richtig rein.
Habe es nun hinbekommen. Guckst Du hier!
Wenn es keine Probleme im IE geben sollte, wird es jetzt auch so bleiben. Nimmst es mir ja nicht übel, wenn ich jetzt nicht wieder alles umwerfe, oder?
Danke für deine Bemühungen!

Bis denne
Andreas

[prm]

Null problemo, sieht ja gut aus, wie du es jetzt hast, wenngleich mir das Code-Konstrukt ziemlich kompliziert vorkommt. Hauptsache aber es klappt!

Diese Fehler kannst du relativ einfach abstellen: Wenn du einen XHTML-Doctype verwendest, musst du statt

Code:

<br>

dann auch konsequent

Code:

<br />

verwenden und dem img-Tag nicht mit

Code:

>

sondern mit

Code:

/>

schließen.
Ein ID darf je Seite nur einmal vorkommen: Verwende also statt

Code:

id="web2"

somit

Code:

class="web2"

und schreibe in die CSS dann

Code:

.web2

anstelle von

Code:

#web2

.
Damit sollten die meisten Validierungsfehler behoben sein.

[Seramis]

huhu prm,

habs grad mal getestet, also der IE6 machts nicht
7 und FF hingegen schon...

---------------

@ andreas
deine infos funzen im IE6 auch

mir sind sie allerdings etwas zu gross bzw vllt so positionieren das sie nicht das bild verdecken zu dem sie gehören ?

[prm]

Danke für den Hinweis, Seramis.

Mit Vista auf meinem neuen PC ist bei mir leider auch der IE 6 verschwunden (nicht, dass ich ihm nachtrauern würde, aber zur Entwicklung ist er halt immer noch unverzichtbar) und ich habe noch keine praktikable Lösung gefunden, sowohl IE6 als auch 7 parallel zu installieren. Eigene Partition mit XP ist mir zu umständlich, da ich dann immer wieder neu starten müsste.
Bei Online-Checks kommt man u.U. in längere Warteschleifen und bekommt auch nur einen Screenshot.
Wie hast du das bei dir gelöst?

[Seramis]

@prm

habs hiermit gemacht und mir den IE6 wiedergeholt ;-)

HIER funzt das auch mit VISTA