nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Der Martin
Der Martin
Hallo,
ist es nur mit CSS möglich, über ein 'onclick' 2 Bilddateien in einer Datei zu wechseln?
Maggie
Om nah hoo pez nyeetz, maggie!
Aufgrund der allgemein gehaltenen Fragestellung lässt sich sagen: Vielleicht.
Matthias
Om nah hoo pez nyeetz, maggie!
Aufgrund der allgemein gehaltenen Fragestellung lässt sich sagen: Vielleicht.
Matthias
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.
Gruß
Maggie
Om nah hoo pez nyeetz, maggie!
Entstehen soll eine kleine Bildergalerie:
Dann lautet die Antwort ja.
Matthias
Om nah hoo pez nyeetz, maggie!
Entstehen soll eine kleine Bildergalerie:
Dann lautet die Antwort ja.
Matthias
Bitte nicht lachen, ich hab nämlich eine sehr utopische Anweisung gebastelt
<li><a href="#" onclick="img src="g1.png" border="0" style="position:relative; top: 20px; left: 50px;" target="_self"><img src="grau1.png" border="0" /></a>
Vielleicht gibt es ja einen Tipp von Euch wie ichs richtig angehen muss.
Ich wär Euch dankbar.
Maggie
Om nah hoo pez nyeetz, maggie!
bitte zitiere sinnvoll. Nur das, worauf du dich konkret beziehst.
Als erstes solltest du dir ein sinnvolles HTML basteln.
etwa so
~~~html
<input id="b1" type="radio">Hier kommen die kleinen Bilder rein
<input id="b2" type="radio">
...
<figure> großes Bild</figure>
Unter Verwendung der Pseudoklasse checked kannst du jetzt gezielt den Hintergrund des figure-Elements tauschen.
~~~css
#b1 {background: url(url des kleinen SW-Bildes);}
#b1:checked {background: url(url des kleine Farb-Bildes);}
/* gerne auch als sprite */
#b1:checked ~ figure {background url(url des großen Bildes)
ungetestet. Es gibt bestimmt auch andere Möglichkeiten.
Matthias
Wow! Sprites hab ich auch gleich ausprobiert.
Warum die, als Hintergrundbilder ausgezeichneten Bilder nicht erscheinen ist mir nicht klar.
Allerdings weiß ich nicht welche Schreibweise bei der verwendeten Kombination richtig ist:
#b3 {background-image: url(grauthumbs.gif); width:60px; background-position: -120px 0;} oder
#b2 {background: url(grauthumbs.gif); width:60px; background-position: -60px 0;}
Gruß
Maggie
...die Hintergrundbilder werden nicht gezeigt - warum?
Kann mir jemand einen Tipp geben, was ich beachten muss.
Danke.
Om nah hoo pez nyeetz, maggie!
Kann mir jemand einen Tipp geben, was ich beachten muss.
Formularelemente sind manchmal etwas störrisch, was Formatierungen betrifft. Du könntest, wenn du bei der Idee bleiben möchtest, label-Elemente verwenden.
Matthias
Ja, die Zuordnung zum Formularelement funktioniert mit dem label, aber eine Positionierung bekomme ich nicht hin, es ist auch sofort checked eingestellt.
<input id="b1" type="radio" name="thumb"><label for="b1"><div id="b1"></label>
Wie 2. Funktion, die bei 'cecked' ausgelöst sein soll, zeigt sich leider auch nicht. Was '~' vor figure aussagt, konnte ich nicht finden um nachzulesen.
#b1:checked ~ figure
Gruß
Maggie
Om nah hoo pez nyeetz, maggie!
Wie 2. Funktion, die bei 'cecked' ausgelöst sein soll, zeigt sich leider auch nicht. Was '~' vor figure aussagt, konnte ich nicht finden um nachzulesen.
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Geschwisterselektor
Matthias
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Geschwisterselektor
Danke.
Durch die 'label' Auszeichnung wird das Hintergrundbild (gewünschten Ausschnitt) anzeigen und mit der 'radio' Funktion belegt.
Allerdings wird der Radiobutton auch angezeigt.
<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
#b1:checked ~ figure
klappt nicht.
Danke für Hilfe.
Maggie
Hallo,
Durch die 'label' Auszeichnung wird das Hintergrundbild (gewünschten Ausschnitt) anzeigen und mit der 'radio' Funktion belegt.
wie meinen??
<input id="b1" type="radio" name="thumb1"><label for="b1"><div id="b1"></label>
Das ist ungültiges HTML. Erstens darf label kein Blockelement (div) enthalten, zweitens ist das dort eingesetzte div-Element nicht geschlossen, und drittens hast du zweimal dieselbe ID vergeben.
#b1:checked ~ figure
klappt nicht.
Das heißt ...?
Hast du denn ein figure-Element, das ein Sibling (Geschwister) von #b1 ist?
So long,
Martin
Das ist ungültiges HTML. Erstens darf label kein Blockelement (div) enthalten, zweitens ist das dort eingesetzte div-Element nicht geschlossen, und drittens hast du zweimal dieselbe ID vergeben.
Das Hintergundbild soll aus der ID b3 angezeigt werden - warum es nicht gezeicht wird ist mir nicht klar.
Ist diese Anweisung richtig?
<input id="b3" type="radio" name="thumb"><label for="b3">wo ist hg</label>
#b1:checked ~ figure
klappt nicht.Das heißt ...?
Hast du denn ein figure-Element, das ein Sibling (Geschwister) von #b1 ist?
Hm, ich dachte durch die Ausführung des Radiobuttons 'checked' wird autom. der Style ~~~css
#b1:checked ~ figure {
background-image: url(g1.png);
width:540px;
background-position: -180px 0;
}
wirksam.
Gruß
Maggie
Hallo,
Ist diese Anweisung richtig?
<input id="b3" type="radio" name="thumb"><label for="b3">wo ist hg</label>
ja, zumindest formal. Ein Radio-Button (der normalerweise mit anderen seiner Art als Gruppe auftaucht), und das zugehörige Label. Und das Label soll vermutlich das Hintergrundbild bekommen, nicht der Radio-Button selbst. Ein passender Selektor wäre also zum Beispiel:
#b3 + label
Hast du denn ein figure-Element, das ein Sibling (Geschwister) von #b1 ist?
Hm, ich dachte durch die Ausführung des Radiobuttons 'checked' wird autom. der Style
#b1:checked ~ figure {
background-image: url(g1.png);
width:540px;
background-position: -180px 0;
}
> wirksam.
Nein. Was du da notiert hast, bedeutet in Worten: Wende diese Formatierung auf ein figure-Element an, das ein Geschwisterelement eines gewählten (checked) Elements mit der ID b1 ist. Die Verwendung der Pseudoklasse :checked impliziert, dass #b1 ein input-Element vom Typ checkbox oder radio ist, wie oben im Beispiel gezeigt.
Ciao,
Martin
--
Treffen sich zwei Holzwürmer im Käse: "Na, auch Probleme mit den Zähnen?"
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
#b3 + label
okay, das Hintergrundbild wird nun angezeigt,es bedarf aber einem Inhalt bei <label>Inhalt</label> der Radiobutton wird auch angezeigt und der sollte weg.
...
meinen 2.Versuch eine Bildergalerie mit Ankern zu erstellt sieht im Moment so aus: Galerie mit Ankern
Diese Galerie soll noch zusätzlich eine Funktion erhalten und zwar muss beim Klick auf das Thumbnail ein anderes Thumbnail (farbiges Thumbnail) gezeigt werden.
Welche CSS Anweisung kann das bewirken?
Gruß
Maggie
Hallo Kai,
danke für das Script.
Es sollen mehrere solcher Galerien sollen z. T. untereinander gezeigt werden oder auf anderen Seiten.
Die Bilder jeder Galerie sind in getrennten Bilderverzeichnissen.
Wo könnte am Besten der Verzeichnis-Name eingefügt werden, gut wäre es, wenn der Name nur jeweils einmal eingefügt werden muss, damit es schnell und ohne umfangreiche Anleitung erledigt werden kann.
Vielen Dank für die große Hilfe.
Maggie
Hier wollte ich die Bilder aus dem Verzeichnis 'haus' verwenden - irgendwo ist ein Fehler drin - aber wo? und kann man es vereinfachen, damit man das Verzeichnis 'haus' nicht an 5 Stellen angeben muss?
Gruß
Maggie
schau dir meinen Vorschlag an.
schau dir meinen Vorschlag an.
Wow - danke!
Ich schau gleich, ob ich folgen kann - melde mich gleich wieder
Hallo Kai,
pfad = './images/';
wenn das Bild 'grau1'in einem Verzeichnis 'images/haus' liegt, müsste in Deinem Script nur die pfadangaben in den cases wie folgt geändert werden
pfad = './images/haus/';
Ist das richtig so?
Gruß
Maggie
Hallo Maggie,
müsste in Deinem Script nur die pfadangaben in den cases wie folgt geändert werden
pfad = './images/haus/';
Ja. Einfach ausprobieren und herumspielen, mit der Fehler-Konsole von Firefox hast du auch gleich einen super Helfer an der Seite.
Gruss Kai
Hallo Kai,
das Script wird aus einer Seite raus gestartet, die in einem Kategorieverzeichnis 'projekte' steckt.
Im html führt der Aufruf 'images/sanierung/...' zum richtigen Bild - es wird angezeigt.
<a href="#" onclick="return basics.changeimage(1, 'n', 1)"><img id="n1" src="images/sanierung/grau1.png" alt="" /></a>
Durch den Wechsel
case 1:pfad = './images/sanierung/';
imgName = 'grau';
break;
landet man im Verzeichnis 'projekte' 'index.php/projekte/images/sanierung/grau1.png"'und dadurch wird der Fehler: ' "NetworkError: 404 Kategorie nicht gefunden' angezeigt.
Setze ich beim 'pfad' in case 1 gleich das 'projekte' davor, wird es doppelt ausgegeben und führt auch zum Fehler.
Leider kann ich die Seite online nicht zeigen - ich hoffe, ich habe das Problem verständlich beschrieben.
Wie kann man das beheben?
Hallo Maggie,
Leider kann ich die Seite online nicht zeigen - ich hoffe, ich habe das Problem verständlich beschrieben.
Also um das zu verstehen wäre eine Testseite extrem hilfreich, denn so stochere ich nur in x Möglichkeiten herum, ohne eindeutig eine Antwort geben zu können.
Zumindest das 'index.php/projekte/images/sanierung/grau1.png"' ist definitiv verkehrt. So './projekte/images/sanierung/grau1.png' macht es mehr Sinn, aber ob das die Lösung für den 404 ist kann ich auch so nicht sehen.
Gruss Kai
Hallo, hier nun ein Link - beim klick auf die Thumbnails verschwinden alle Bilder :-( - bin ratlos, wo, in diesem Fall der Pfadteil 'projekte' angefügt werden muss.
Gruß
Maggie
Hallo,
zb Firefox: rechte Maustaste > Grafikadress kopieren.
Result: http://formfalt.net/joomla/images/sanierung/g1.png.
Funktioniert auch mit g2.png, g3.png
bin ratlos, wo, in diesem Fall der Pfadteil 'projekte' angefügt werden muss.
also da steht nichts von 'projekte' ;-)
Dein Code sollte wahrscheinlich so aussehen: pfad = './joomla/images/sanierung/';
Gruss Kai
Hallo Kai,
der Pfadteil 'projekte' kommt daher, dass die Menüpunkte zu einer Kategorie 'projekte' zusammengefügt sind.
Zuerst werden die Bilder ja angezeigt - somit ist die Pfadangabe richtig, aber beim Draufklicken verschwinden die Bilder. Es ist zum Verzweifeln.
Vielen Dank für Deine Hilfe und viele Mühe - ich schließe das Projekt ;-) jetzt einfach ab.
Gruß
Maggie
