| Autor |
Nachricht |
Nadelmeister
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: 47
Geschlecht: 
|
Verfasst Sa 26.02.2011 12:50
Titel Layer Problem klick |
  |
|
Hallo zusammen,
Ich bastle ab und zu mal an Websites ohne viel Ahnung zu haben.
Da ich leider nicht viel Zeit habe, schaffe ich es nie mich richtig einzufuchsen.
Für mich zählt meistens nur learning by doing...
Folgendes Problem stellt sich mir gerade:
Ich bastle eine Seite, eigentlich nur aus div´s
[img]http://img823.imageshack.us/i/skizzeb.jpg/[/img]
ich scheitere einfach schon daran, den im navi_div befindlichen layer1_div_"Button" klickbar zu machen und damit per Klick den eigentlichen Layer1_Content_div sichtbar und die anderen unsichtbar zu machen!
habe schon sehr viel gesucht und probiert, bin aber überfordert mit den vielen verschiedenen Techniken...
Vielleicht kann mir da jemand helfen?
Mir geht es auch nicht darum, einfach via copy and paste die sachen einzubauen! Ich will es nachvollziehen können!
Vielen Dank
|
|
| |
  |
 |
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.02.2011 14:18
Titel
|
|
|
Hi,
woran scheitert es denn? Am HTML, CSS oder Javascript?
Vielleicht hilft dir ja schon ein Blick in die jQuery-Dokumentation zu den Befehlen show und hide.
Dort sind etwas weiter unten auch interaktive Beispiele.
Zuletzt bearbeitet von trashmaster am Sa 26.02.2011 14:19, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Nadelmeister
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: 47
Geschlecht:
|
Verfasst Sa 26.02.2011 14:29
Titel
|
|
|
Das schaue ich mir gleich mal an!
habe ja schon viel "gefummelt", ich glaube ich scheitere schon daran, den div Layer im Navi klickbar zu machen.
Danke Dir!
(warum wird mein Bild nicht im Thread angezeigt.... hab ich wieder was falsch gemacht?!
|
|
| |
|
|
Nadelmeister
Threadersteller
Dabei seit: 11.08.2009
Ort: -
Alter: 47
Geschlecht:
|
Verfasst Sa 26.02.2011 17:48
Titel
|
|
|
Ich habe mal versucht folgendes anzupassen:
| Code: | <script type="text/javascript">
function punkt1() {
if(document.getElementById('layer1').style.visibility=='hIdden') {
document.getElementById('layer1').style.visibility='visible';
document.getElementById('layer2').style.visibility='hIdden';
document.getElementById('layer3').style.visibility='hIdden';
}
}
function punkt2() {
if(document.getElementById('layer2').style.visibility=='hIdden') {
document.getElementById('layer1').style.visibility='hIdden';
document.getElementById('layer2').style.visibility='visible';
document.getElementById('layer3').style.visibility='hIdden';
}
}
function punkt3() {
if(document.getElementById('layer3').style.visibility=='hIdden') {
document.getElementById('layer1').style.visibility='hIdden';
document.getElementById('layer2').style.visibility='hIdden';
document.getElementById('layer3').style.visibility='visible';
}
}
|
...und jetzt hört es auf!
hatte mir da irgendwie so etwas zusammen gerödelt:
| Code: |
<div Id="nav1" onclick="punkt1()">
|
tut mir leid... ich raffe es nicht...
Zuletzt bearbeitet von Nadelmeister am Sa 26.02.2011 17:55, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Tronjer
Dabei seit: 26.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.02.2011 23:00
Titel
|
|
|
Das wird so auch nicht funktionieren.
Nehmen wir mal an, bei dem Layer handelt es sich um ein Bild und vereinfachen wir das Beispiel dahingehend, dass bei einem Mausklick das kleinere gegen das größere ausgetauscht werden soll, dann ließe sich das in Javascript so umsetzen:
Im HTML schreibst du:
| Code: |
<div id=layer>
<img src="images/layer_klein.png" alt="Klick Mich" onclick="layerWechsel();" />
</div>
|
und in Javascript:
| Code: | function layerWechsel {
document.getElementById("layer").src = "images/layer_gross.png";
} |
Bei dem angebenen Beispiel existieren drei divs mit jeweils zwei Bildern, also sechs Zustände insgesamt. Um das zu realisieren müsste JS erst einmal den gegenwärtigen Zustand prüfen, die entsprechende Klasse entfernen und dafür eine neue laden. Auf CSS-Seite hingegen würde ich zwei Klassen anlegen; eine für hidden und eine für visible.
Das könnte in Javascript etwa so aussehen:
| Code: |
function entferneKlasse(element, klassenName) {
var zeichenMuster = new RegExp("(^|\\s)" + klassenName + "(\\s|$)");
element.className = element.className.replace(zeichenMuster, "$2");
}
function klasseVorhanden(element, klassenName) {
var zeichenMuster = new RegExp("(^|\\s)" + klassenName + "(\\s|$)");
return zeichenMuster.test(element.className);
}
......... |
Andererseits existieren dafür sicher auch fertige Scripts im Netz und das Problem ließe sich ebenso über Pseudo-Klassen in CSS (a:active) lösen.
Zuletzt bearbeitet von Tronjer am Sa 26.02.2011 23:01, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
div layer bei klick aus/einblenden?!
[javascript] bei klick div-layer zeigen
1 klick = 1 frame öffnen + layer ein-/ausblenden?
"1 Layer einblenden / 4 Layer ausblenden"-Problem
Problem mit Layer-Ausrichtung
Dreamweaver Layer-Problem
|
|
Willkommen auf dem Portal für Mediengestalter
