|
||||
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> 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> LG - Lilly
__________________
Wenn Dir das Leben einen Zitrone schenkt, dann mache Limonade daraus! |
Sponsored Links |
|
|||
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" /> Geändert von Lord-Sfx (05.04.2009 um 19:32 Uhr) |
Sponsored Links |
|
||||
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! |
|
||||
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! |
|
||||
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.
|
|
|||
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.
__________________
Webdesign Portfolio Webdesign aus Berlin: Webdesign Portfolio Berlin Referenzen Webdesign Berlin |
|
||||
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! |
|
|||
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 =)
__________________
Webdesign Portfolio Webdesign aus Berlin: Webdesign Portfolio Berlin Referenzen Webdesign Berlin |
Sponsored Links |
|
|||
Zitat:
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" />
__________________
CSS-Rauch! Nicht einatmen! Geändert von RoToRa (08.04.2009 um 12:17 Uhr) |
Sponsored Links |
|
|
Ä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 |