Wenn Du ein Einblenden haben willst, kommst Du nicht daran vorbei, das zweite Bild absolut zu positionieren.
Bist Du meinem Hinweis bzgl. Änderung der Größe des zweiten Bildes nachgegangen?
Ändere das eingeblendete Bild, so dass es die selbe Größe hat.
Wie sind denn da die Anforderugen an die Zuverlässigkeit? Wenn man es mit Javascript (das ist etwas anderes als Java) macht, kann man nämlich i. d. R. leicht schummeln, indem man sich die richtigen Lösungen aus dem Quellcode heraus sucht. Um das zu unterbinden, müsste man es mit PHP machen.
Bei mir funktioniert der Code, den Du gepostet hast, leider nicht: Alles sichtbar und die Texte liegen übereinander. Fehlt da noch etwas?
Wenn es denn funktioniert, müsste sich dein Vorhaben umsetzen lassen, indem Du bei dem betr. Radiobutton das Attribut "checked" setzst:
<input type="radio" id="nl-radio-1" name="nl-radio" class="nl-radio" checked />Sag mal Dori, hattest Du nicht auch einen Thread, wo es darum ging, Bereiche in einem Bild festzulegen und beim Hover ein Menü aufzuklappen?Was ist denn daraus geworden, bist Du zum Ziel gekommen?
Ja, wenn man sich mein letztes Fiddle ansieht, erkennt man, dass ich genau das Attribut "checked" verwendet habe, um die Startseite festzulegen.
Freut mich, dass es jetzt funktioniert. Das sort brauchst Du jedoch nicht, denn durch das anschließende shuffle wird die Reihenfolge ja doch wieder durcheinander gewürfelt.
Sehr gut! Hast Du das jetzt durch die Fehleranzeige gefunden oder indem Du den Code genau angeschaut hast?
Zu den Dreiecken: Ich muss zugeben, dass ich den Code noch nicht getestet hatte. Dass etwas nicht auf Anhieb funktioniert ist eher die Regel und man braucht Hilfsmittel, um die Fehler zu finden.
Schalte die Fehleranzeige von PHP ein, indem Du dieses am Anfang des Codes einfügst:
error_reporting(E_ALL); ini_set('display_errors', '1');Beim Filtern wird die Struktur des Arrays nicht verändert, da nur Elemente beibehalten oder weg gelassen werden. D. h. Du kannst es genau so mischen und auf die Elemente zugreifen, wie auf das orginale Array.
Edit: Bei den HTML-Tags funktionieren bei mir die Zeilenumbrüche genau so wenig.
"Leider bekomme ich die variablen sowie die "echos" nicht untereinander hier im Forum dargestellt. Deshalb etwas unübersichtlich.."
Das Problem habe ich leider auch immer, Fehler in der Forensoftware. Ein Ausweg ist, es bei pastebin.com einzustellen und den Link zu posten.
"Ist das so auch "saubere Schreibweise", oder total umständlich?" Eher das zweite, denn wenn Du am Ende neun divs hast, wird es ziemlich aufwändig, es zu editieren bzw. mit copy - paste - edit aufzubauen. Ich empfehle dir, dich mit Schleifen vertraut zu machen. Dann würde es so aussehen:
http://pastebin.com/DLNxHL0t
Ist doch wesentlich kompakter, nicht wahr? Und man kann keine copy-paste-Fehler machen. Ich habe es mal auf drei reduziert, weil das Array nur fünf Einträge hat.
Edit: Da ist mir ein Fehler unterlaufen: i ohne $ davor. So ist es richtig:
echo $beispiel[$i]["content"] . '<br>';
Auch das zweite ist nicht so kompliziert. Javascript-Array aus PHP-Array erzeugen ist ein Einzeiler und auch in Javascript gibt es die Funktion filter():
<script>
var beispiel_js = JSON.parse(<?php echo json_encode($beispiel); ?>;
var dreiecke = beispiel_js.filter(function(ele) {if (ele.type == "dreieck") return true; else return false;});
</script>
das automatische Anhängen des "#xy" wäre eine Option.
Das würde auch Javascript erfordern.
Wenn es für dich unverzichtbar ist, könntest Du auf eine Alternative umstellen, die Radiobuttons verwendet:
https://jsfiddle.net/Sempervivum/jx1fcs06/6/
Ich mag diese Trickserei mit :target sowieso nicht, u. a. weil sie den Nebeneffekt hat, dass der Browser auch zu dem Anker scrollt.
Das habe ich auch gerade gemerkt. Einfacher geht es, wenn Du #content1 an die URL anhängst. Das funktioniert nicht beim Fiddle, weil das getestete dort in einem iFrame liegt.
Wenn das mit der URL nicht geht, fällt mir nur noch eine Lösung mit Javascript ein, entweder, indem man einen Klick auf den Link simuliert:
https://developer.mozilla.org/en-US/docs/Web…iggering_events
https://jsfiddle.net/Sempervivum/jx1fcs06/1/
oder indem man das #content1 automatisch an die URL anhängt:
https://wiki.selfhtml.org/wiki/JavaScript/Location/hash
Du brauchst nur dem betr. content-div ein display:block zu geben:
#content1 {
}
Warum ich das !important brauchte, erschließt sich mir nicht ganz. Offenbar hat
#content > div {
}
eine höhere Priorität. Aber warum? Adressierung mit ID hat IMO eine höhere Spezifität als Adressierung mit Tagname.
PS: Mir ist noch folgendes eingefallen:
Wenn ich nun auf einen Menüpunkt gehe - nennen wir Ihn einfach mal Dreiecke - würde ich dort gerne 3 Divs erstellen, welche auch zufällig ausgewählt werden sollen, bestenfalls aus der selben Datei,
Wenn Du von Menüpunkt sprichst, spricht das dafür, dass dieses clientseitig mit Javascript passieren muss. Dazu würde ich das zweidimensionale Hauptarray mit einem JSON-String nach Javascript transferieren und dort auswerten. Javascript hat keine Shuffle-Funktion eingebaut, aber man findet Algorithmen, z. B. hier:
http://stackoverflow.com/questions/6274…huffle-an-array
Mit dem mehrdimensionalen Array bist Du auf dem richtigen Weg. Ich empfehle, in jedes Element ein assoziatives Array einzutragen mit Typ und Content:
$beispiel[] = ["typ" => "dreieck", "content" => 'dein content'];Das kannst Du genau so mischen und den Content zweidimensinal auslesen:
$current_content = $beispiel[$i]["content"]Willst Du aus dem gesamten Array die Elemente eines bestimmten Typs auslesen, schlage ich die Funktion filter vor:
$dreiecke = array_filter ($beispiel, function($ele){return $ele["typ"] == "dreieck"});Offenbar ist das eingeblendete Bild größer als das Basisbild. Ist es absolut positioniert, passt sich der Container nicht an.
Lösung 1: Ändere das eingeblendete Bild, so dass es die selbe Größe hat.
Wenn das nicht möglich ist, fällt mir nur noch ein, die Größe des Containers per Javascript an das Bild anzupassen.
Nun zum Blinken:
CSS für die Tabellenzelle:
td.blink {
background-color: lightgrey;
animation: aniblink 2s infinite;
}
@keyframes aniblink {
0% {
background-color: lightgrey;
}
20% {
background-color: red;
}
50% {
background-color: red;
}
70% {
background-color: lightgrey;
}
100% {
background-color: lightgrey;
}
}
Das Blinken startest Du, indem Du die Klasse blink bei der betr. Zelle setzt:
function VorgabeZahlErmitteln(z,s){
for (var i = 0; i <= anzahlFelder-1; i++) {} {
var zindex=random(z-1);
var sindex=random(s-1);
indexZelleVorgabe[ i ] = zindex;
indexSpalteVorgabe[ i ] = sindex;
var zw= (zindex*anzahlSpalten)+sindex;
setTimeout(function (zwzw) {
return function () {
var tds = document.getElementsByTagName('td');
tds[zwzw].className = "blink";
}
}(zw), 1000 * (i + 1));
}
}
Und stoppen kannst Du das Blinken, wenn Du diese Klasse wieder löschst.
Damit dies funktioniert:
setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1));
musst Du die Zeiten staffeln, denn der zweite Timeout wird ja zur selben Zeit wie der erste gestartet und nicht erst nach Ablauf des ersten. So sollte es funktionieren:
setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1) + 1000);
Zum Blinken schreibe ich später. Du kannst dich schon mal über CSS-Animationen informieren.
PS: Ich sehe gerade, dass dies nicht funktionieren wird:
setTimeout( bringColor(zw), 1000);
Ruft die Funktion bringColor sofort auf und übergibt den Rückgabewert an setTimeout(). Richtig wäre:
setTimeout(function(zwzw) {return function() {bringColor(zwzw);}}(zw), 1000 * (i + 1));Ich habe es mir noch nicht im Ganzen angesehen, aber vielleicht hilft dir das: