zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Hover Grafik läuft nicht...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.04.2009, 12:24
Benutzerbild von lilly246
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 13
lilly246 befindet sich auf einem aufstrebenden Ast
Standard Hover Grafik läuft nicht...

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
__________________
Wenn Dir das Leben einen Zitrone schenkt, dann mache Limonade daraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2009, 20:29
Neuer Benutzer
neuer user
 
Registriert seit: 03.10.2007
Beiträge: 10
Lord-Sfx befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Lord-Sfx (05.04.2009 um 20:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.04.2009, 22:30
Benutzerbild von lilly246
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 13
lilly246 befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
Wenn Dir das Leben einen Zitrone schenkt, dann mache Limonade daraus!
Mit Zitat antworten
  #4 (permalink)  
Alt 06.04.2009, 09:19
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.04.2009, 18:28
Benutzerbild von lilly246
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 13
lilly246 befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
Wenn Dir das Leben einen Zitrone schenkt, dann mache Limonade daraus!
Mit Zitat antworten
  #6 (permalink)  
Alt 07.04.2009, 18:35
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.04.2009, 20:37
webdesign-portfolio.de
neuer user
 
Registriert seit: 06.04.2009
Ort: Berlin
Beiträge: 58
sirgismo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 07.04.2009, 20:47
Benutzerbild von lilly246
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 13
lilly246 befindet sich auf einem aufstrebenden Ast
Standard

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???
__________________
Wenn Dir das Leben einen Zitrone schenkt, dann mache Limonade daraus!
Mit Zitat antworten
  #9 (permalink)  
Alt 08.04.2009, 04:22
webdesign-portfolio.de
neuer user
 
Registriert seit: 06.04.2009
Ort: Berlin
Beiträge: 58
sirgismo befindet sich auf einem aufstrebenden Ast
Standard

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 =)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.04.2009, 13:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

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
__________________
CSS-Rauch! Nicht einatmen!

Geändert von RoToRa (08.04.2009 um 13:17 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:40 Uhr.