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

Javascript rollover image -2

Status
Für weitere Antworten geschlossen.
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;
            }
            #links a {
            display:block;
            width:28px;
           height:180px;
           }
           #links a:hover {
           background:URL('buttonfarbverlauf2.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>

Was ist daran falsch ???
 
Code: 
#links a:hover {
background:URL('buttonfarbverlauf2.jpg');
}
a.menu {
background:URL('2.png');
}

das ist falsch...

#links a:hover steht vor a.menu, also überschreibt a.menu den wert von #links a:hover, und somit gibt es keinen definierten hover mehr für die links
 
Hab's jetzt korrigiert, stimmt hoff ich ! :mrgreen:

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;
            }
            #links a {
            display:block;
            width:28px;
           height:180px;
           }
            a.menu {
                background:URL('2.png');
            }
           #links a:hover {
           background:URL('buttonfarbverlauf2.jpg');
           }
            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>

Jedoch sind die Buttons viel zu schmal, jeder Button kommt ausserdem ca. 6 Mal untereinander vor, was ist da los ?!
 
Code: 
#links a {
  display:block;
  width:28px;
  height:180px;
}
du hast width und height vertauscht, umdrehen und es müsste passen
 
Der rollover - effekt funktioniert noch nicht !

Probier's mal bei dir im Browser !


Die Navigation sollte zuletzt wie auf meiner Homepage aussehen, einfach mit Buttons.
 
Zuletzt bearbeitet:
Ich wollts eigentlich im letzten Beitrag ernwähnt haben, habs aber vergassen:
Code: 
#links a:hover {
  background:URL('buttonfarbverlauf2.jpg');
}
sollte am besten nach ganz unten (die Frage nach dem warum hat Frank weiter vorne schon beantwortet)
ich kann das schlecht probieren ohne die Bilder zu haben
 
Das hier
Code: 
<!-- Was ist das denn bitte: <frame src="navigation2.html" border="0" scrolling="auto"> -->
kann ich dann wohl auch löschen.
Möchte aber trotzdem autoscrolling, dann kann ich ja einfach

Code: 
<scrolling="auto">
schreiben, oder ?

Ausserdem möchte ich noch die Buttons zentrieren.
 
das sollte jetzt alles erfüllen, das scrolling="auto" müsste ins Frame-Tag im Frameset.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <title>...</title>
        <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 &amp; 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">
        <style type="text/css">
    html {
        overflow:auto;
        overflow-x:hidden;
    }
    body {
        margin-right:28px;
        background:URL('buttonfarbverlauf.jpg');
          }
          img {
        border:0px;
          }
          #links a {
        display:block;
        width:248px;
        height:23px;
        background:URL('buttonfarbverlauf_250.jpg');
        font-family:Arial, Verdana, Helvetica, sans-serif;
        font-size:16px;
        text-decoration:none;
        padding-left:2px;
        padding-top:5px;
        margin:auto;
          }
          #links a:hover {
        background:URL('buttonfarbverlauf2_250.jpg');
          }
        </style> 
    </head>
    <body>
        <img src="buttonfarbverlauf.jpg" onMouseOver="wegblend2();" onMouseOut="reinblend2();" alt="">

        <div id="links">
            <a href="2.html" target="mitte.html">Neueste Radeon Grafikkarten</a><br>
            <a href="3.html" target="mitte.html">Windows-Vista Infos</a><br>
            <a href="4.html" target="mitte.html">Viren und Malware</a><br>
            <a href="5.html" target="mitte.html">Stressabbau Downloads</a><br>
            <a href="6.html" target="mitte.html">Musik</a><br>
            <a href="7.html" target="mitte.html">Browser Downloads</a><br>
            <a href="9.html" target="mitte.html">Webradio</a><br>
            <a href="10.html" target="mitte.html">Maps</a><br>
            <a href="remote.html" target="mitte.html">Remote</a><br>
            <a href="Gaestebuch" target="mitte.html">Gästebuch</a><br>
            <a href="newsletter.html" target="mitte.html">Newsletter</a><br>
            <a href="impressum.html" target="mitte.html">Impressum</a>
        </div>
    </body>
</html>
 
habs grad nochmal getestet, der IE hats tatsächlich linksbündig angezeigt :-?

So gehts jetzt auch da
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <title>...</title>
        <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 &amp; 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">
        <style type="text/css">
            html {
                overflow:auto;
                overflow-x:hidden;
            }
            body {
                margin-right:28px;
                background:URL('buttonfarbverlauf.jpg');
                text-align:center;
            }
            img {
                border:0px;
            }
            #links a {
                display:block;
                width:248px;
                height:23px;
                background:URL('buttonfarbverlauf_250.jpg');
                font-family:Arial, Verdana, Helvetica, sans-serif;
                font-size:16px;
                text-decoration:none;
                padding-left:2px;
                padding-top:5px;
                margin:auto;
                text-align:left;
            }
            #links a:hover {
                background:URL('buttonfarbverlauf2_250.jpg');
            }
        </style> 
    </head>
    <body>
        <img src="buttonfarbverlauf.jpg" onMouseOver="wegblend2();" onMouseOut="reinblend2();" alt="">

        <div id="links">
            <a href="2.html" target="mitte.html">Neueste Radeon Grafikkarten</a><br>
            <a href="3.html" target="mitte.html">Windows-Vista Infos</a><br>
            <a href="4.html" target="mitte.html">Viren und Malware</a><br>
            <a href="5.html" target="mitte.html">Stressabbau Downloads</a><br>
            <a href="6.html" target="mitte.html">Musik</a><br>
            <a href="7.html" target="mitte.html">Browser Downloads</a><br>
            <a href="9.html" target="mitte.html">Webradio</a><br>
            <a href="10.html" target="mitte.html">Maps</a><br>
            <a href="remote.html" target="mitte.html">Remote</a><br>
            <a href="Gaestebuch" target="mitte.html">Gästebuch</a><br>
            <a href="newsletter.html" target="mitte.html">Newsletter</a><br>
            <a href="impressum.html" target="mitte.html">Impressum</a>
        </div>
    </body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben