RE: RE:Der lustige Lichtschalter

28.11.2013 14:35

Gabriella
#76 RE: RE:Der lustige Lichtschalter

Ihr macht mich ganz kribbelig Jungs

also der alten Frau würde da schon eine Idee vorschweben.
Ich habe ja da so Bereiche, wie z. B. "Die Perle der Woche" da sind dann bis Ende Jahr 52 Sachen drinn, welche ich händisch immer ins Portal einfüge.
Wäre doch jetzt cool, wenn man in dem Fenster nur den Link zu der betreffenden Seite einsetzten könnte.
Mal schauen wie es gemeint ist, könnt Ihr auf meinem Portal, oberste Box rechts.
So wie Ihr das nun erarbeitet habt, muss man ja wieder den Text kopieren und dort einfügen.
Wenn der Knopf nun eine Tooltipps Einblendung hätte, wüsste man was man da anklickt.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

Antworten

Beitrag melden

#77

28.11.2013 14:47

eini1971
#77 RE: RE:Der lustige Lichtschalter

eini1971

Boah du machst mich fertig ;-)
Bin ja selber froh so weit gekommen zu sein.
Aber einen einfachen Link bekomme ich noch hin.
Hier nur der DIV-Container:

1
2
3
4
5
6
 
<div style="display:none; left: 20%;position: fixed;top: 10%; z-index: 10001;color:#FF0000;font-size:200%" id="Nachricht">
<p>Dies hier ist nur ein Beispieltext<br/>
Der Code ist auch noch nicht auskommentiert!<br/>
Und verstanden hab ich auch nur die Hälfte ;-)<br/><br>
<a href="https://www.hpm-support.de/t535917f11769157-Der-lustige-Lichtschalter-5.html#msg7246275" target="_blank">Link zum Beitrag von Shogun</a></p>
</div>
 

Zeile 5 habe ich nur hinzugefügt.
target="_blank" habe ich nur drin um nicht aus meinem Testforum zu fliegen
sondern deinen Beitrag in einem neuen Tab zu öffnen.
Den Link müsstest du aber immer wieder aktualisieren wenn du auf neues hinweisen willst.
Kommt das deinen Vorstellungen nahe?

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#78

28.11.2013 14:54

Gabriella
#78 RE: RE:Der lustige Lichtschalter

Gabriella

Hö das wollte ich nun wirklich nicht, Dich fertig machen
Also ich kanns ja mal versuchen, Das hier habe ich ja in meinem Forum schon mal drinn: http://www.tsdv.de/

Wohin genau muss ich das nun setzen, in das bestehende Script?

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

Antworten

Beitrag melden

#79

28.11.2013 15:08

eini1971
#79 RE: RE:Der lustige Lichtschalter

eini1971

Hier der ganze Code nur für dich ;-)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html>
    <head>
        <script>
        function toggleLicht(){
Nachrichtoff = document.getElementById("Nachricht");
            if(Nachricht.style.display == "none")
                Nachricht.style.display = "block";
            else
                Nachricht.style.display = "none"            
switchoff = document.getElementById("switch-off");
            if(switchoff.style.display == "none")
                switchoff.style.display = "block";
            else
                switchoff.style.display = "none";
        }
        </script>
        <style>
            #switch-off {
            background: #000000; background-image:url(http://up.picr.de/16595219lr.png); background-repeat:No-repeat; background-position:center; !important;
            opacity: .7;
            filter: alpha(opacity=50);
            -moz-opacity: .9;
            height: 80%;
            left: 10%;
            position: fixed;
            top: 10%;
            width: 80%;
            z-index: 10000;
            display: none;
            }
                #switch {
                position: fixed;
                left: 5px;
                top: 520px;
                z-index: 20000;
            }#spoiler {display: none;};
        </style>
    </head>
    <body>
        <div style="display:none;" id="switch-off"></div>
        <div id="switch">
        <a onClick="toggleLicht()" href="#"><img src="http://www.ins-netz-gehen.de/sites/all/themes/zen_bzga/images/elements/lichtschalter.png" width="50%"></a>
        </div>
<div style="display:none; left: 20%;position: fixed;top: 10%; z-index: 10001;color:#FF0000;font-size:200%" id="Nachricht">
<p>Dies hier ist nur ein Beispieltext<br/>
Der Code ist auch noch nicht auskommentiert!<br/>
Und verstanden hab ich auch nur die Hälfte ;-)<br/><br>
<a href="https://www.hpm-support.de/t535917f11769157-Der-lustige-Lichtschalter-5.html#msg7246275" target="_blank">Link zum Beitrag von Shogun</a></p>
</div>
    </body>
</html>
 
 

Wie gesagt, ist er noch weit davon entfernt perfekt zu sein.

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#80

28.11.2013 15:11

TripleM
#80 RE: RE:Der lustige Lichtschalter

TripleM

Also in Zeile 19 würde ich mal nur ein Teil auswählen. Entweder Farbe oder eben Bild beides ist im Moment noch drin.

Ich habe nun noch mal ein wenig geschaut was du da gebastelt hast. Gefällt mir schon richtig gut. Links und Bilder gehen auch in den Bereich.

http://jeep-xj-test.xobor.de/

Habe da mal geschaut da hat man nun diverse Möglichkeiten etwas zu machen.

Antworten

Beitrag melden

#81

28.11.2013 15:13

Beatricia
#81 RE: RE:Der lustige Lichtschalter

Beatricia

@eini

du bisch ächt supr

**********************************

Ich frage nach ,damit ich was lerne

Antworten

Beitrag melden

#82

28.11.2013 15:25 (zuletzt bearbeitet: 28.11.2013 15:26)

eini1971
#82 RE: RE:Der lustige Lichtschalter

eini1971

Mario,
die Farbe hattest du ursprünglich weg gelassen.
Dann hast du sie aber wieder ergänzt.
Ohne sie ist doch der dunkle Hintergrund weg, oder nicht?
Bei dir sieht es auch schon gut aus und funzt.

Oh mann.
Edit, edit, edit ;-)
Ich habe bewusst alles drin gelassen.
Ob ein Bild mit rein kommt weiß ich für mein Forum ja noch nicht.

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#83

28.11.2013 15:31

TripleM
#83 RE: RE:Der lustige Lichtschalter

TripleM

Frank der Code von dir ist ja noch mit Doppelten Bild also einmal mitdem Transparenten schwarz und noch mein Testbild was eben raus sollte weil es sonst jeder mit Einfügt.

Sprich dein Code sollte dann so aussehen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
    <head>
        <script>
        function toggleLicht(){
Nachrichtoff = document.getElementById("Nachricht");
            if(Nachricht.style.display == "none")
                Nachricht.style.display = "block";
            else
                Nachricht.style.display = "none"            
switchoff = document.getElementById("switch-off");
            if(switchoff.style.display == "none")
                switchoff.style.display = "block";
            else
                switchoff.style.display = "none";
        }
        </script>
        <style>
            #switch-off {
            background: #000000; 
            opacity: .7;
            filter: alpha(opacity=50);
            -moz-opacity: .9;
            height: 80%;
            left: 10%;
            position: fixed;
            top: 10%;
            width: 80%;
            z-index: 10000;
            display: none;
            }
                #switch {
                position: fixed;
                left: 5px;
                top: 520px;
                z-index: 20000;
            }#spoiler {display: none;};
        </style>
    </head>
    <body>
        <div style="display:none;" id="switch-off"></div>
        <div id="switch">
        <a onClick="toggleLicht()" href="#"><img src="http://www.ins-netz-gehen.de/sites/all/themes/zen_bzga/images/elements/lichtschalter.png" width="50%"></a>
        </div>
<div style="display:none; left: 20%;position: fixed;top: 10%; z-index: 10001;color:#FF0000;font-size:200%" id="Nachricht">
<p>Dies hier ist nur ein Beispieltext<br/>
Der Code ist auch noch nicht auskommentiert!<br/>
Und verstanden hab ich auch nur die Hälfte ;-)</p>
</div>
    </body>
</html>
 

Und zwar habe ich nun das hier aus zeile 19 Entfernt

1
 
background-image:url(http://up.picr.de/16595219lr.png); background-repeat:No-repeat; background-position:center; !important;

sodass eben nur der Transparent Schwarze Hintergrund zu sehen ist. Möchte man ein Bild haben muss eben Zeile 19 Gelöscht werden und dafür der 2. Codeschnipsel eingefügt werden. Dann hat man ein Bild aber keine Schwarze Transparenz.

Antworten

Beitrag melden

#84

28.11.2013 20:01 (zuletzt bearbeitet: 28.11.2013 20:03)

Gabriella
#84 RE: RE:Der lustige Lichtschalter

Gabriella

Ich habe mir mal kurz beide Scripts eingebaut, also ich müsste eben anstatt das was hier als Text steht so haben, dass dort der Link zum betreffenden Thema steht. Wenn ich das Script von Frank nehme geht das auch, aber das steht dann ganz oben im Fenster, müsste ich also erstens die Farbe anpassen können. Zweitens ist das dunkle Fenster zu gross, ausserdem ist es transparent und lässt meinen gesamten Header durchscheinen. Was natürlich gar nicht ideal ist.
Also etwas habe ich schon mal ändern können. Jetzt sollte das Teil, mit dem 2. Bild weg, oder dann eben das Bild angezeigt werden, zu dieser Perle.
Aber dann sollte entweder das erste Fenster, das schwarze weg.
Grösse davon anpassen, habe ich noch nicht gefunden.
Natürlich könnte man da nun diverse Seitenlinks einsetzen, eben so wie ich es hier auf dem Portal habe: http://www.garten-der-poesie.de/
Und hier könnt Ihr sehen, wie das nun schaut, der Link müsste dann natürlich auch eine andere Farbe haben:
http://www.tsdv.de/

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

Antworten

Beitrag melden

#85

28.11.2013 20:21

eini1971
#85 RE: RE:Der lustige Lichtschalter

eini1971

Schritt für Schritt.

Wenn du Text mit einem Link haben willst,
sollte der Teil mit dem Bild weg.
Zeile 19 ist nun so geschrieben, daß nur der "Schatten" dargestellt wird.
Willst du stattdessen ein Bild ohne Schatten,
dann ersetze die Zeile 19 mit dieser hier:

1
 
background-image:url(http://up.picr.de/16595219lr.png); background-repeat:No-repeat; background-position:center; !important;

Das Bild musst du natürlich austauschen.

Zurück zum Text mit Link.
Wenn der Schatten nicht transparent sein soll,
so kannst du den Wert ".7" in Zeile 20 einfach durch"1" ersetzen.
So bleibt die Funktion der Transparenz erhalten falls du es doch mal haben willst.
Wenn nicht, so könnten einige Zeilen raus fliegen.
Das kriege ich aber nicht aus dem Kopf hin. ;-)
Müsste ich halt mit dem ursprünglichen Code vergleichen.

Die Farbe des Hintergrundes veränderst du in Zeile 19.
Einfach die sechs Nullen durch einen anderen Code ersetzen.
Hier ist eine Seite mit der du die Codes für deine Wunschfarbe herausfinden kannst.
http://html-color-codes.info/webfarben_h...ML_Color_Picker

Nun die Größe des schwarzen Fensters:
In Zeile 23, 24, 26 und 27 findest du Prozentangaben.
Immer bezogen auf den Bildschirmbereich.
left und top sind für die Anfangsposition Links und oben.
height und width bestimmen die Höhe und Breite des Fensters.

Die Position, Farbe und Größe des Textes habe ich in Zeile 44 gepackt.
Jeweils "left", "top", "color" und "font-size".
Ob das etwas eleganter geht, weiß ich nicht.

Ich hoffe es hilft dir nun etwas weiter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<html>
    <head>
        <script>
        function toggleLicht(){
Nachrichtoff = document.getElementById("Nachricht");
            if(Nachricht.style.display == "none")
                Nachricht.style.display = "block";
            else
                Nachricht.style.display = "none"            
switchoff = document.getElementById("switch-off");
            if(switchoff.style.display == "none")
                switchoff.style.display = "block";
            else
                switchoff.style.display = "none";
        }
        </script>
        <style>
            #switch-off {
            background: #000000; 
            opacity: .7;
            filter: alpha(opacity=50);
            -moz-opacity: .9;
            height: 80%;
            left: 10%;
            position: fixed;
            top: 10%;
            width: 80%;
            z-index: 10000;
            display: none;
            }
                #switch {
                position: fixed;
                left: 5px;
                top: 520px;
                z-index: 20000;
            }#spoiler {display: none;};
        </style>
    </head>
    <body>
        <div style="display:none;" id="switch-off"></div>
        <div id="switch">
        <a onClick="toggleLicht()" href="#"><img src="http://www.ins-netz-gehen.de/sites/all/themes/zen_bzga/images/elements/lichtschalter.png" width="50%"></a>
        </div>
<div style="display:none; left: 20%;position: fixed;top: 10%; z-index: 10001;color:#FF0000;font-size:200%" id="Nachricht">
<p>Dies hier ist nur ein Beispieltext<br/>
Der Code ist auch noch nicht auskommentiert!<br/>
Und verstanden hab ich auch nur die Hälfte ;-)<br/><br>
<a href="https://www.hpm-support.de/t535917f11769157-Der-lustige-Lichtschalter-5.html#msg7246275" target="_blank">Link zum Beitrag von Shogun</a></p>
</div>
    </body>
</html>
 
<!-- kommentar -->
 

Gruß
Frank

Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

Antworten

Beitrag melden

#86

29.11.2013 22:27

martali
#86 RE: RE:Der lustige Lichtschalter

martali

Ich hab es jetzt mal für EINEN Tag erstellt, für den 1. April

kann man sicher noch feiner machen, aber ich finde, für einen Tag ist es Gag genug

ist nur das Testforum

http://uebenuebenueben.xobor.de/

danke an den threadersteller für diesen Spaß!

__________________________________________
Ich habe keine Ahnung, gebe aber mein Bestes :-)

mitlästern übers Perfekte Dinner unter
http://www.wissensundlaesteranstalt.de/
http://540617.homepagemodules.de
(Buisness Template)

Antworten

Beitrag melden

#87

29.11.2013 22:29

TripleM
#87 RE: RE:Der lustige Lichtschalter

TripleM

Cool schaut gut aus und ich musste Schmunzeln. :-)

Antworten

Beitrag melden

#88

29.11.2013 22:36

Beatricia
#88 RE: RE:Der lustige Lichtschalter

Beatricia

Ist Klasse ,Martali !

**********************************

Ich frage nach ,damit ich was lerne

Antworten

Beitrag melden

#89

29.11.2013 23:09

martali
#89 RE: RE:Der lustige Lichtschalter

martali

das freut mich, ihr Lieben

wenn doch schon 1. April wäre

und ihr habt mich angeregt, mich da durchzuwurschteln, ich habe gestern so gelacht, das war richtig schön

__________________________________________
Ich habe keine Ahnung, gebe aber mein Bestes :-)

mitlästern übers Perfekte Dinner unter
http://www.wissensundlaesteranstalt.de/
http://540617.homepagemodules.de
(Buisness Template)

Antworten

Beitrag melden