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

Bei Mouseover wird ein Bild getauscht

G

gaplex

Mitglied
Hallo Leute,
ich bin auf der Suche nach einem kleinen Script das Folgendes kann: Wenn ich mit der Maus über eine Textnavigation (<li><a ...> ...) fahre wird an einer bestimmten Stelle ein Bild getauscht. Ich hab leide keine Ahnung wonach ich suchen muss. Vielleicht habt ihr ja einen Tipp für mich? Also die Navigation selber ist kein Bild sondern reiner Text und das Bild selber steht über der Navigation.

Danke!
 
Die hover-Pseudoklasse wirkt bei (fast) jedem HTML-Element. Das kannst Du auch bei einem <div> oder <li> verwenden. Es muss kein Link sein. (Ausnahme: der IE6 und älter kennt es nicht anders)
 
gaplex schrieb:
Danke, aber wie gesagt die einfache HTML+CSS Lösung hilft mir nicht, weil das Bild nicht der Link ist. Aber ich habe soeben etwas passendes gefunden: Bildvorschau Beispiel 01 Großansicht Grafiktausch bei mouseover Textlink
Zum Vergrößern anklicken....
Das Skript ist aus technischer Sicht, Schrott!

Das ginge viel einfacher:
Code: 
<a href="gross1.htm" onmouseover="document.picture.src = 'bild1.gif'">Foto 1<a>
<a href="gross2.htm" onmouseover="document.picture.src = 'bild2.gif'">Foto 1<a>
<a href="gross3.htm" onmouseover="document.picture.src = 'bild3.gif'">Foto 1<a>

<img name="picture" src="startbild.gif" width=128 height=128 border=0>
 
Hallo Struppi,
wäre es auch möglich, dass das Bild wirklich nur bei Mouseover getauscht wird und wenn ich die Maus vom dem Link wieder wegnehme, dass dann wieder das Startbild aktiv ist? Momentan ist es bei deiner Lösung ja so, dass immer das Bild stehen bleibt auf dem man zuletzt mit der Maus stand. Schön wäre es, wenn es nur dann getauscht wird wenn man mit der Maus auch tatsächlich auf dem Link steht... :)
 
Ich schließe mich hier mal an, weil ich morgen eine Seite erstellen muss, bei der u.a. 12 Bilder beim Hovern ausgetauscht werden. Es können weder background-images verwendet werden, noch darf ich jQuery einsetzen und redundanten Code möchte ich nach Möglichkeit vermeiden.

Also dachte ich mir, die 2 x 12 Bilder entsprechend zu benennen ( picture1_small, picture2_small, picture3_small, ..., respektive picture1_big, picture2_big, usw.) und dann Folgendes zu schreiben:
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Bildwechsel</title>
 <script type="text/javascript">
    function smallPic(picNr) {
         var picture = document.getElementById("picture" + picNr);
         picture.src = 'images/picture' + picNr + '_small.jpg';
    }

    function bigPic(picNr) {
     var picture = document.getElementById("picture" + picNr);
     picture.src = 'images/picture' + picNr + '_big.jpg';
     }

</script>
</head>
<body>
    <div>
        <img src="http://www.html.de/images/picture1_small.jpg" alt="picture1" id="picture1" onmouseover="bigPic(1);" onmouseout="smallPic(1);" /><br />
        <img src="http://www.html.de/images/picture2_small.jpg" alt="picture2" id="picture2" onmouseover="bigPic(2);" onmouseout="smallPic(2);" /><br />
        .....
    </div>
</body>
</html>

Das funktioniert zwar, ist mir aber noch zu lang. Deshalb die Frage: Gibt es eine Möglichkeit, die beiden Funktionen in einer zusammenzufassen, auf IDs zu verzichten und die Bilddateinamen aus einem Array zu beziehen? In purem JavaScript, ganz ohne Frameworks.
 
Klar geht das. Speichere die Liste als Array und greif nur in der Funktion auf diese zu. Welches Bild gerade angezeigt wird kannst Du ja auch prüfen.

Beispiel ohne das Array:
Code: 
var picture = document.getElementById("picture" + picNr);
var newpic = 'images/picture' + picNr + '_small.jpg';
if( picture.src == newpic ) {
 newpic = 'images/picture' + picNr + '_big.jpg';
}
picture.src = newpic;
 
Danke. Ich habe das Beispiel etwas verändern müssen, weil in picture.src der absolute Pfad liegt, aber so funktioniert es nun:

HTML: 
    function togglePic(picNr) {
         var picture = document.getElementById("picture" + picNr);
         var newpic = 'images/picture' + picNr + '_small.jpg';
         var oldpic = picture.src;
         if(oldpic.match(/small.jpg$/)) {
             newpic = 'images/picture' + picNr + '_big.jpg';
         }
         picture.src = newpic;
    }

Wenn ich nun noch die Bildnamen mit 0 beginne, dann kann ich auch alle Elemente eines Arrays adressieren. Aber mit welcher Funktion extrahiert man ein einzelnes, indexiertes Element? Slice() liefert ja nur den Rest des Arrays, und hier habe ich auch nichts gefunden.

JavaScript Array Object
 
Ich bin mir nicht sicher, ob du das meinst.

Code: 
var arrayname = new Array("erstes", "zweites");
alert(arrayname[1]);
 
threadi schrieb:
Ich bin mir nicht sicher, ob du das meinst.

Code: 
var arrayname = new Array("erstes", "zweites");
alert(arrayname[1]);
Zum Vergrößern anklicken....

Ja, so ähnlich. Schlussendlich habe ich dann heute auch noch das HTML gekürzt und den Code mit einer For-Schleife erzeugt. Insgesamt hat mich das zwar viel mehr Zeit gekostet, als einfach mit statischem HTML zu arbeiten, und überlagerte Divs per CSS (display oder z-index auszublenden), oder gar background-images zu verwenden, aber es war eine gute Übung.

PHP: 
<?php
    $name = array('Bildname1', 'Bildname2', 'Bildname3', 'Bildname4', 'Bildname5', 'Bildname6', 'Bildname7', 'Bildname8', 'Bildname9', 'Bildname10', 'Bildname11', 'Bildname12');
        
    for($i=1; $i<13; $i++) {
        $bilder = '<div>'
            .'<img src="http://www.html.de/images/picture'.$i.'_small.gif').'" alt="picture" id="picture'.$i.'" onmouseover="togglePic('.$i.');" onmouseout="togglePic('.$i.');" />'
        $bilder .= '<span class="bildnamen">'.$name[$i-1].'</span></div>';
    }
    
    echo $bilder;
?>
 
Beachte:
var bild1 = new Image();bild1.src = "bild1.gif";
Zum Vergrößern anklicken....
Diente um das Bild vorzuladen und im Speicher zu behalten.
selbstverständlich kannst du diese auch in einer Schlaufe erstellen.
Je nach Bildgrösse oder Intranet/Internet Verwendung empfehle ich dir die Bilder vorzuladen.
Auch wen der Browser die Bilder bei dir wahrscheinlich aus dem Chache holt, wird dies bei einem neuen Seitenbesucher nicht so flüssig ablaufen!
lg thomef
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben