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

Javascript rollover image

Status
Für weitere Antworten geschlossen.
Mario348

Mario348

Neues Mitglied
Ich verwende für die Buttonnavigation das Hintergrundbild "buttonfarbverlauf.jpg"
Ich möchte gern, dass die Buttons beim mouseover das Hintergrundbild "buttonfarbverlauf2.jpg" annehmen.

Habe im Internet Javascripts gefunden, konnte diese jedoch nicht anpassen.
 
Eine Zeile JS-Code pro Bild :wink:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    <head>
        <title>...</title>        
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
            //<![CDATA[
                function rollover(ort, bild) {
                    ort.src = bild;
                }
            //]]>
        </script>
    </head>
    <body>
        <img src="bild1.jpg" alt="" onmouseover="rollover(this, 'bild2.jpg');" onmouseout="rollover(this, 'bild1.jpg');" />
    </body>
</html>

EDIT:
Ups, geht um Hintergründe
hätte erst lesen sollen, ist aber fast genau so einfach (ohne JS)

EDIT2:
so gehts:
HTML: 
<style type="text/css">
    a.menu {
        background:URL('farbverlauf1.jpg');
    }
    a.menu:hover {
        background:URL('farbverlauf2.jpg');
    }
</style>
...
<a class="menu">Home</a>
 
Zuletzt bearbeitet von einem Moderator:
Ich war ein bischen durcheinander, hab irgendwie gedacht, dass du es dort als Selektor verwendet hast, ich sollte mal zum Augenarzt.:-P
 
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[/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
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben