Mouseover Effekt geht nicht

cundf2010 · 28.04.2010

Hallo,
ich habe einen Mouseover Effekt erzeugt und das ganze funktionierte auch einwandfrei allerdings nur wenn ich die Homepage offline (direkt auf dem PC) ansehe.

Wenn ich die auf einen Server lade funktioniert der Mouseover Effekt nicht, weil die Buttons erst gar nicht angezeigt werden.

Die Grafiken liegen in einem Unterordner namens "Bilder" und den Pfad habe ich auch jedesmal mit angegeben also daran könnte es eig. nicht liegen. Auf der
standard mouseover onmouseover grafik tausch Seite habe ich das ganze gelernt.

Am besten ich poste mal den kompletten HTML Code meiner Seite (und ich BITTE euch nicht über meinen Code zu meckern oder so) bin noch anfänger!
Mir gehts in erster Linie nur um den Effekt.

Den Code würde ich auch nur ungern komplett umschreiben weil ich den eig. ganz gut finde und es ja wie gesagt auf dem PC auch einwandfrei funktioniert.

Die "normalen" Grafiken haben immer die Endung 1 (z.B. HOME1.jpg) und die "over" Grafiken die Endung 2 (z.B. HOME2.jpg) <

Ich würde mich über jede Hilfe freuen und bedanke mich schon mal im vorraus!

Hier ist der Code:

HTML:

<html>
<head>
<title>C und F</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "Bilder/about_us2.jpg"
button1= new Image();
button1.src = "Bilder/about_us1.jpg"
button2= new Image();
button2.src = "Bilder/lovestory2.jpg"
button2= new Image();
button2.src = "Bilder/lovestory1.jpg"
button3= new Image();
button3.src = "Bilder/photoz2.jpg"
button3= new Image();
button3.src = "Bilder/photoz1.jpg"
button4= new Image();
button4.src = "Bilder/media2.jpg"
button4= new Image();
button4.src = "Bilder/media1.jpg"
button5= new Image();
button5.src = "Bilder/linkz2.jpg"
button5= new Image();
button5.src = "Bilder/linkz1.jpg"
button6= new Image();
button6.src = "Bilder/gbook2.jpg"
button6= new Image();
button6.src = "Bilder/gbook1.jpg"
button7= new Image();
button7.src = "Bilder/board2.jpg"
button7= new Image();
button7.src = "Bilder/board1.jpg"
button8= new Image();
button8.src = "Bilder/contact2.jpg"
button8= new Image();
button8.src = "Bilder/contact1.jpg"
//-->
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="743" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="13">
            &nbsp;</td>
        <td colspan="25">
            <img src="Bilder/header.gif" width="529" height="103" alt=""></td>
        <td height="103" nowrap></td>
    </tr>
    <tr>
        <td rowspan="12">
            <img src="Bilder/index-03.jpg" width="2" height="457" alt=""></td>
        <td rowspan="12">
            <img src="Bilder/index-04.jpg" width="25" height="457" alt=""></td>
        <td colspan="3">
            <img src="Bilder/home1.jpg" width="57" height="38" alt=""></td>
        <td colspan="3">
            <img src="Bilder/index-06.jpg" width="15" height="38" alt=""></td>
        <td colspan="3">
            <a href="about_us.html"
onmouseover="austausch1.src='bilder/about_us2.jpg';"
onmouseout="austausch1.src='bilder/about_us1.jpg';">
<img src="bilder/about_us1.jpg"
border="0" width="98"height="38"
name="austausch1"></a></td>
        <td>
            <img src="Bilder/index-08.jpg" width="15" height="38" alt=""></td>
        <td colspan="4">
            <a href="lovestory.html"
onmouseover="austausch2.src='bilder/lovestory2.jpg';"
onmouseout="austausch2.src='bilder/lovestory1.jpg';">
<img src="bilder/lovestory1.jpg"
border="0" width="111"height="38"
name="austausch2"></a></td>
        <td colspan="2">
            <img src="Bilder/index-10.jpg" width="16" height="38" alt=""></td>
        <td colspan="4">
            <a href="photoz.html"
onmouseover="austausch3.src='bilder/photoz2.jpg';"
onmouseout="austausch3.src='bilder/photoz1.jpg';">
<img src="bilder/photoz1.jpg"
border="0" width="82"height="38"
name="austausch3"></a></td>
        <td colspan="3" rowspan="4">
            <img border="0" src="Bilder/kette.gif" width="108" height="149"></td>
        <td height="38" nowrap></td>
    </tr>
    <tr>
        <td colspan="19">
            <img src="Bilder/index-13.jpg" width="392" height="40" alt=""></td>
        <td rowspan="8">
            <img src="Bilder/index-14.jpg" width="2" height="374" alt=""></td>
        <td height="40" nowrap></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="Bilder/index-15.jpg" width="30" height="297" alt=""></td>
        <td colspan="16">
            <img src="Bilder/index-16.jpg" width="327" height="1" alt=""></td>
        <td colspan="2" rowspan="6">
            <img src="Bilder/index-17.jpg" width="35" height="297" alt=""></td>
        <td height="1" nowrap></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="Bilder/index-18.jpg" width="1" height="258" alt=""></td>
        <td colspan="15" rowspan="3" background="Bilder/index-19.jpg">
            <div style="overflow:auto; width:326px; height:258px ;">Inhalte...</div></td>
        <td height="70" nowrap></td>
    </tr>
    <tr>
        <td colspan="3">
            <iframe name="news" height="159" width="108" border="0" frameborder="0" src="news.html">
            Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
            </iframe></td>
        <td height="159" nowrap></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="Bilder/index-21.jpg" width="108" height="32" alt=""></td>
        <td height="29" nowrap></td>
    </tr>
    <tr>
        <td colspan="16" rowspan="2">
            <img src="Bilder/index-22.jpg" width="327" height="38" alt=""></td>
        <td height="3" nowrap></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/index-23.jpg" width="3" height="72" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="Bilder/myspace.gif" width="105" height="72" alt=""></td>
        <td height="35" nowrap></td>
    </tr>
    <tr>
        <td colspan="4">
            <a href="media.html"
onmouseover="austausch4.src='bilder/media2.jpg';"
onmouseout="austausch4.src='bilder/media1.jpg';">
<img src="bilder/media1.jpg"
border="0" width="59"height="37"
name="austausch4"></a></td>
        <td>
            <img src="Bilder/index-26.jpg" width="11" height="37" alt=""></td>
        <td colspan="2">
            <a href="linkz.html"
onmouseover="austausch5.src='bilder/linkz2.jpg';"
onmouseout="austausch5.src='bilder/linkz1.jpg';">
<img src="bilder/linkz1.jpg"
border="0" width="58"height="37"
name="austausch5"></a></td>
        <td>
            <img src="Bilder/index-28.jpg" width="9" height="37" alt=""></td>
        <td colspan="3">
            <a href="gbook.html"
onmouseover="austausch6.src='bilder/gbook2.jpg';"
onmouseout="austausch6.src='bilder/gbook1.jpg';">
<img src="bilder/gbook1.jpg"
border="0" width="79"height="37"
name="austausch6"></a></td>
        <td>
            <img src="Bilder/index-30.jpg" width="6" height="37" alt=""></td>
        <td>
            <a href="board.html"
onmouseover="austausch7.src='bilder/board2.jpg';"
onmouseout="austausch7.src='bilder/board1.jpg';">
<img src="bilder/board1.jpg"
border="0" width="71"height="37"
name="austausch7"></a></td>
        <td colspan="2">
            <img src="Bilder/index-32.jpg" width="8" height="37" alt=""></td>
        <td colspan="3">
            <a href="contact.html"
