Ergebnis 1 bis 7 von 7
Thema: Hoverimage in Tabelle
-
18-01-2013, 15:28 #1
Grünschnabel
- registriert
- 18-01-2013
- Beiträge
- 4
Hoverimage in Tabelle
Hallo,
habe ein Problem mit Hovergrafiken bzw. mit dem überblenden.
Habe ein Buttonmenü in meiner Homepage und will, wenn man mit der Maus über die Buttons fährt, das die Grafik sich austauscht.
Anstelle das sich der Button austauscht, tauscht sich nur das Banner.
Das Austauschen der Buttons verschiebt sich immer um genau ein Bild nach vorne.
Ist meine erste Homepage und den Code für den Hover habe ich von selfhtml.org mit Anleitung.
Habt also Nachsicht für einen Anfänger
So, hier der Code:
HTML-Code:
HTML-Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="expires" content="0"> <meta name="author" content="Al. S."> <meta name="description" content="Ein Projekt von Al. S."> <meta name="keywords" lang="" content="Al, hobbyschmied"> <meta name="generator" content="Al. S."> <link rel="stylesheet" type="text/css" href="http://forum.jswelt.de/images/s.css"> <link rel="stylesheet" type="text/css" href="http://forum.jswelt.de/images/ssb.css"> <title>Al, die Webseite</title> <script type="text/javascript"> Normal1 = new Image(); Normal1.src = "http://forum.jswelt.de/images/home.png"; /* erste Standard-Grafik */ Highlight1 = new Image(); Highlight1.src = "http://forum.jswelt.de/images/homeg.png"; /* erste Highlight-Grafik */ Normal2 = new Image(); Normal2.src = "http://forum.jswelt.de/images/per.png"; /* zweite Standard-Grafik */ Highlight2 = new Image(); Highlight2.src = "http://forum.jswelt.de/images/mail.png"; /* zweite Highlight-Grafik */ /* usw. fuer alle weiteren zu benutzenden Grafiken */ function Bildwechsel (Bildnr, Bildobjekt) { window.document.images[Bildnr].src = Bildobjekt.src; } </script> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" background="http://forum.jswelt.de/images/background.png" bgcolor="#cccccc" text="#000000" link="#000000" vlink="#000000" alink="#000000" bottommargin="0" rightmargin="0"> <br> <!-- Headerbild --> <center> <img src="http://forum.jswelt.de/images/header.png" border="0"> </center> <center> <table cellpadding="0" cellspacing="0"> <tr> <td><a><img src="http://forum.jswelt.de/images/pixel.gif" width="10" height="20" alt="" border="0"></a></td> </tr> </table> </center> <!-- Buttonenmenü 1 --> <center> <table cellpadding="0" cellspacing="0"> <tr> <td><a href="index.html" onmouseover="Bildwechsel(0, Highlight1)" onmouseout="Bildwechsel(0, Normal1)"><img src="http://forum.jswelt.de/images/home.png" alt="Home" border="0" height="167" width="167"></a><a><img src="http://forum.jswelt.de/images/pixel.gif" width="167" height="167" alt="" border="0"></a><a href="index-2.html" onmouseover="Bildwechsel(1, Highlight2)" onmouseout="Bildwechsel(1, Normal2)"><img src="http://forum.jswelt.de/images/per.png" alt="Helferlein" border="0" height="167" width="167"></a><a><img src="http://forum.jswelt.de/images/pixel.gif" width="167" height="167" alt="" border="0"></a><a href="index-6.html"><img src="http://forum.jswelt.de/images/projekt.png" width="167" height="167" alt="" border="0"></a><a><img src="http://forum.jswelt.de/images/pixel.gif" width="167" height="167" alt="" border="0"></a><a href="index-3.html"><img src="http://forum.jswelt.de/images/info.png" width="167" height="167" alt="" border="0"></a></td> </tr> </table></center>
Bin für jede Hilfe dankbar
MalzfreiGeändert von Malzfrei (18-01-2013 um 15:34 Uhr)
-
18-01-2013, 18:39 #2
AW: Hoverimage in Tabelle
CSS ist nicht wirklich schwer und dein Problem kannst du mit Hintergrundbildern komplett ohne JS im CSS lösen.
PS: zum JS-Problem: dein Bilderindex stimmt einfach nicht...
-
19-01-2013, 01:33 #3
Grünschnabel
- registriert
- 18-01-2013
- Beiträge
- 4
AW: Hoverimage in Tabelle
Geändert von Malzfrei (19-01-2013 um 01:38 Uhr)
-
19-01-2013, 13:11 #4
AW: Hoverimage in Tabelle
Du gibst denen <a>s per CSS ein Hintergrundbild (die Größe der <a>s musst du mit CSS natürlich auch richtig setzten) und über den :hover Selektor weist du das Hintergrundbild zu, das erscheinen soll, wenn man mit der maus über ein <a> geht.
-
20-01-2013, 08:44 #5
Grünschnabel
- registriert
- 18-01-2013
- Beiträge
- 4
AW: Hoverimage in Tabelle
Hi,
ich habe das ganze jetzt mit CSS gemacht, habe aber wieder das Problem das sich alles verrutscht.
Das untere BIld verrutscht immer.
Hier der Code:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Enter to Homepage</title> <style type="text/css"> #img01 { background-image: url('include/images/epage/bg.png'); width: 1000px; height: 1000px; border: none; } #img01_buttons { position:relative; top: 145px; left: 255px; float: left; border: none; } #img02_buttons { position:relative; top: 145px; left: 250px; float: left; border: none; } #img03_buttons { position:relative; top: 328px; left: 255px; float: left; border: none; } #img04_buttons { position:relative; top: 328px; left: 250px; float: left; border: none; } body { background-color: #000000; background-image: url('include/images/epage/bg.jpg') ; background-repeat:repeat-x; margin:0 0; } #clip { position:relative; top: 313px; left: -242px; float: left; border: none; } </style> </head> <body> <div align="center"> <div id="img01" align="left"> <div id="img01_buttons" align="left"> <a href="index.php" title="Zur Homepage" onmouseover="document.getElementById('button1').src='include/images/epage/home_h.png';" onmouseout="document.getElementById('button1').src='include/images/epage/home.png';"><img src="include/images/epage/home.png" alt="Homepage" border="0" id="button1" /></a><br> </div> <div id="img02_buttons" align="left"> <a href="index.php?forum" title="Zum Forum" onmouseover="document.getElementById('button2').src='include/images/epage/forum_h.png';" onmouseout="document.getElementById('button2').src='include/images/epage/forum.png';"><img src="include/images/epage/forum.png" alt="Forum" border="0" id="button2" /></a><br> </div> <div id="clip" align="left"> <img src="include/images/epage/bild.png" alt="header" border="0" id="button3" /></div> <div id="img03_buttons" align="left"> <a href="index.php?joinus" title="Join Us" onmouseover="document.getElementById('button3').src='include/images/epage/join_h.png';" onmouseout="document.getElementById('button3').src='include/images/epage/join.png';"><img src="include/images/epage/join.png" alt="Join Us" border="0" id="button3" /></a></div> <div id="img04_buttons" align="left"> <a href="index.php?fightus" title="Fight Us" onmouseover="document.getElementById('button4').src='include/images/epage/fight_h.png';" onmouseout="document.getElementById('button4').src='include/images/epage/fight.png';"><img src="include/images/epage/fight.png" alt="Fight Us" border="0" id="button4" /></a></div> </div> </div> </body> </html>
So bald man auf "joins us" mit der Maus fährt, verrutscht sich das ganze, weißt du wieso?Geändert von Malzfrei (20-01-2013 um 15:04 Uhr)
-
20-01-2013, 10:45 #6
AW: Hoverimage in Tabelle
Weil du 2 mal die selbe id verwendest!
Code:<div align="left" id="clip"> <img border="0" id="button3" alt="header" src="include/images/epage/bild.png"> </div> <div align="left" id="img03_buttons"> <a onmouseout="document.getElementById('button3').src='include/images/epage/join.png';" onmouseover="document.getElementById('button3').src='include/images/epage/join_h.png';" title="Join Us" href="index.php?joinus"> <img border="0" id="button3" alt="Join Us" src="include/images/epage/join.png"> </a> </div>
Hoffe ich konnte helfen
-
20-01-2013, 15:04 #7
Grünschnabel
- registriert
- 18-01-2013
- Beiträge
- 4
AW: Hoverimage in Tabelle
Dankeschön,
auch hier eine positive Bewertung^^
Danke nochmal an alle, kann closed.
Ähnliche Themen
-
tabelle über tabelle legen?
Von Gamer20 im Forum CSS und (X)HTMLAntworten: 12Letzter Beitrag: 02-01-2008, 15:06 -
tabelle über tabelle legen?
Von Gamer20 im Forum Serverseitige ProgrammierungAntworten: 7Letzter Beitrag: 31-12-2007, 21:33 -
Tabelle in Tabelle positionieren
Von pit im Forum CSS und (X)HTMLAntworten: 5Letzter Beitrag: 23-02-2006, 21:32 -
Anpassen von Tabelle 1 an Tabelle 2
Von DFI10X im Forum JavaScriptAntworten: 1Letzter Beitrag: 21-09-2005, 15:24 -
Tabelle
Von hedowa im Forum JavaScriptAntworten: 8Letzter Beitrag: 27-08-2002, 14:13
Lesezeichen