Änderung des Button bei Mouseover

bo-biggi

Ich wollte den Effekt erreichen, daß wenn man auf den Button klickt, sich die Farbe verändert und man auf eine andere Seite gelangt.
Im Editor funktioniert das ganze, aber wenn ich es auf diesen FTP-Server ziehe, hab ich ein Kästchen ohne Inhalt - die Bilder habe ich mit draufgezogen.
Kann mir jemand sagen, wo der Fehler liegen könnte?
Und mal wieder vielen Dank vorab

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>start</title>
<title>mouseover1</title>
<script language="JavaScript">
</script>
</head>
<body style="color: rgb(255, 0, 0); background-color: rgb(0, 0, 0);" alink="#009900" link="#33cc00" vlink="#990099">
<table style="text-align: left; width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 250px;"></td>
<td style="width: 204px; text-align: center;"></td>
<td style="width: 250px;"></td>
</tr>
<tr>
<td style="width: 250px;"></td>
<td style="width: 204px; text-align: center;"> </td>
<td style="width: 250px;"></td>
</tr>
<tr>
<td style="width: 250px;"></td>
<td style="width: 204px; text-align: center;"></td>
<td style="width: 250px;"></td>
</tr>
</tbody>
</table>

</body>
</html>

NIF7

Hi!
Wie wäre es mit der CSS-Lösung?

Code

<style type="text/css">
        .hoverimg1 img { display:block; width:120; border:0;}
        .hoverimg1 a {background:url(bild2.jpg) no-repeat; display:block; width:120;}
        .hoverimg1 a:hover img {visibility:hidden;}
        .hoverimg1 a:hover {border:0;}
        * html .hoverimg1 a {margin-right:1px;}
        * html .hoverimg1 a:hover {height:60px; margin-right:0;}
</style>


//....


<span class="hoverimg1">[url='seite2.htm'][img]bild1.jpg[/img][/url]</span>

Alles anzeigen

LG nif7

bo-biggi

Klingt gut - nur ich muß gestehen, davon hab ich mal wieder keinen Plan!
Wenn ich den Code richtig für meinen Fall umgeändert hab - woran ich ehrlichgesagt noch zweifel - verschwindet das Logo, oder?

Und wie ist das, wenn ich mehrere solcher Buttons habe, die ich beim Draufklicken abdunkeln möchte, setz ich den Code dann jeweils an die Position, wo sich dieser Button befindet?

isaBERLIN

Problem bei der CSS-Lösung : Einige Browser erkennen den ":hover" tag nicht ...

NIF7

Wenn du dein Dokument hast, setzt du es etwa so ein:

HTML

<html>
    <head>
    <title>Test</title>






    <style type="text/css"> 
            .hoverimg1 img { display:block; width:120; border:0;} 
            .hoverimg1 a {background:url(bild12.jpg) no-repeat; display:block; width:120;} 
            .hoverimg1 a:hover img {visibility:hidden;} 
            .hoverimg1 a:hover {border:0;} 
            * html .hoverimg1 a {margin-right:1px;} 
            * html .hoverimg1 a:hover {height:60px; margin-right:0;} 


            .hoverimg2 img { display:block; width:120; border:0;} 
            .hoverimg2 a {background:url(bild22.jpg) no-repeat; display:block; width:120;} 
            .hoverimg2 a:hover img {visibility:hidden;} 
            .hoverimg2 a:hover {border:0;} 
            * html .hoverimg2 a {margin-right:1px;} 
            * html .hoverimg2 a:hover {height:60px; margin-right:0;} 
    </style> 
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td>
                <span class="hoverimg1">[url='seite2.htm'][img]bild11.jpg[/img][/url]</span>
            </td>
            <td>
                <span class="hoverimg1">[url='seite3.htm'][img]bild21.jpg[/img][/url]</span>
            </td>
        </tr>
    </table>




</body>
</html>

Alles anzeigen

In diesem Falle erscheint also erst bild11/bild21 (die Bilder bild12/bild22 liegen hinter bild11/bild12, sind aber durch diese verdeckt) und wird dann bei "hover" durchsichtig gemacht, so dass die im Hintergrund liegenden Bilder freigelegt werden (es sieht dann so aus, als würde sich das erste Bild verändern). Um mehrere solche Bilder einzubinden, einfach mehrere Anweisungen schreiben (wie oben gezeigt) mit unterschiedlichen Namen (hoverimg1, hoverimg2, hoverimg3,...)
LG nif7

bo-biggi

Eine Sache ist mir jetzt leider noch nicht klar: Du redest von Bild11/21 und Bild12/22 - das wären doch somit 4 Bilder und ich hab doch nur 2
Kannst Du mir für etwas sehr Schwerfällige vielleicht noch markieren, wo ich was zu ändern habe!
Auf alle Fälle herzlichen Dank für die Hilfe!

K.Y.L.T.

Code

.hoverimg2 img { display:block; width:120; border:0;}
            .hoverimg2 a {background:url(bild22.jpg) no-repeat; display:block; width:120;}
            .hoverimg2 a:hover img {visibility:hidden;}
            .hoverimg2 a:hover {border:0;}
            * html .hoverimg2 a {margin-right:1px;}
            * html .hoverimg2 a:hover {height:60px; margin-right:0;}

das ist der CSS-Teil für jeweils ein Bild (mit verstecktem Hintergrundbild)

Code

<span class="hoverimg1">[url='seite3.htm'][img]bild21.jpg[/img][/url]</span>

dieser Teil muss in deine Anzeigebereich rein

bo-biggi

Danke, jetzt habe ich es begriffen und mit dem Editor funktioniert das ganze auch
Allerdings wenn ich es auf den FTP-Server ziehe mit den Bildern, die reinsollen, gehts wie bei dem Java-Script irgendwie nicht. Das Bild wird nicht angezeigt.
Muß man noch irgendwas besonderes beachten?

bo-biggi

Ich geb, um das Problem vielleicht mal zu erklären, mal den Link von der HP (die da kommen soll)
http://www.oiforceone.de
Der erkennt irgendwie die Bilder nicht auf der Start-Seite. Wenn ich das ganze über den Editor austeste, funktioniert es.
Falls das wichtig ist, ich bin über Strato angemeldet

jojo87

Dein Pfad scheint nicht zu stimmen. Achte auf Groß-/Kleinschreibung und versuch mal den Pfad relativ anzugeben:

Code

[img]./bilder/logo-klein.jpg[/img]

bo-biggi

Ich hab mir schon fast geahnt, daß das nur so ne blöde Kleinigkeit ist!
Ganz herzlichen Dank!!! Dieses Forum ist aber auch echt genial, daß einem da so schnell geholfen wird

Änderung des Button bei Mouseover

Tags

Benutzer online in diesem Thema