onmouseover="austausch8.src='bilder/contact2.jpg';"
onmouseout="austausch8.src='bilder/contact1.jpg';">
<img src="bilder/contact1.jpg"
border="0" width="88"height="37"
name="austausch8"></a></td>
        <td>
            <img src="Bilder/index-34.jpg" width="3" height="37" alt=""></td>
        <td height="37" nowrap></td>
    </tr>
    <tr>
        <td colspan="21" rowspan="3">
            <img src="Bilder/index-35.jpg" width="397" height="45" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index-36.jpg" width="105" height="3" alt=""></td>
        <td height="3" nowrap></td>
    </tr>
    <tr>
        <td>
            <script type="text/javascript" src="http://fc.webmasterpro.de/counter.php?name=cundf&amp;style=pre&amp;p=28dark&amp;w=79&amp;h=19&amp;show=h"></script>
<noscript><div><img src="http://fc.webmasterpro.de/as_noscript.php?name=cundf" style="width:1px;height:1px;" alt="" /></div></noscript></td>
        <td rowspan="2">
            <img src="Bilder/index-38.jpg" width="26" height="42" alt=""></td>
        <td height="20" nowrap></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index-39.jpg" width="79" height="22" alt=""></td>
        <td height="22" nowrap></td>
    </tr>
    <tr>
        <td width="214" nowrap></td>
        <td width="2" nowrap></td>
        <td width="25" nowrap></td>
        <td width="30" nowrap></td>
        <td width="1" nowrap></td>
        <td width="26" nowrap></td>
        <td width="2" nowrap></td>
        <td width="11" nowrap></td>
        <td width="2" nowrap></td>
        <td width="56" nowrap></td>
        <td width="9" nowrap></td>
        <td width="33" nowrap></td>
        <td width="15" nowrap></td>
        <td width="31" nowrap></td>
        <td width="6" nowrap></td>
        <td width="71" nowrap></td>
        <td width="3" nowrap></td>
        <td width="5" nowrap></td>
        <td width="11" nowrap></td>
        <td width="45" nowrap></td>
        <td width="32" nowrap></td>
        <td width="3" nowrap></td>
        <td width="2" nowrap></td>
        <td width="3" nowrap></td>
        <td width="79" nowrap></td>
        <td width="26" nowrap></td>
        <td></td>
    </tr>
</table>
</body>
</html>

dlogic · 28.04.2010

AW: Mouseover Effekt geht nicht

1. Eine einheitliche Schreibweise realisieren, da der Server u.U. case-sensitive sein kann (also Bilder oder bilder? sind dann zwei unterschiedliche Sachen)

2. Änder die Beziechung von Bilder wie: "index-08.jpg" zu index_08.jpg, da es ebenfalls eine Server Einstellung sein kann welche Dateinamen mit Bindestrich unterbindet... (zweimal binde... schieße... *fg*)

3. Schau doch einfach mal bei deinem Provider in die FAQ

cundf2010 · 28.04.2010

AW: Mouseover Effekt geht nicht

Vielen Dank!

Es hat 100%ig geklappt!

Es lag an ehrlich an der Schreibweise von Bilder bzw. bilder.

Wegen dem Bindestrich anstatt dem Unterstrich habe ich jetzt keine Probleme bemerkt aber ich werde dies auch noch ändern kann ja nicht schaden

Also nochmal vielen Dank!

AlexanderBo · 28.04.2010

AW: Mouseover Effekt geht nicht

jaja... die unzulänglichkeiten von win bzgl. GROSS/kleinschreibung ;-)

a b e r:
die basisfunktion einer page und dazu gehört auch so ein "einfaches" menue
(wie hier) wo bilder ausgetauscht werden sollte (und braucht) kein JavaScript!

denk an die vielen leute die JS per se oder durch noscript+ co geblockt haben.

mach dich mit xhtml und css vertraut
da kann man das alles ohne JS und für alle realisieren ;-)

p.s.
auch nch hilfreich ist little boxes