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

Javascript rollover image -2

Status
Für weitere Antworten geschlossen.
Mario348

Mario348

Neues Mitglied
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="navigation.css">
<link rel="shortcut icon" href="[URL]http://www.arudc.ch/favicon.ico[/URL]">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="[URL="http://www.arudc.ch/"]http://www.arudc.ch[/URL]">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<frame src="navigation2.html" border="0" scrolling="auto">
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:28px;}
img {border:0px;}
</style> 
</head>
<body>
<style type="text/css">
    a.menu {
        background:URL('2.png');
    }
    a.menu:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu1 {
        background:URL('3.png');
    }
    a.menu1:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu2 {
        background:URL('4.png');
    }
    a.menu2:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu3 {
        background:URL('5.png');
    }
    a.menu3:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu4 {
        background:URL('6.png');
    }
    a.menu4:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
   a.menu5 {
        background:URL('7.png');
    }
    a.menu5:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu6 {
        background:URL('9.png');
    }
    a.menu6:hover {
        background:URL('buttonfarbverlauf2.jpg);
    }
    a.menu7 {
        background:URL('10.png');
    }
    a.menu7:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu8 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu8:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu9 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu9:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu10 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu10:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu11 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu11:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
</style>
<img src="Website/buttonfarbverlauf.jpg" onMouseOver="wegblend2()"; onMouseOut="reinblend2()";>
 
<br>
<a href="2.html" target="mitte.html" class="menu"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="3.html" target="mitte.html" class="menu1"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="4.html" target="mitte.html" class="menu2"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="5.html" target="mitte.html" class="menu3"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="6.html" target="mitte.html" class="menu4"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="7.html" target="mitte.html" class="menu5"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="9.html" target="mitte.html" class="menu6"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="10.html" target="mitte.html" class="menu7"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="remote.html" target="mitte.html" class="menu8"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="[URL="http://578049.guestbook.onetwomax.de/"]Unser Gästebuch[/URL]" target="mitte.html" class="menu9"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="newsletter.html" target="mitte.html" class="menu10"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="impressum.html" target="mitte.html" class="menu11"><img src="transparent.gif" width="250" height="28"/></a>
<br>
</body>
</html>

Es funktioniert immer noch nicht.
Ich habe auch bereits die Buttons mit einem anderen Farbverlauf für den rollover - Effekt gemacht.

Die Navigation soll gleich wie die momentane Navigation auf meiner Homepage (ohne deren Layout) aussehen.
 
Dann muss ich beispielsweise
Code: 
a.menu8 {
        background:URL('buttonfarbverlauf1.jpg');
    }

durch


Code: 
a.menu8 {
        background[COLOR=red]-image[/COLOR]:URL('buttonfarbverlauf1.jpg');
    }

ersetzen ?

Was soll das eigendlich bewirken ?
 
Mario348 schrieb:
Was soll das eigendlich bewirken ?
Zum Vergrößern anklicken....
Vermutlich nichts, background reicht normalerweise überall aus.
So wie ich das auf die Schnelle sehe kann das Problem nur an der gif-Grafik liegen, die innerhalb das Links liegt. Ist die mit Sicherheit so wie sie sein soll?

Nebenbei: <style></style> gehört in den head, nicht in den body.
 
Ich weiß nicht, was du mit Beispiel meinst aber wozu ist das gif-Bild überhaupt da, um die Linkgröße passend zu machen?
Falls ja ist es so besser (und müsste funktionieren):
Code: 
<style type="text/css">
  #links a { /*Display-Eigenschaften für alle Links*/
    display:block;
    height:28px;
    width:250px;
  }
  #links a:hover { /*Hover für alle Links*/
    background:URL('buttonfarbverlauf2.jpg');
  }
  a.menu { /*Hintergrundbild für jeden Link auf diese Art definieren (also so, wie es schon ist*/
    background:URL('2.png');
  }
  /*Und so weiter*/
</style>

<!-- Code bis zu den Links -->

<div id="links">
 <!-- Hier die Links (ohne die Bilder) -->
</div>
Ich hoffe, ich hab mich nicht zu unverständlich ausgedrückt ;)

Hier gibts ein konkretes Beispiel, das in etwa auf diese Weise gelöst ist.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="navigation.css">
<link rel="shortcut icon" href="[URL]http://www.arudc.ch/favicon.ico[/URL]">
<meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
<meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
<meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
<meta name="title" content="Alles rund um den Computer">
<meta name="language" content="German, de, deutsch">
<meta name="author" content="Mario Bienz">
<meta name="publisher" content="arudc.ch">
<meta name="copyright" content="arudc.ch">
<meta name="revisit-after" content="after 20 days">
<meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
<meta name="page-type" content="Gratisdownloads & Tips">
<meta name="audience" content="alle">
<meta name="robots" content="index,follow">
<meta name="generator" content="[URL="http://www.arudc.ch/"]http://www.arudc.ch[/URL]">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<frame src="navigation2.html" border="0" scrolling="auto">
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:28px;}
img {border:0px;}
</style> 
</head>
<body>
<style type="text/css">
    a.menu {
        background:URL('2.png');
    }
    a.menu:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu1 {
        background:URL('3.png');
    }
    a.menu1:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu2 {
        background:URL('4.png');
    }
    a.menu2:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu3 {
        background:URL('5.png');
    }
    a.menu3:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu4 {
        background:URL('6.png');
    }
    a.menu4:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
   a.menu5 {
        background:URL('7.png');
    }
    a.menu5:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu6 {
        background:URL('9.png');
    }
    a.menu6:hover {
        background:URL('buttonfarbverlauf2.jpg);
    }
    a.menu7 {
        background:URL('10.png');
    }
    a.menu7:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu8 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu8:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu9 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu9:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu10 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu10:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
    a.menu11 {
        background:URL('buttonfarbverlauf1.jpg');
    }
    a.menu11:hover {
        background:URL('buttonfarbverlauf2.jpg');
    }
</style>
<img src="Website/buttonfarbverlauf.jpg" onMouseOver="wegblend2()"; onMouseOut="reinblend2()";>

<br>
<a href="2.html" target="mitte.html" class="menu"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="3.html" target="mitte.html" class="menu1"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="4.html" target="mitte.html" class="menu2"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="5.html" target="mitte.html" class="menu3"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="6.html" target="mitte.html" class="menu4"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="7.html" target="mitte.html" class="menu5"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="9.html" target="mitte.html" class="menu6"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="10.html" target="mitte.html" class="menu7"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="remote.html" target="mitte.html" class="menu8"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="[URL="http://578049.guestbook.onetwomax.de/"]Unser Gästebuch[/URL]" target="mitte.html" class="menu9"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="newsletter.html" target="mitte.html" class="menu10"><img src="transparent.gif" width="250" height="28"/></a>
<br>
<a href="impressum.html" target="mitte.html" class="menu11"><img src="transparent.gif" width="250" height="28"/></a>
<br>
</body>
</html>
Es funktioniert immer noch nicht.
Ich habe auch bereits die Buttons mit einem anderen Farbverlauf für den rollover - Effekt gemacht.

Die Navigation soll gleich wie die momentane Navigation auf meiner Homepage (ohne deren Layout) aussehen
 
versuch das:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="navigation.css">
        <link rel="shortcut icon" href="http://www.arudc.ch/favicon.ico">
        <meta name="keywords" content="Downloads, Tips, neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, Gästebuch, Maps, Remote">
        <meta name="description" content="Kostenlose Downloads und Tips f&uuml;r den PC. Rubriken: neuste RADEON-Grafikkartentreiber, Windows Vista-Infos, Viren und Malware, Stressabbau-Downloads , Musik, Browser-Downloads , Webradio, G&auml;stebuch, Maps, Remote ">
        <meta name="DC.Description" content="Kostenlose Downloads und Tips f&uuml;r den PC. ">
        <meta name="title" content="Alles rund um den Computer">
        <meta name="language" content="German, de, deutsch">
        <meta name="author" content="Mario Bienz">
        <meta name="publisher" content="arudc.ch">
        <meta name="copyright" content="arudc.ch">
        <meta name="revisit-after" content="after 20 days">
        <meta name="page-topic" content="Kostenlose Downloads und Tips f&uuml;r den PC">
        <meta name="page-type" content="Gratisdownloads & Tips">
        <meta name="audience" content="alle">
        <meta name="robots" content="index,follow">
        <meta name="generator" content="http://www.arudc.ch">
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <!-- Was ist das denn bitte: <frame src="navigation2.html" border="0" scrolling="auto"> -->
        <style type="text/css">
            html {
                overflow-x:hidden;
            }
            body {
                margin-right:28px;
            }
            img {
                border:0px;
            }
            #menu a {
                display:block;
                width:28px;
                height:180px;
            }
            #menu a:hover {
                background:URL('buttonfrabverlauf2.jpg');
            }
            a.menu {
                background:URL('2.png');
            }
            a.menu1 {
                background:URL('3.png');
            }
            a.menu2 {
                background:URL('4.png');
            }
            a.menu3 {
                background:URL('5.png');
            }
            a.menu4 {
                background:URL('6.png');
            }
            a.menu5 {
                background:URL('7.png');
            }
            a.menu6 {
                background:URL('9.png');
            }
            a.menu7 {
                background:URL('10.png');
            }
            a.menu8 {
                background:URL('buttonfarbverlauf1.jpg');
            }
            a.menu9 {
                background:URL('buttonfarbverlauf1.jpg');
            }
            a.menu10 {
                background:URL('buttonfarbverlauf1.jpg');
            }
            a.menu11 {
                background:URL('buttonfarbverlauf1.jpg');
            }
        </style> 
    </head>
    <body>
        <img src="Website/buttonfarbverlauf.jpg" onMouseOver="wegblend2()"; onMouseOut="reinblend2()";>

        <div id="links">
            <a href="2.html" target="mitte.html" class="menu"></a><br>
            <a href="3.html" target="mitte.html" class="menu1"></a><br>
            <a href="4.html" target="mitte.html" class="menu2"></a><br>
            <a href="5.html" target="mitte.html" class="menu3"></a><br>
            <a href="6.html" target="mitte.html" class="menu4"></a><br>
            <a href="7.html" target="mitte.html" class="menu5"></a><br>
            <a href="9.html" target="mitte.html" class="menu6"></a><br>
            <a href="10.html" target="mitte.html" class="menu7"></a><br>
            <a href="remote.html" target="mitte.html" class="menu8"></a><br>
            <a href="Unser Gästebuch" target="mitte.html" class="menu9"></a><br>
            <a href="newsletter.html" target="mitte.html" class="menu10"></a><br>
            <a href="impressum.html" target="mitte.html" class="menu11"></a>
        </div>
    </body>
