Bild Hover effekt aus der Tabelle lösen?

[Design4stars]

Hallo,

ich habe folgendes Problem und zwar hab ich in einer Tabelle ein Bild das wenn man mit der Maus drüberfährt größer dargestellt wird, das funtioniert auch super..nur ist mein Problem nun das er mir wenn ich über das Bild hover er mir die Tabelle "verzieht" damit das Bild Platz hat...daher die Frage ist es möglich das er mir das Hoverbild "lösgelöst" von der Tabelle zeigt? So das die Tabelle ihre Breite behält und das Bild sozusagen über dem ganzen liegt...?!?

Hier mal das Beispiel was ich bis jetzt mir gebastelt habe und wo er mir aber die Tabelle "verzieht":

Design4Stars - Because Quallity DOES Matter

Da ich mich nicht so dolle mit JS auskenne wäre ich über Hilfe dankbar :)


Danke im Voraus für die Hilfe.

Gruß


Mike

 

[da_loki]

Ich würde dir empfehlen eine neue Funktion zu schreiben, welche den Inhalt eines "unsichtbaren" DIV Bereiches mit dem Bild füllt, und dieses sichtbar macht.

<script type="text/javascript">
function showImage(bild) {
  document.getElementById('showimagediv').innerHTML = '<img src="'+bild+'" alt="Grosses Bild" />';
  document.getElementById('showimagediv').style.display = block;
}

function hideImage() {
  document.getElementById('showimagediv').style.display = none;
}
</script>

<div id="showimagediv" style="z-index: 100;position:absolute; top: 30%; left: 30%;display: none;"></div>

 

[Design4stars]

Danke für die schnelle Antwort :)

Ich habe das gerade mal ausprobiert aber irgendwie funktioniert das nicht bei mir :(

Du must ja auch den Div anzeigen weil er sonst garkeinen Anhaltspunkt für den Hover hat, ich habs soweit hinbekommen das er mir das Div dann extern ausserhalb der Tabelle anzeigt aber wenn ich aus dem Rausgehe er es mir nicht wegmacht er also Mouseout="hideImage()" komplett ignoriert.

Ich hab jetzt das einfach so gelöst das ich den Div mit absolute aus der Tabelle löse und direkt über das "original" bild lege...somit stimmt der Textabstand und das Foto ist aus der Tabelle herausgelöst...bestimmt nicht die eleganteste Lösung, aber solange ich mit JS nicht viel am Hut habe und mich da auskenne muss ich das wohl so machen...

Trotzdem Txh für den Versuch ;)

 

[philipp]

Du kannst die Position des Mauszeigers mit JavaScript ermitteln und dann (jeh nachdem wie breit das Bild ist) ein absolut positioniertes DIV schreiben lassen, welches das Bild beinhaltet. Wäre durchaus ganz einfach machbar.

Da brauchst du eine Funktion, die

1) Mauszeigerposition ermittelt
2) Bildbreite / Höhe ermittelt
3) Ein div mit
3.1) position:absoute
3.2) left: (mauszeigerX-aufgerundet(Breite/2))
3.3) top: (mauszeigerY-aufgerundet(Höhe/2))

 

[Design4stars]

Hatte ich ganz vergessen die Mail Beanchrichtigung zu aktivieren...

Naja für euch ist das vielleicht leicht mit 1. 2. 3.

Aber ich habe null Plan wie man solche Funktionen anlegt von daher wäre etwas Hilfe ganz nett :)

Danke im Voraus