Hover Grafik läuft nicht...

lilly246 · #1 (**permalink**) 05.04.2009, 11:24

Hallo zusammen!

Ich möchte einen Photoblog gestalten. Fotos sollen auf der Index zu den einzelnen Galerien führen. Die Fotos auf der Index sind schwarz/weiß und sollen bei a hover in Farbe dargestellt werden. Aber funktioniert leider nicht.

www.die-schoenwaelders.de

Habe den Hovereffekt jetzt erstmal nur für das Bild 2004 gemacht. Also nicht wundern, alle anderen Bilder sind nicht verlinkt.

Code für Bild 2004:

HTML-Code:

<a href="2004.htm"><img alt="Fotos 2004" src="Bilder/img2004.jpg" onmouseover="Bilder/2004hover.jpg'" onmouseout="2004hover.jpg'" border="0"></a>

kompletter Code:

HTML-Code:

<html>
<head>
<title>die-Schoenwaelders.de - Photoblog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<table id="Tabelle_01" width="1424" height="981" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="200" height="980" rowspan="4">
			<img src="Bilder/Abstandhalter.gif" width="200" height="980" alt=""></td>
		<td colspan="6">
			<a href="index.html"><img src="Bilder/header.jpg" width="1024" height="265" alt=""></a></td>
  <td width="200" height="980" rowspan="4">
			<img src="Bilder/Abstandhalter.gif" width="200" height="980" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
            <a href="2004.htm"><img alt="Fotos 2004" src="Bilder/img2004.jpg" onmouseover="Bilder/2004hover.jpg'" onmouseout="2004hover.jpg'" border="0"></a>
            </td>
  <td colspan="2">
			<img src="Bilder/img2005.jpg" width="215" height="305" alt=""></td>
		<td colspan="2">
			<img src="Bilder/img2006.jpg" width="409" height="305" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/img2007.jpg" width="349" height="349" alt=""></td>
		<td colspan="4">
			<img src="Bilder/img2008.jpg" width="304" height="349" alt=""></td>
		<td>
			<img src="Bilder/img2009.jpg" width="371" height="349" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="Bilder/imgimpressum.jpg" width="466" height="61" alt=""></td>
		<td colspan="3">
			<img src="Bilder/imgpk.jpg" width="558" height="61" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="200" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="349" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="51" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="66" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="149" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="38" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="371" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="200" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Wäre nett, wenn mir jemand helfen könnte!

LG - Lilly

Lord-Sfx · #2 (**permalink**) 05.04.2009, 19:29

Wenn du Events (onmouseover etc.) festlegst, musst du dem Browser auch sagen, was er machen soll. Wenn du ihm einfach nur den Pfad zum Bild übergibst, weiß er nicht, was er machen soll.

Ich würde mit Javascript dann sowas machen:

Code:

<img src="Bilder/img2004.jpg" id="Bild"  onmouseover="javascript:document.getElementById('Bild').src='Bilder/2004hover.jpg'" onmouseout="javascript:document.getElementById('Bild').src='Bilder/img2004.jpg'" border="0" alt="Fotos2004" />

Du musst beachten, dass du jedem Bild eine neue id gibst.

lilly246 · #3 (**permalink**) 05.04.2009, 21:30

Ja super! Vielen Dank! Hab den vorherigen Code aus einem Tutorial. Aber jetzt klappt es!!

Aber im IE hab ich einen kleinen Bug. Da läuft ein kleiner Spalt zwischen meinen Tabellen. Hast Du dazu auch eine Idee? *liebguck*

LG - Lilly
www.die-schoenwaelders.de

uspri · #4 (**permalink**) 06.04.2009, 08:19

Gib mal den Images in den td allen ein display: block mit, dann ist der Spalt weg, zumindestens bei mir im IE6, mehr hab ich grad nicht getestet.

Images sind normalerweise Inline-Elemente und liegen daher auf der sogenannten Baseline. Bei Text gibt es ja diese Unterlängen (z.B. gj) und auf der normalen Baseline liegen die Images, also bleibt die Unterlänge leer und das dürfte diese Spalte ergeben.

lilly246 · #5 (**permalink**) 07.04.2009, 17:28

Danke für Deine Hilfe Uspri! Konnte es nur auf die Schnelle mal ausprobieren. Und im IE fing dann der Header ziemlich an zu zappeln und zu springen. Aber vielleicht hab ich auch nen Fehler reingebaut. Momentan laufen die Vorbereitungen auf Ostern, da fehlt mir etwas die Zeit.

Hoffe ich darf mich nochmal melden, wenn es nicht klappen sollte...

LG - Lilly

uspri · #6 (**permalink**) 07.04.2009, 17:35

Was mir grad noch aufgefallen ist: Kann es sein, dass Du nen Widescreen-Monitor hast? Ich habe nen normalen 4:3 und da klebt der Inhalt am rechten Rand. Lass doch einfach die beiden äußeren Spalten weg und zentriere das Ganze, dann schaut es auch besser aus. Ansonsten allen Bilder das display: block; geben, dann dürfte da eigentlich nichts zappeln.

sirgismo · #7 (**permalink**) 07.04.2009, 19:37

ja ich habs mir auch bei 16:10 und 4:3 angeschaut. 4:3 klebt es rechts, warum machst du das ganze nicht per image map und css? ist doch wahrscheinlich einfacher, und du könntest auf die tabellen verzichten.

denn wenn du das per mouseover auf die tabelle anwendest switcht er bei mir auch wenn ich nur die zelle wechsel und mich immer noch im schwarzen bereich befinde.

lilly246 · #8 (**permalink**) 07.04.2009, 19:47

Hi zusammen!

Ja hab Widescreen... Das Problem hab ich nicht gesehen...

Ich hab das Design mit Photoshop erstellt und dann gesliced. Das ausgeworfene html hab ich übernommen. Image Map kenne ich nicht.
Würde es gerne mit CSS machen, hab es auch versucht, aber die rechten Boxen setzen sich immer links untendrunter. Bin in CSS nicht so ein Crack. Und da es mit den Tabellen so geklappt hat war es für mich okay.
Auf der Seite soll es auch nur Bilder geben und von daher dachte ich mir, Tabellen sind nicht schlimm, da ja Tante Google keinen Text auslesen muß. Oder denke ich da falsch???

sirgismo · #9 (**permalink**) 08.04.2009, 03:22

nun ja ich sehe das boxenproblem nicht, würde aber einfach die tabelle mit 100% mittig zentrieren, im notfall noch n div mit max widht drum rum legen. denke für ne kleine private seite brauchste das auch nicht, selfhtml und css4you sind aber n guter start in die gestaltung ohne tabellen und mit css.

was google betrifft: google sieht alles ,) auch bildnamen, alt und title attribute, aber ich glaube kaum das du die seite suchmaschinenoptimieren willst =)

RoToRa · #10 (**permalink**) 08.04.2009, 12:05

Zitat:

Code:

<img src="Bilder/img2004.jpg" id="Bild"  onmouseover="javascript:document.getElementById('Bild').src='Bilder/2004hover.jpg'" onmouseout="javascript:document.getElementById('Bild').src='Bilder/img2004.jpg'" border="0" alt="Fotos2004" />

Du musst beachten, dass du jedem Bild eine neue id gibst.

Zwei Kurze Anmerkungen dazu:
1) In Event-Handler-Attribute wie onclick, onmouseover, etc. gehört kein "javascript:".
2) In den Event-Handler kann man das aktuelle Element mit "this" ansprechen, so dass es unnötig ist jedem Element (Bild) eine ID zu geben und darüber anzusprechen:

Code:

<img src="Bilder/img2004.jpg" onmouseover="this.src='Bilder/2004hover.jpg'" onmouseout="this.src='Bilder/img2004.jpg'" border="0" alt="Fotos2004" />

Robin

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
Problem mit CSS Menü	SMundt	CSS	9	07.01.2009 19:12
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 14:40