✔ Mouseover-Bilder werden im falschen Container wiedergegeben

D

Don Philippe

Grünschnabel
Servus,

ich habe ein Problem bezüglich der Darstellung des Mouseover-Effekts.
Der Content-Bereich meiner Site wird includet.
Link zur besagten Seite
Der komplette Code sieht wiefolgt aus:

Code: 
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "http://www.tutorials.de/forum/images/richard.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "http://www.tutorials.de/forum/images/richard2.gif"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "http://www.tutorials.de/forum/images/paul.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "http://www.tutorials.de/forum/images/paul2.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "http://www.tutorials.de/forum/images/till.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "http://www.tutorials.de/forum/images/till2.gif"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "http://www.tutorials.de/forum/images/flake.gif";     /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "http://www.tutorials.de/forum/images/flake2.gif"; /* vierte Highlight-Grafik */

Normal5 = new Image();
Normal5.src = "http://www.tutorials.de/forum/images/oli.gif";     /* fünfte Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "http://www.tutorials.de/forum/images/oli2.gif"; /* fünfte Highlight-Grafik */

Normal6 = new Image();
Normal6.src = "http://www.tutorials.de/forum/images/schneider.gif";     /* sechste Standard-Grafik */
Highlight6 = new Image();
Highlight6.src = "http://www.tutorials.de/forum/images/schneider2.gif"; /* sechste Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

            <a href="index.php?site=hintergrund.php#" 
            onmouseover="Bildwechsel(1, Highlight1)" 
            onmouseout="Bildwechsel(1, Normal1)">
            <img src="http://www.tutorials.de/forum/images/richard.gif" border="0">
            </a>      
            
            <a href="index.php?site=hintergrund.php#" 
            onmouseover="Bildwechsel(2, Highlight2)" 
            onmouseout="Bildwechsel(2, Normal2)">
            <img src="http://www.tutorials.de/forum/images/paul.gif" border="0">
            </a>         
            
            <a href="index.php?site=hintergrund.php#" 
                onmouseover="Bildwechsel(3, Highlight3)"
                onmouseout="Bildwechsel(3, Normal3)">
                <img src="http://www.tutorials.de/forum/images/till.gif" border="0">
            </a>
            <a href="index.php?site=hintergrund.php#" 
                onmouseover="Bildwechsel(4, Highlight4)"
                onmouseout="Bildwechsel(4, Normal4)">
                <img src="http://www.tutorials.de/forum/images/flake.gif" border="0">
            </a>  
            <a href="index.php?site=hintergrund.php#" 
                onmouseover="Bildwechsel(5, Highlight5)"
                onmouseout="Bildwechsel(5, Normal5)">
                <img src="http://www.tutorials.de/forum/images/oli.gif" border="0">
            </a>  
            <a href="index.php?site=hintergrund.php#" 
                onmouseover="Bildwechsel(6, Highlight6)"
                onmouseout="Bildwechsel(6, Normal6)">
                <img src="http://www.tutorials.de/forum/images/schneider.gif" border="0">
            </a>



Oben werden die Java-Befehle quasi festgehalten, unten die verlinkten Bilder mit den Anweisungen zum Bildwechsel belegt. Leider wird beim überfahren der Bilder die Highlight-Grafik in der Navigation wiedergegeben - kann jemand Abhilfe schaffen?

Besten Gruß
 
Wenn du Bilder nach ihrem Index ansprichst, dann werden alle Bilder des Dokumentes in der Reihenfolge, in der sie im Quelltext stehen, herangezogen.

Das erste Bild im Dokument ist bspw. header/4.jpg ...danach kommen die Grafiken für die Navigation.

Es ist sinnvoller, wenn du die Bilder anhand ihres Namens ansprichst..dann musst du nicht jedes mal, wenn du ein Bild einfügst/entfernst, alles ändern, weil sich die Indizierung geändert hat.
 
ca so:
Code: 
<script type="text/javascript">
<!--
function Bildwechsel (Bildname, Bildobjekt) {
  document.images[Bildname].src = Bildobjekt.src;
}
//-->
</script>


<a href="index.php?site=hintergrund.php#" 
                onmouseover="Bildwechsel('till', Highlight3)"
                onmouseout="Bildwechsel('till', Normal3)">
                <img src="images/till.gif" border="0" name="till">
            </a>
 
Okay, das sieht schon mal sinnvoller und vor allem übersichtlicher aus.

Ich habe nun alle Moueover-Effekte nach diesem Prinzip gebastelt, nur funtkioniert der Effekt nicht mehr, sprich beim Überfahren mit der Maus findet kein Bildwechsel statt. Wie soll ich 'Highlight' und 'Normal' im Code definieren?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück