Gesucht: Tabelle mit Hoverfunktion - Bildwechsel

Du meinst, wenn man über eine Tabellenzeile fährt dass dann oben das Bild getauscht wird?

In dem Fall ist es ein jQuery.

Jede Tabellenzeile hat eine ID. Bei mouseover oder mouseout wird anhand der ID das passende Bild angefordert und oben ersetzt.

Falls das was hilft? Ansonsten frag weiter.

Hallo Joe,

Befürchte, dass es mit CSS alleine wohl nicht gehen wird.

firstlady Christiane hat es ja schon angesprochen. Wahrscheinlich so ähnlich wie hier: https://api.jquery.com/mouseover/, denke aber, dass Du das eh alles kennst. Das Problem ist ja, dass "oben" der Bildwechsel stattfinden soll.

Was mich allerdings stört ist, dass wenn es eine längere Tabelle ist (so wie in der Muster URL), man runterscrollt, sieht man erst nix oben ....

Leider hilft Dir das jetzt nichts, waren so halt meine Gedanken.

Liebe Grüße

Christine

Zitat von Joe Sixpack

Entweder ist das Bild "sticky" auf der Seite oder die Tabelle hat einen Scrollbalken. Das wird schon klappen.

Ja natürlich > 2:1 = was leg ich mich auch mit 2 Programmierern an

Nun denn, wünsche Dir hoffentlich Erfolg bei der Bildwechsel-Funktion

Liebe Grüße

Christine

Programmierer .. ist so ähnlich wie Übersetzer. Es kommt auf die Sprache an, die wenigsten können alle.
Ich z.B. muss bei js / jQuery sehr vorsichtig sein, bevor ich mich aus dem Fenster lehne.

.

Mit css sehe ich da keine Chance (kann natürlich trotzdem eine geben).

Bei jQuery (oder javascript) müsstest du dann mit der Zeilennummer arbeiten.

Feststellen welche Zeilennummer in der Tabelle angesprochen wird und dann diese Nummer als ID verwenden und irgendwie systematisch für Bildnamen verwenden.

Leider bin ich nicht so der js / jQuery freak und kann dir da keinen Code liefern.

Also prinzipiell ist es nicht allzu schwer, wenn drei Sachen gegeben sind:

1. eine eindeutige ID für den Bild-Container

2. eine eindeutige ID für die Tabelle

3. jede Tabellenzeile hat sowas wie ein data-src mit dem Bildnamen, oder den kompletten Pfad, wo das Bild zu finden ist.

Das könnte in etwa so aussehen (nicht getestet)

<div id="bild">
    <img alt="aktuelle Grafik" src="/images/erstes/bild.jpg" />
</div>
<table id="liste">
    <thead>
        SPALTENKÖPFE
    </thead>
    <tbody>
        <tr data-src="/images/neues/bild.jpg">
            <td>Hier die Inhalte der Zeile</td>
        </tr>
    </tbody>
</table>

<script>
    jQuery(document).ready(function($){
        var $tblImg = $('#bild img');
        
        $('#liste tbody tr').each( function() {
            $(this).click(function() {
                newTblImg = $(this).attr('data-src');
                
                $tblImg.attr('src', newTblImg);
            }
        }
    });
</script>

PS. Ich empfehle Dir einen Klickevent und nicht den Mouseover, sonst hast du da Disco

Ups, der SCRIPT-Block hat einen Fehler

<script>
    jQuery(document).ready(function($){
        var $tblImg = $('#bild img');
        
        $('#liste tbody tr').each( function() {
            $(this).click(function() {
                newTblImg = $(this).attr('data-src');
                
                $tblImg.attr('src', newTblImg);
            });
        });
    });
</script>

Das sollte jetzt aber passen

Hm... Dann wird es etwas aufwendiger, aber ich hab schon eine Idee.

Gib mir mal etwas Zeit

So, dass sollte dein Problem lösen.

https://codepen.io/degobbis/pen/rqeJop/

Die Bilderliste wird dem Div mitgegeben, im JS wird der Basispfad für die Bilder definiert, die aktive Zeile kann angepasst werden, bei Klick wechselt das Bild.

Viel Spass