zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 facher Bildwechsel mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.12.2012, 15:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 07.02.2007
Beiträge: 104
maggie befindet sich auf einem aufstrebenden Ast
Standard 2 facher Bildwechsel mit CSS

Hallo,
entstehen soll eine kleine Bildergalerie:
4 Thumbnails (je ein Graustufenbild und ein Farbbild) und ein Großbild (Farbbild) werden auf einer Seite angezeigt.
Bei Mouse-Klick soll das Thumbnail (Graustufenbild) Farbbild und das dazugehörige Großbild gezeigt werden.

Durch die 'label' Auszeichnung wird das Hintergrundbild (gewünschten Ausschnitt) anzeigen und mit der 'radio' Funktion belegt.
Allerdings wird der Radiobutton auch angezeigt.

HTML-Code:
<input id="b1" type="radio" name="thumb1"><label for="b1"><div id="b1"></label>
Warum der gewünschten Bildwechsel, durch das 'checked' des Radiobuttons nicht erfolgt ist mir unklar.
Der 2. Bildwechsel (Anzeige des Großbildes g1.png) über

Code:
#b1:checked ~ figure
klappt nicht.
Danke für Hilfe.
Maggie
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.12.2012, 16:11
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Das so winzige Codeausschnitte nicht hilfreich sind, ist dir schon klar. Doch selbst in diesem kleine Teil sind schon Fehler drin:
  • doppelte ID-Vergabe
  • label ist ein Inlineelement und darf deshalb kein Blockelement beinhalten
  • der div ist nicht geschlossen
  • du sprichst mit deinem CSS-Schnipsel figure an, kann ich in deinem HTML-Schnipsel nirgendwo entdecken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.12.2012, 16:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 07.02.2007
Beiträge: 104
maggie befindet sich auf einem aufstrebenden Ast
Standard

Sorry, habe den Link nicht mitgegeben.
Hier ist mal die Anzeige was bisher passiert.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.12.2012, 18:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 07.02.2007
Beiträge: 104
maggie befindet sich auf einem aufstrebenden Ast
Standard

Hat jemand eine Idee wie der Bildwechsel funktionieren kann?
Gruß
Maggie
Mit Zitat antworten
  #5 (permalink)  
Alt 16.12.2012, 18:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!

Korrigiere doch erstmal die ganzen Fehler, auf die dich auch cebito schon hingewiesen hat!
Der Validator zeigt bei deinem recht kurzen Code schon 27 Fehler!!!
Mit Zitat antworten
  #6 (permalink)  
Alt 16.12.2012, 19:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 07.02.2007
Beiträge: 104
maggie befindet sich auf einem aufstrebenden Ast
Standard

Hier habe ich die Fehler berichtigt (die anderen HTML Angaben habe ich zum Vergleich jedoch noch drin gelassen)
HTML-Code:
<div class="b3">
<input id="b3" type="radio" name="thumb"><label for="b3"><img src="grauthumbs.gif" /></label> 
<input id="b3" type="radio" name="thumb"><label for="b3">wo ist hg</label> 
</div>
Mit Zitat antworten
  #7 (permalink)  
Alt 16.12.2012, 19:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von maggie Beitrag anzeigen
Hier habe ich die Fehler berichtigt
Nein!
Die ID "b3" ist immernoch mehrfach vorhanden!
Mit Zitat antworten
  #8 (permalink)  
Alt 16.12.2012, 19:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 07.02.2007
Beiträge: 104
maggie befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von schatzi Beitrag anzeigen
Nein!
Die ID "b3" ist immernoch mehrfach vorhanden!
Hm, im 'label' muss 'b3' doch vorkommen - oder?
Mit Zitat antworten
  #9 (permalink)  
Alt 16.12.2012, 22:19
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von maggie Beitrag anzeigen
Hm, im 'label' muss 'b3' doch vorkommen - oder?
Wieso sollte sie?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.12.2012, 22:30
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von maggie Beitrag anzeigen
Hm, im 'label' muss 'b3' doch vorkommen - oder?
Zitat:
Zitat von Thielo Beitrag anzeigen
Wieso sollte sie?
Bevor das zu Verwirrung führt...
maggie, im gesamten HTML-Dokument darf id="b3" nur ein einziges Mal vorkommen. Du hast aber zwei input-Elemente mit id="b3". Das ist falsch.

Das for-Attribut des label-Elements darf (und muss ja auch) eine Referenz auf b3 enthalten.

Wenn du das noch nicht verstanden hast, arbeite bitte ein Grundlagenwerk wie Little Boxes durch. Das wird dir helfen.
Es ist sehr mühselig, Grundwissen anhand von Codefetzen zu vermitteln.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
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
CSS Mouseover Bildwechsel Problem Kevin-Kai CSS 6 24.06.2010 20:29
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39
bildwechsel bei hover - nur mit css, ohne javascript? Beb CSS 3 20.06.2005 08:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:11 Uhr.