• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild durch Hover-Event einer anderen Tabelle ändern

Aerics

Aerics

Neues Mitglied
Einen schönen guten Abend zusammen.

Und zwar habe ich folgendes Problem:
Ich habe eine Tabelle, welche eine Personenliste darstellt.
Unter dieser befindet sich eine weitere mit einem Hintergrundbild eines Gruppenfotos und als Inhalt ein weiteres Bild, welches eine Maske ist.

Nun möchte ich, dass beim Aufruf des Hover-Events der Spalte einer Person sich die Maske(Bild) der anderen Tabelle ändert.
Mir ist nur bekannt, dass ich in CSS beim Hover-Event nur das Bild des Objektes ändern kann, welche das Event aufgerufen hat.

Ist dieses Problem mit CSS zu lösen, oder muss ich dafür z.B. Javascript nutzen?
Ich würde mich sehr über Hilfe/Beispiele freuen.

Gruß und Danke
 
Ich würde das mit JavaScript lösen

JavascriptCode
HTML: 
<script type="text/javascript">
function verschwinden ()
{
document.getElementById('name').style.display='none';
}

function zeigen ()
{
document.getElementById('name').style.display="";
}
</script>


Der Link, welcher beim Hover effekt das untere Element anzeigt, und beim Onmouseout
wieder verschwinden lässt

HTML: 
<a href="#" class="sec" onmouseover="zeigen()" onmouseout="verschwinden()">Anzeigen</a>


Das Element welches du anzeigen möchtest, kommt in dieses DIV Element
HTML: 
<div id="name" style="display:none;">
</div>
Und so sieht das dan aus schlussendlich

http://vbcmarch.ch/newspast.php

mfg MAsterChief
 
Zuletzt bearbeitet:
Schonmal Danke für die Antwort.

Bin leider in JS völliger Anfänger...
Kann ich denn bei dem Hover der Funktion bereits einen Namen übergeben, damit ich nur eine Javascriptfunktions habe für alle Div`s? Macht ja wenig Sin das ganze 30 mal zu kopieren :)
 
Sehr, sehr geil. Funktioniert tadenlos.

Habe es jedoch so abgeändert, das ich beim Mouseover das Hintergrundbild ändere.
Unter Firefox stellt er das ganze astrein dar, im IE flackert es jedoch kurz, da kurz kein Bild vorhandne ist und erst dann das neue. Kann man das ändern?

PHP: 
            function verschwinden (Name)
            {
                document.getElementById('maske').style.backgroundImage="url(./images/liste_maske.png)";
            }
            
            function zeigen ()
            {
                document.getElementById('maske').style.backgroundImage="url(./images/liste_maske_test.png)";
            }
 
Ein wenig Gebastel. Diese Fassung verknüpft automatisch jeden Listeneintrag aus ul#students mit einer "gleichnamigen" Maske ("Thomas Muster" -> "liste_maske_ThomasMuster.png"). Alle Masken werden beim Aufruf der Seite vorgeladen. Das dürfte das Flackern vermeiden.

Die Tabellen habe ich leider nicht kapiert und deshalb selbst was mit Divs gebastelt. Passt sich nicht gar so hübsch dem Browserfenster an wie die Tabellen.

Na ja, schau es dir mal an.

Gruß Marc

index.php

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Klassenliste 10bR .:Liste:.</title>
    <link rel="stylesheet" type="text/css" href="./inc/style.css" />
    <script type="text/javascript" src="init.js"></script>
</head>

<body>
    <div id="liste-bg" class="size">
        <ul id="students">
            <li>Jan Guschelbauer</li>
            <li>Sascha Licht</li>
        </ul>

        <div id="liste-maske" class="size">
            <div id="liste-person" class="size">                
            </div>
        </div>
    </div>
</body>

</html>

style.css:

Code: 
* {
    margin: 0;
    padding: 0;
    }

body {
    text-align: center;
    color: #fff;
    background: #000;
    }

.size {
    width: 1090px;
    height: 825px;
    }

#liste-bg {
    background: url('../images/liste_bg.jpg');
    position: relative;
    margin: 0 auto;
    text-align: left;
    }

#liste-maske {
    background: url('../images/liste_maske.png');
    visibility: hidden;
    }

#liste-person {
    visibility: hidden;    
    }

#students {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 5px solid #333;
    }

#students li {
    list-style: none;
    display: block;
    cursor: pointer;
    background: #111;
    padding: 5px;
    }

init.js

Code: 
window.onload = function()
{
    var maske     = document.getElementById('liste-maske');
    var person    = document.getElementById('liste-person');
    var names     = document.getElementById('students')
                            .getElementsByTagName('li');
    var preloader = new Array();

    maske.style.visibility = 'visible';

    for (var i = 0; i < names.length; i++) {
        var node = names[i];
        var name = node.firstChild.nodeValue;
        var backgroundImage = 'images/liste_maske_' + name.replace(' ', '')
                            + '.png';

        var image = new Image();
        image.src = backgroundImage;
        preloader.push(image);

        var f = function(node, backgroundImage)
        {
            node.onmouseover = function()
            {
                person.style.backgroundImage = "url('" + backgroundImage + "')";

                person.style.visibility = 'visible';
                maske.style.visibility  = 'hidden';
            }

            node.onmouseout = function()
            {
                maske.style.visibility  = 'visible';
                person.style.visibility = 'hidden';
            }
        }

        f(node, backgroundImage);
    }
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben