Vampirephips: Wie das mouseover Script auf der Seite wiederholen?

Hallo Zusammen,

da ich JS Anfängerin bin, blick ich kaum durch. Nach längerem suchen hab ich ein Script gefunden das perfekt zu meiner Seite passt, leider funktioniert es nicht so ganz wie ich will.

Ich möchte: Genau dieses mouseover Bildarstellung (oben) 3x auf der Seite haben. Leider funktioniert es bisher nur 1x und ich hab auch nach stundenlangem probieren keine Lösung gefunden.+

Hoffe ihr könnt mir helfen. Hier die Testseite:

http://vampirephips.lima-city.de/wohnungen.html

Und hier der komplette Quelltext. Danke für die Hilfe!!

LG Vampirephips

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>     <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />     <meta name="description" content="" />     <meta name="author" content="" />     <meta name="keywords" content="" />     <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

<style type="text/css"> body { background-color:#339933; position: absolute; background-image: url(/bilder/hg_oben2.jpg); background-repeat:repeat-x; left: 70px; font: 100% Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; }

box1 {

position: absolute; top: 315px; width: 800px; height: 1400px; background-color: #009933; border-bottom: 30px solid #FFFFFF; border-top: 0px; border-left: 0px solid #FFFFFF; border-right: 0px solid #FFFFFF;

}

box3 {

position: relative; top: 315px; position: absolute; width: 670px; height: 1000px;

}

box4 {

position: absolute; top: 400px; left: 70px; width: 670px; height: 1000px; font-family: fantasy; font-size: 35px; font-style: italic; color: #FFFFFF;

}

box4a {

position: absolute; top: 830px; left: 70px; width: 670px; height: 1000px; font-family: fantasy; font-size: 35px; font-style: italic; color: #FFFFFF;

}

box4b {

position: absolute; top: 1110px; left: 70px; width: 670px; height: 1000px; font-family: fantasy; font-size: 35px; font-style: italic; color: #FFFFFF; }

box4c {

position: absolute; top: 330px; left: 70px; width: 670px; height: 1000px; font-family: fantasy; font-size: 35px; font-style: italic; color: #FFFFFF; }

box4d {

position: absolute; top: 190px; left: 0px; width: 670px; height: 1000px; font-family: fantasy; font-size: 35px; font-style: italic; color: #FFFFFF; }

box5 {

position: relative; top: 170px; left: 620px; }

box5a {

position: relative; top: 255px; left: 620px; }

box5b {

position: relative; top: 370px; left: 620px; }

box5c {

position: absolute; top: 1390px; left: 620px; }

/* Navigationsleiste */ #navigation {  position: absolute;   top: 268px;   font-weight: bold;   letter-spacing: 0px;   width: 800px;   margin: 0;   background-image: url(/bilder/hg_menue.jpg);   background-repeat:repeat-x;   color: #009933;   overflow: hidden;   font-size: 15px;

} #navigation ul {   list-style-type: none;   margin: 0;   padding: 0px 0px 0px 10px; } #navigation li {   margin: 0;   padding: 0;   float: left; } #navigation a {   color: #009933;   display: block;   text-decoration: none;   margin: 0;   padding: 10px;

}

navigation a:hover, #navigation a:active, #navigation a:focus {

  background-color: #009933;   color: #FFFFFF; } </style>

<script type="text/javascript" language="JavaScript"> <!-- begin var bild1 = new Image(); var bild2 = new Image(); var bild3 = new Image(); var bild4 = new Image(); var bild5 = new Image(); var bild6 = new Image(); bild1.src = "/bilder/hof_1.jpg"; bild2.src = "/bilder/hof_2.jpg"; bild3.src = "/bilder/hof_3.jpg"; bild4.src = "/bilder/hof_4.jpg"; bild5.src = "/bilder/hof_5.jpg"; bild6.src = "/bilder/hof_6.jpg"; function Vorschau(VorschauGrafik) { eval("document['picture'].src = " + VorschauGrafik + ".src"); } // end --> </script>

</head>

<body>

<div id="box2"><img src="/bilder/Kopf_6.jpg" alt="" border="0" width="800" height="250"></div> <div id="navigation" style="font-family: serif">     <ul> <li><a href="index.html">Willkommen</a></li> <li><a href="derhof.html">Der Hof</a></li> <li><a href="wohnungen.html">Wohnungen</a></li> <li><a href="wandern.html">Wandern</a></li> <li><a href="freizeit.html">Freizeit</a></li> <li><a href="preise.html">Preise</a></li> <li><a href="kontakt.html">Kontakt</a></li> <li><a href="anreise.html">Anreise</a></li> <li><a href="impressum.html">Impressum</a></li>     </ul>   </div> <div id="box1"></div> <div id="box3"><img src="/bilder/ecke.jpg" alt="" border="0" width="310" height="100"></div>

<div id="box4c" ><font style="font-family: sans-serif; font-size: 15px; font-style: italic"> Genießen Sie Ihren Urlaub in unseren gemütlichen und gut ausgestatteten Wohnungen<br />  für 2 bis 5 Personen oder unserem Appartement für 2 Personen.<br /><br /> </font></div>

<div id="box5"> <img class="Bild" name="picture" src="/bilder/hof_1.jpg" width="350" height="273" border="0" alt=""> </div>

<div id="box4" style="font-family: Vivaldi, Brush Script, fantasy;">Wohnung "Mühlenblick", 60 qm <br /> <font style="font-family: sans-serif; font-size: 15px; font-style: italic">                                                  <br />     komplett eingerichtete Küche mit Spülmaschine     <br />     Doppelschlafzimmer                       <br />     Wohn-/Schlafraum, Sat-TV, sehr gute Doppelbettcouch           <br />     Bad und Dusche, WC separat                                          <br />     Balkon mit herrlicher Aussicht                                            <br />     Frühstück möglich                                                               <br />     *Radio / CD - Player                                                            <br /><br />

<a href="derhof.htm" onMouseOver="Vorschau('bild1')"><img src="/bilder/hof_1.jpg" alt="" border="0" width="120" height="94"><a> <a href="derhof.htm" onMouseOver="Vorschau('bild2')"><img src="/bilder/hof_2.jpg" alt="" border="0" width="120" height="94"><a> <a href="derhof.htm" onMouseOver="Vorschau('bild3')"><img src="/bilder/hof_3.jpg" alt="" border="0" width="120" height="94"><a><br /> <a href="derhof.htm" onMouseOver="Vorschau('bild4')"><img src="/bilder/hof_4.jpg" alt="" border="0" width="120" height="94"><a> <a href="derhof.htm" onMouseOver="Vorschau('bild5')"><img src="/bilder/hof_5.jpg" alt="" border="0" width="120" height="94"><a> <a href="derhof.htm" onMouseOver="Vorschau('bild6')"><img src="/bilder/hof_6.jpg" alt="" border="0" width="120" height="94"><a> </font></div><br />

<div id="box5a"><img src="/bilder/brotbacken.jpg" alt="" border="0" width="300" height="234"></div> <div id="box4a" style="font-family: Vivaldi, Brush Script, fantasy;">Wohnung "Eckwaldblick", 70 qm <br /> <font style="font-family: sans-serif; font-size: 15px; font-style: italic">                                                                            <br /> *gemütlich und komplett eingerichtete Küche mit Spülmaschine und Sat-TV          <br /> *Doppelschlafzimmer                                                   <br /> *Wohn-/Schlafraum mit Etagenbetten, SAT TV                                                         <br /> *Sitzecke (kann in ein bequemes Schlafsofa umgewandelt werden)                                     <br /> *Bad mit Dusche, Doppelwaschbecken, Fön und Fussbodenheizung                                             <br /> *WC separat                                                                                                    <br /> *Abstellraum                                                                                                         <br /> *Balkon mit herrlicher Aussicht                                                                                            <br /> *Frühstück möglich                                                                                                               <br /> *Radio / CD - Player

</font></div>

<div id="box5b"><img src="/bilder/schnaps.jpg" alt="" border="0" width="250" height="192"></div> <div id="box4b" style="font-family: Vivaldi, Brush Script, fantasy;">Apartment, 24 qm <br /> <font style="font-family: sans-serif; font-size: 15px; font-style: italic"> <br />

*Doppelschlafzimmer, Dusche, WC, Sat-TV, Fernsehsessel, Balkon mit herrlicher<br /> Aussicht<br /> *Singleküche mit Herd, Kühlschrank, Kaffeemaschine, Toaster                                 <br /> *Frühstück möglich                                                                                <br /> *Das Appartement kann auch zu den Wohnungen dazugemietet werden                                         <br /><br />

<br />

<br /><br />    <br /><br /> <div id="box4d" style="font-family: Vivaldi, Brush Script, fantasy;">Service des Hauses</div><br />

*Brötchenservice <br /> *Frühstückservice      <br /> *Getränkeservice             <br /> * Verkauf hofeigener Erzeugnisse   <br /> *                                         <br /> *Kostenloser Internetzugang                    <br /> *Grillplatz                                          <br /> *Liegewiese                                                <br /> *Bettwäsche, handtücher                                          <br /> *Komplette Kleinkinderausstattung<br /> *Parkplatz am Haus                     <br /> *Gästewaschmaschine                          <br />

</font></div>

</body> </html>

  1. Lieber Vampirephips,

    1.) Wenn Du die URL zu der entsprechenden Seite postest, dann kannst Du Dir den Quelltext hier sparen. Das erhöht die Lesbarkeit und die Übersichtlichkeit Deines Postings.

    2.) Du benutzt CSS um die Darstellung zu steuern? Warum sehe ich dann noch so Relikte wie <font> und inline-Styles (das style-Attribut z.B. bei <div>-Elementen) in Deinem Quelltext? Wenn Du schon CSS einsetzt, dann tue das konsequent! Weg mit dem ganzen Müll!

    3.) Die benutzten HTML-Elemente haben mit dem Zweck zu dem Du sie einsetzt nichts zu tun. Schauen wir uns einmal folgenden Ausschnitt an:

    <div id="box4b" style="font-family: Vivaldi, Brush Script, fantasy;">Apartment, 24 qm <br />
    <font style="font-family: sans-serif; font-size: 15px; font-style: italic"> <br />

    *Doppelschlafzimmer, Dusche, WC, Sat-TV, Fernsehsessel, Balkon mit herrlicher<br /> Aussicht<br />
    *Singleküche mit Herd, Kühlschrank, Kaffeemaschine, Toaster                                 <br />
    *Frühstück möglich                                                                                <br />
    *Das Appartement kann auch zu den Wohnungen dazugemietet werden                                         <br /><br />

    <br />

    <br /><br />    <br /><br />

    Zuerst fallen mir die Sternchen am Beginn Deiner Zeilen auf. Willst Du etwa gar eine Liste darstellen? Dazu gibt es in HTML ganz tolle Elemente, die Du hier ohne den ganzen <br>-Unsinn nutzen kannst. Am Besten Du schaust einmal ins HTML-Tutorial für Anfänger hinein, denn da wird genau das sehr nachvollziehbar beschrieben!

    4.) Zu Deinem "eigentlichen" Problem:
    Dein JavaScript ist ein sehr vorsintflutlich geschriebenes Stückchen Code. Wahrscheinlich ist es schon einige Jahre alt. Das, was es tun soll, kann man heute auf andere Art sinnvoller schreiben. Zum Beispiel sollte der JS-Code in eine externe Datei ausgelagert werden. Aber dazu muss man von JavaScript etwas mehr verstehen, als einfach nur ein Code-Schnipsel von irgendwoher ins Dokument zu kleistern und ein paar URLs anzupassen. Von daher würde ich entweder mit Deiner momentanen Beschränkung leben, oder besser noch das JavaScript entfernen, bis Du mehr von JavaScript verstehst.

    Für ein tieferes Verständnis mit JavaScript sei Dir der kleine Lehrgang zum vernünftigen Schreiben eines JavaScripts empfohlen. Er setzt allerdings ein paar Grundlagen voraus...

    Liebe Grüße,

    Felix Riesterer.

    -- ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Für ein tieferes Verständnis mit JavaScript sei Dir der kleine Lehrgang zum vernünftigen Schreiben eines JavaScripts empfohlen.

      Du weißt schon, was man über zu viel Eigenlob denkt?

      1. Lieber André,

        Eigenlob hin oder her, kennst Du ein anderes Tutorial, das die im Artikel vorgestellten verschiedenen Praktiken beispielhaft in einem größeren Zusammenhang abhandelt und dabei nicht nur Funktionalität, sondern ihre Handhabung in einem Projekt demonstriert?

        Liebe Grüße,

        Felix Riesterer.

        -- ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
  2. Om nah hoo pez nyeetz, Vampirephips!

    Was mir zusätzlich zu Felix' Anmerkungen auffällt:

    1#

    Du verwendest keines der Bilder in der originalen Größe, die linken werden durch den Browser verkleinert, die rechts angezeigten vergrößert. Es bietet sich die Verwendung eines Bildes an, das du für die rechte Seite als sprite auslieferst. Das spart dir Ladezeit. Dasselbe Bild kannst du für den Auswahlbereich als Imagemap verwenden.

    2#

    Hast du die vielen verschiedenen Schriftarten auch tatsächlich ausprobiert, weißt du, was zum Beispiel

    Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

    bedeutet?

    Matthias

    -- Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
  3. Hallo,

    *Gästewaschmaschine                          <br />

    Wäscht man Gäste in der Maschine? ;-)
    Ich amüsiere mich immer wieder über Schilder, auf denen beispielsweise steht: "Parken nur für Kunden". Wohlgemerkt, Kunden. Nicht Autos. Die ADAC-Mitgliederzeitschrift "Motorwelt" hat das vor vielen Jahren mal zu einer hübschen Cartoonzeichnung aufbereitet: Neben einem P-Schild mit dem Zusatz "Nur für Kunden" standen lauter Menschen geparkt. Keine Autos.

    Wieso stehen in deinen Texten eigentlich Massen von Leerzeichen am Zeilenende vor dem Zeilenumbruch?

    *scnr*
     Martin

    --
    Männer haben nur eine Angst: Die Angst, kein Mann zu sein.
      (Liv Tyler, US-Schauspielerin)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

    1. Hi,

      Ich amüsiere mich immer wieder über Schilder, auf denen beispielsweise steht: "Parken nur für Kunden". Wohlgemerkt, Kunden. Nicht Autos. Die ADAC-Mitgliederzeitschrift "Motorwelt" hat das vor vielen Jahren mal zu einer hübschen Cartoonzeichnung aufbereitet: Neben einem P-Schild mit dem Zusatz "Nur für Kunden" standen lauter Menschen geparkt. Keine Autos.

      In "meinem" Supermarkt gibt's in der Obst- und Gemüseabteilung Kundenkontrollwaagen ...

      cu,
      Andreas

      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.

      -- Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      1. Hallo,

        [...] Neben einem P-Schild mit dem Zusatz "Nur für Kunden" standen lauter Menschen geparkt. Keine Autos.

        In "meinem" Supermarkt gibt's in der Obst- und Gemüseabteilung Kundenkontrollwaagen ...

        naja ... und am Durchgang zur Fleischabteilung steht dann: "Zutritt nur für Kunden bis 90kg" :-)

        Ciao,
         Martin

        --
        Chef zum Bewerber: Es gibt zwei Dinge, auf die ich allergrößten Wert lege. Das eine ist Sauberkeit! Haben Sie übrigens die Schuhe auf der Matte abgetreten? - Ja, selbstverständlich. - Gut. Das andere ist uneingeschränkte Ehrlichkeit. Übrigens, draußen liegt gar keine Fußmatte.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

      2. Hallo :)

        In "meinem" Supermarkt gibt's in der Obst- und Gemüseabteilung Kundenkontrollwaagen

        Gewogen wird vor und nach Besuch der Obst- und Gemüseabteilung, um die Mundräuber unter den Kunden herauszuwiegen?

        mfg
        cygnus

        -- Die Sache mit der Angel und dem  ><o(((°>  hat immer einen Haken ...
  4. Hallo,

    Du hast Hinweise bekommen, die für mich hilfreich wären. Ich befürchte (aus eigener Erfahrung in einem völlig anderen Bereich), dass sie Dich nicht besonders viel weitergebracht haben, weil ...

    da ich JS Anfängerin bin, blick ich kaum durch.

    ... wir Dich vermutlich nicht dort abgeholt haben, wo Du stehst. Felix schreibt in seinem Artikel selbst, dass er mehrere Jahre intensiven Mitlesens, Ausprobieren und Lernens benötigt hat, um dort anzukommen, was er in seinem (sehr guten!) Artikel zu vermitteln versucht.

    Ich glaube, für jeden ist es wichtig, Erfolgserlebnisse zu haben. Diese motivieren mich, weiterzumachen, dazuzulernen - und sei es nur für mich selbst.

    Ich möchte: Genau dieses mouseover Bildarstellung (oben) 3x auf der Seite haben.

    Das kriegst Du hin!

    Ich möchte es auf die relevanten Bereiche reduzieren:

    Dokumententyp:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    Javascript:

    » var bild1 = new Image(); // Dieser erste Abschnitt dient dazu, Bilder vorzuladen. > var bild2 = new Image(); > var bild3 = new Image(); > var bild4 = new Image(); > var bild5 = new Image(); > var bild6 = new Image(); > bild1.src = "/bilder/hof_1.jpg"; > bild2.src = "/bilder/hof_2.jpg"; > bild3.src = "/bilder/hof_3.jpg"; > bild4.src = "/bilder/hof_4.jpg"; > bild5.src = "/bilder/hof_5.jpg"; > bild6.src = "/bilder/hof_6.jpg"; // Wie Matthias zu Recht anmerkt, verwendest Du genau diese Bilder sowieso // in Deiner Voransicht. Vorladen dieser Bilder ist somit überflüssig. // Die folgende Funktion kann man leicht vereinfachen > function Vorschau(VorschauGrafik) > { > eval("document['picture'].src = " + VorschauGrafik + ".src"); > }

    Solchen Code wie in Deiner Funktion "Vorschau" fand man auch in älteren Ausgaben von SELFHTML. Überflüssigerweise wird von der Funktion eval() Gebrauch gemacht. Zu [ref:self812;javascript/objekte/unabhaengig.htm#eval@title=eval()] gibt es einen einfachen Merksatz (Ausnahmen bestätigen wie üblich die Regel):

        "eval is evil."

    Abgesehen davon verzichten wir auf das Vorladen der Vorschaugrafiken und haben daher keine Notwendigkeit, auf eval() zuzugreifen. Sogar der erste Schritt, um mehrere Vorschaubilderlisten in einem Dokument haben zu können, bringt und keinen komplexeren, sondern sogar einfacheren Code.

    HTML

    Zielbereich der Großdarstellung:

    <div id="box5"> <img class="Bild" name="picture" src="/bilder/hof_1.jpg" width="350" height="273" border="0" alt=""> </div>

    Wie ich bereits anmerkte, ist dies der Zielbereich für Deine Darstellung. Statt dem img-Element ein name-Attribut zu geben, wäre es sinnvoller, diesem ein id-Attribut zu geben, anhand dessen Du das Zielelement identifizieren kannst - ganz besonders, weil das name-Attribut bei img-Elementen auf der Abschussliste steht. In XHTML 1.0 strict ist es beispielsweise schon seit fast 10 Jahren nicht mehr zulässig.

    [...]

    Vorschaubilder, die bei MouseOver im Zielbereich dargestellt werden sollen:

    » <a href="derhof.htm" onMouseOver="Vorschau('bild1')"><img src="/bilder/hof_1.jpg" alt="" border="0" width="120" height="94"><a> > <a href="derhof.htm" onMouseOver="Vorschau('bild2')"><img src="/bilder/hof_2.jpg" alt="" border="0" width="120" height="94"><a> > <a href="derhof.htm" onMouseOver="Vorschau('bild3')"><img src="/bilder/hof_3.jpg" alt="" border="0" width="120" height="94"><a><br /> > <a href="derhof.htm" onMouseOver="Vorschau('bild4')"><img src="/bilder/hof_4.jpg" alt="" border="0" width="120" height="94"><a> > <a href="derhof.htm" onMouseOver="Vorschau('bild5')"><img src="/bilder/hof_5.jpg" alt="" border="0" width="120" height="94"><a> > <a href="derhof.htm" onMouseOver="Vorschau('bild6')"><img src="/bilder/hof_6.jpg" alt="" border="0" width="120" height="94"><a>

    Bitte beachte, dass der von Dir genutzte Event-Handler [ref:self812;javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover] und nicht onMouseOver heißt.

    Fassen wir zusammen, was Deine Anforderung ist: Beim Event onmouseover soll das Bild, über dem die Maus sich gerade befindet, in einem Zielbereich angezeigt werden. Unterschiedliche Bildlisten sollten in unterschiedlichen Zielbereichen angezeigt werden.

    Da das Vorschaubild das gleiche ist wie das, das im Zielbereich angezeigt werden soll, können wir sehr einfachen Code schreiben. Wie Du anhand meiner bisherigen Argumentation entnehmen kannst, müssen wir der Funktion, die die Arbeit erledigen soll, den Zielbereich angeben können, d.h. die Funktion benötigt nicht nur die Information, was sie anzeigen soll, sondern auch die Information, wo sie das anzeigen soll:

    /**  Übergabeparameter:  picture:   Verweis auf das Bild, das angezeigt werden soll  targetid:  id des img-Elementes, in dem das Bild angezeigt werden soll  */ function Vorschau(picture, targetid)

    Daher müssen wir den HTML-Quellcode auch leicht modifizieren:

    Zielbereich der Großdarstellung der ersten Bilderliste. Diese zeigt Bilder zum Hof, deswegen geben wir dem Bild, d.h. dem img-Objekt die id "phof". Andere Zielbereich benötigen selbstverständlich eine andere id.

    <div id="box5">   <img class="Bild" id="phof" src="/bilder/hof_1.jpg" width="350" height="273" border="0" alt=""> </div> <!-- [...] Beachte: ich habe die img-Elemente XHTML-konform geschlossen und auch die a-Elemente korrekt geschlossen. Auf onmouseover reagieren wir derzeit noch nicht, das kommt im nächsten Schritt. --> <a href="derhof.htm"><img src="/bilder/hof_1.jpg" alt="" border="0" width="120" height="94" /></a> <a href="derhof.htm"><img src="/bilder/hof_2.jpg" alt="" border="0" width="120" height="94" /></a>

    Unsere Vorschaufunktion benötigt einen Verweis auf das Bild, das in Großansicht gezeigt werden soll: dieses ist ja identisch mit dem Vorschaubild, das im Vorschaubereich vom Browser kleiner skaliert wird. Es ist daher sinnvoll, auf den onmouseover-Event des Bildes zu reagieren, ganz besonders, weil uns Javascript das spezielle Schlüsselwort [ref:self812;javascript/sprache/objekte.htm#this@title=this] zur Verfügung stellt, mit dem auf das aktuelle Element Bezug genommen wird:

    Modifizieren wir unseren HTML-Code mit fest verdrahteten Event-Handlern [1]:

    <a href="derhof.htm"><img src="/bilder/hof_1.jpg" alt="" border="0" width="120" height="94" onmouseover="Vorschau(this, 'hpic')"/></a> <a href="derhof.htm"><img src="/bilder/hof_2.jpg" alt="" border="0" width="120" height="94" onmouseover="Vorschau(this, 'hpic')" /></a>

    Innerhalb einer Bilderliste verwenden wir stets den gleichen Funktionsaufruf. Dabei ist der erste Parameter stets ein Verweis auf das aktuelle Objekt, das heißt, das Bild, das den Event ausgelöst hat. Der zweite Parameter ist die id des Zielelementes.

    Implementieren wir nun die Funktion Vorschau:

    function Vorschau(picture, targetid) {     // picture ist ein Verweis auf ein img-Element.     // img-Elemente haben ein src-Attribut, das uns in Javascript     // als Element-Eigenschaft zur Verfügung steht:     // Verschaffen wir uns Zugriff auf das Zielelement:     // Wir haben die id des Zielelementes, daher können wir die     // Methode getElementById() verwenden.     var target = document.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById](targetid);     // Dieses ist ein img-Element, wie oben erwähnt haben solche ein     // src-Attribut, das den Pfad zur Bildressource angibt.     // Du möchtest im Zielelement das gleiche Bild anzeigen, das gerade     // überfahren wird. Nichts einfacher als das:     [ref:self812;javascript/objekte/images.htm#src@title=target.src] = picture.src; }

    Beachte: Alle Zeilen zum Vorladen der Bilder sind bei meiner Lösung überflüssig und können entfallen.

    Modifikation: Da wir nur ein einziges Mal auf das Zielelement zugreifen, können wir und das Zuweisen an eine Variable sparen und kommen wie das Original mit einer einzigen Codezeile aus:

    function Vorschau(picture, targetid) {     document.getElementById(targetid).src = picture.src; }

    Mehr Javascriptcode benötigst Du für Dein Problem hier überhaupt gar nicht. Du solltest sehen, dass mein Vorschlag einfacher ist als das, was Du bisher hast.

    Nehmen wir an, Du hast einen weiteren Bereich, in dem ein Bild aus einer zweiten Bilderliste angezeigt werden soll:

    Ziel für Großanzeige 2:

    <div id="box5b"><img id="spic" src="/bilder/schnaps.jpg" alt="" border="0" width="250" height="192"></div>

    Vergib dem img-Element eine geeignete id, ich wählte

        id="spic"

    weils um Schnaps geht :-)

    und die entsprechende Bilderliste:

    <a href="demo.htm"><img src="/bilder/schnaps_1.jpg" alt="" border="0" width="120" height="94" onmouseover="Vorschau(this, 'spic')"/></a> <a href="derhof.htm"><img src="/bilder/schnaps_2.jpg" alt="" border="0" width="120" height="94" onmouseover="Vorschau(this, 'spic')" /></a>

    Du siehst, ich habe im onmouseover-Eventhandler diesmal bei allen Bildern

       'spic'

    übergeben, die id, die ich vorher dem Ziel-img-Element gegeben hatte. Die modifizierte Funktion sorgt dafür, dass das überfahrene Bild im richtigen Zielbereich angezeigt wird.

    Ich hoffe, Du kannst meine Anregungen umsetzen und daraus die Motivation beziehen, Dich intensiver mit Javascript auseinanderzusetzen. Du wirst es Dir selber danken.

    Weitere Schritte: Falls Du Thumbnails für die Voransicht verwendest (ich würde hier darauf verzichten), wird es etwas komplizierter. Code auslagern wäre ein weiterer Schritt und zum Schluss käme das Zuweisen der Eventhandler auch skriptgesteuert, so dass in Deinem HTML kein Inline-Javascript mehr wäre. Danach wirfst Du das Inline-CSS heraus (wie Dir schon angeraten wurde), entsorgst Leichen wie das font-Element. Dein HTML-Code wird schlanker, lesbarer und übersichtlicher werden - was der Wartbarkeit zu Gute kommen wird.

    Das musst Du nicht auf einmal erledigen, Rom ist nicht an einem Tag erbaut worden - und auch wir™ haben nicht von Anfang an perfekten Code geschrieben [2].

    Freundliche Grüße

    Vinzenz

    [1] Schritt für Schritt. [2] und tun dies heute auch noch nicht.