</html>
 
Ja, das kannst du löschen. Hab mich nur gewundert warum da nen Frame im head steht.

Was ich verändert hab siehst du am besten, wenn du die Codes vergleichst ;)

Gehts denn so?
 
stimmt, hatten Fehler drin, das hier:
Code: 
#menu a {
  display:block;
  width:28px;
  height:180px;
}
#menu a:hover {
  background:URL('buttonfrabverlauf2.jpg');
}
muss durch das hier ersetzt werden:
Code: 
#links a {
  display:block;
  width:28px;
  height:180px;
}
#links a:hover {
  background:URL('buttonfarbverlauf2.jpg');
}
 
Das ist ja schrecklich :shock: !!!

Ich möchte "buttonfarbverlauf.jpg" als Button- und Framehintergrund.
Beim hover-effekt soll "buttonfarbverlauf2.jpg" erscheinen.

So wie auf meiner Homepage einfach mit Buttons !
 
öhhm der Code steht doch oben, du musst ihn nur kopieren und dein bild einsetzen...?

Schonmal was von eigeninitiative gehört?
 
ok da ist ein Beispiel
Code: 
#links a {
  display:block;
  width:28px;
  height:180px;
}
#links a:hover {
  background:URL('buttonfarbverlauf2.jpg');
}
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben