Ergebnis 1 bis 7 von 7
  1. 18-01-2013, 15:28 #1
    Malzfrei
    Malzfrei ist offline Grünschnabel
    registriert
    18-01-2013
    Beiträge
    4

    Lightbulb 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>
    Ich weiß das Tabellen nicht modern sind, ich kann jedoch (noch)kein CSS


    Bin für jede Hilfe dankbar
    Malzfrei
    Geändert von Malzfrei (18-01-2013 um 15:34 Uhr)
    Zitieren Zitieren
  2. 18-01-2013, 18:39 #2
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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...
    kkapsner.de
    Zitieren Zitieren
  3. 19-01-2013, 01:33 #3
    Malzfrei
    Malzfrei ist offline Grünschnabel
    registriert
    18-01-2013
    Beiträge
    4

    Wink AW: Hoverimage in Tabelle

    Zitat Zitat von kkapsner Beitrag anzeigen
    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...
    Hi,
    danke.
    Hast gerade eine positive Bewertung bekommen. .

    Ich habe jetzt den Bilderindex vom Bild auf die Nummer gestellt welches in der Chronologischreinfolge der Seite hat.

    Vielen Dank
    Malzfrei

    PS: Aber hast du einen Ansatz für mich wie man das in CSS lösen kann?
    Geändert von Malzfrei (19-01-2013 um 01:38 Uhr)
    Zitieren Zitieren
  4. 19-01-2013, 13:11 #4
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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.
    kkapsner.de
    Zitieren Zitieren
  5. 20-01-2013, 08:44 #5
    Malzfrei
    Malzfrei ist offline Grünschnabel
    registriert
    18-01-2013
    Beiträge
    4

    AW: Hoverimage in Tabelle

    Zitat Zitat von kkapsner Beitrag anzeigen
    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.

    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>
    Und hier das ganze online: Enter to Homepage

    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)
    Zitieren Zitieren
  6. 20-01-2013, 10:45 #6
    Avatar von miniA4kuser
    miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    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
    Zitieren Zitieren
  7. 20-01-2013, 15:04 #7
    Malzfrei
    Malzfrei ist offline 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.
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. tabelle über tabelle legen?
    Von Gamer20 im Forum CSS und (X)HTML
    Antworten: 12
    Letzter Beitrag: 02-01-2008, 15:06
  2. tabelle über tabelle legen?
    Von Gamer20 im Forum Serverseitige Programmierung
    Antworten: 7
    Letzter Beitrag: 31-12-2007, 21:33
  3. Tabelle in Tabelle positionieren
    Von pit im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 23-02-2006, 21:32
  4. Anpassen von Tabelle 1 an Tabelle 2
    Von DFI10X im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 21-09-2005, 15:24
  5. Tabelle
    Von hedowa im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 27-08-2002, 14:13

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln