Mouseover image ?!

[Kovel]

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

<p><img src="Beispielbild.png" alt="Beispiel"></p>

Ich hoffe auf einen Guten Tipp.

Gruß Kovel

 

[CPCoder]

Stichwort: jQuery

 

[Kovel]

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 ?

 

[threadi]

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 ;)

 

[Kovel]

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

<style type="text/css">
<!--
a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #0F0F0F;
  border: 2px solid #FFFFFF;
  height: 41px;
  line-height: 41px;
  text-align: center;
  visibility: hidden;
  border-radius: 1px;
}
a.tooltips span:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  width: 0; height: 0;
  border-top: 12px solid #FFFFFF;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #0F0F0F;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 1;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
-->
</style>

HTML:

<a class="tooltips" href="#">Test
    <span>Miau Miau Miau</span></a>

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 ?

 

[threadi]

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.

 

[Kovel]

<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 <span></spawn> einfüge, wird das Bild als Tooltip angezeigt, bei einem Text funktioniert dies jedoch nicht..

 

[Tronjer]

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.

 

[threadi]

Danach hatte ich nicht gefragt. Ich meinte es so:

<a class="tooltips" href="#">Test
    <span><img src="images/facebook.png" alt=""></span></a>

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.

 

[Kovel]

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

 

[threadi]

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

<a class="tooltips" href="#"><img src="images/facebook.png" alt="">
    <span>Tooltipp</span></a>

oder mit Bild:

<a class="tooltips" href="#"><img src="images/facebook.png" alt="">
    <span><img src="images/facebook_gross.png" alt=""></span></a>

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:

<img src="images/facebook.png" alt="Tooltipp" title="Tooltipp">

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