Mouseover image ?!

Guten Tag,

ich versuche derzeit auf meiner neuen Homepage ein Mouseover einzubauen.
Durch das Mouseover soll ein Bild in den Vordergrund gesetzt werden und vergrößert werden.
Ich habe nun schon einige möglichkeiten durchprobiert doch leider klappt keine dieser möglichkeiten.

Außerdem, soll beim Mouseover ein Text angezeigt werden (in einer extra Box) also nicht
[HTML]

Beispiel

[/HTML]

Ich hoffe auf einen Guten Tipp.

Gruß Kovel

Stichwort: jQuery

Auch mit jQuery habe ich das mit der Anzeige-box bereits versucht, jedoch ist es mir nicht Gelungen.
Hast du vllt da nen paar Gute Seiten ?

Das ginge auch mit reinem CSS, siehe: http://webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de - was in dem „Tooltipp“ steht ist ja erstmal egal, kann auch ein Bild sein :wink:

Ich habe mir nun ein Tooltipp via CSS erstellt, jedoch krieg ich es nicht auf ein Bild angewendet:
CSS =

[CODE]

[/CODE]

HTML:

[HTML]Test
Miau Miau Miau
[/HTML]

So funktioniert es mit einem Text, aber wenn ich nun den Text mit einem Bild austauschen möchte, geht dies nicht mehr.
Hat da jemand eine Idee ?

Hast Du das Bild innerhalb des span stehen oder anstelle dessen eingefügt? Es wäre gut wenn man deinen Versuch sehen würde, nicht das was Du nicht versucht hast.

<a class="tooltips" src="images/facebook.png"><img src="images/facebook.png" id="Image6" alt="" align="top" border="0" style="width:60px;height:60px;"><span>Test</span></div>

So müsste es eig Funktionieren, tut es jedoch nicht.
Und wenn ich ein bild zwischen einfüge, wird das Bild als Tooltip angezeigt, bei einem Text funktioniert dies jedoch nicht…

Ein Anker hat kein src-Tag und das Attribut align gibt es nicht mehr.

Ich würde jetzt hier noch den Begriff ‚Modal‘ einwerfen, aber um das zu erklären, müsstest du zuerst die Grundbegriffe in HTML/CSS und möglichst JavaScript/jQuery kennen.

Danach hatte ich nicht gefragt. Ich meinte es so:

[html]
Test

[/html]

Jetzt müsste mit o.g. CSS „Test“ als Text stehen und wenn man mit der Maus darüber geht das Bild in einem Tooltipp erscheinen.

Wenn das damit dennoch nicht passiert, dann hast Du in deiner HTML-Datei irgendwelche CSS-Eigenschaften, die die Eigenschaften des Tooltipps überschreiben. In dem Fall wäre wohl ein Link zu deiner Seite am hilfreichsten.

Ich möchte, dass der Tooltip erscheint, wenn man auf das Bild geht.
Also genau andersherum und das Funktioniert halt nicht…

Dann hättest Du nur die Fehler in deinem HTML-Entwurf korrigieren müssen:

[html]

Tooltipp
[/html]

oder mit Bild:

[html]

[/html]

Alternativ: das img-Element selbst ermöglicht auch schon eine Art Tooltipp, welcher jedoch je nach Browser unterschiedlich angegeben werden muss und je nach Betriebssystem unterschiedlich aussehen kann. Dazu musst Du lediglich das alt- und title-Attribut mit dem anzuzeigenden Tooltipp-Text versehen:

[html]Tooltipp[/html]

Allerdings kann man das, wie gesagt, nicht weiter gestalten und positionieren. Bild sind hier auch nicht möglich.