Beiträge von eamcw

Hallo Thomas Müller,

wann kann von ZETA mit einem Widget dafür gerechnet werden?

Gruß Michael

Hallo Mario,

danke vorerst. Werde dran arbeiten.

Grüße Michael

http://www.erhardt-abt.de/infos.html

hier der Link.

Hoffe du findest eine Lösung

In der Vorschau ist nichts anderes als im Zeta Producer zu sehen. Keine Ahnung wie ich weiter machen soll.

Besser wäre wirklich, wenn sich ZETA hier kümmern würde.

Hallo Mario,

"file" statt "http" nutze ich nur um offline in ZETA zu testen. Das Bild im Text funktioniert auch. Lediglich der Hover Effekt tut nicht. Geht das bei ZETA nur, wenn ich die Seite vorher online stelle ? Geht das Offline nicht?

Gruß Michael

Hallo,
ich habe die Grafik und Hintergrundgrafik liegen im Selben Ordner auf ´m Server. Den Hover-Quellcode habe ich in eine txt. Datei kopiert und aus dieser eine html-Datei gemacht und umbenannt in css.html. Die Zeile 17 habe ich entsprechend unserer Seite abgeändert.
Quellcode hover:
1..view {
2. width: 276px;
3. height: 184px;
4.
5. margin: 0em auto 0em auto;
6. border: 1px solid #ccc;
7.-webkit-border-radius: 5px;
8.-moz-border-radius: 5px;
9.border-radius: 5px;
10. overflow: hidden;
11. position: relative;
12. text-align: center;
13. -webkit-box-shadow: 1px 1px 2px #e6e6e6;
14. -moz-box-shadow: 1px 1px 2px #e6e6e6;
15. box-shadow: 0 8px 10px -6px #222;
16. cursor: default;
17. background: #fff url(file://EA-SRV-3/Archiv/2 Vertrieb/Marketing/EA Online/Homepage/ZETA/erhardt-abt (deutsch)/css/Hintergrundgrafik.jpg) no-repeat center center;
18.}
19..view .mask,.view .content {
20. width: 276px;
21. height: 184px;
22. position: absolute;
23. overflow: hidden;
24. top: 0;
25. left: 0;
26.}
27..view img {
28. display: block;
29. position: relative;
30.}
31..view h2 {
32. font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
33. color: #006600;
34. text-align: center;
35. position: relative;
36. font-size: 17px;
37.
38. background: rgba(0, 0, 0, 0.8);
39. margin: 10px 0 0 0;
40.}
41..view p {
42. font-family: "Georgia", "Garamond", "Times New Roman", Times, serif;
43. font-style: italic;
44. font-size: 14px;
45. position: relative;
46. color: #fff;
47. padding: 10px 10px 2px;
48. text-align: center;
49.}
50..view a.info {
51. display: inline-block;
52. text-decoration: none;
53. padding: 2px 6px;
54. background: #fff;
55. color: #006600;
56. text-transform: uppercase;
57.border: 1px solid #006600;
58.border-radius: 5px;
59.
60.}
61..view a.info: hover {
62. -webkit-box-shadow: 0 0 5px #000;
63. -moz-box-shadow: 0 0 5px #000;
64. box-shadow: 0 0 5px #666666;
65.}
66.
67..view-tenth img {
68. -webkit-transform: scaleY(1);
69. -moz-transform: scaleY(1);
70. -o-transform: scaleY(1);
71. -ms-transform: scaleY(1);
72. transform: scaleY(1);
73. -webkit-transition: all 0.7s ease-in-out;
74. -moz-transition: all 0.7s ease-in-out;
75. -o-transition: all 0.7s ease-in-out;
76. -ms-transition: all 0.7s ease-in-out;
77. transition: all 0.7s ease-in-out;
78.}
79..view-tenth .mask {
80. background-color: rgba(255, 255, 255, 0.3);
81. -webkit-transition: all 0.5s linear;
82. -moz-transition: all 0.5s linear;
83. -o-transition: all 0.5s linear;
84. -ms-transition: all 0.5s linear;
85. transition: all 0.5s linear;
86. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
87. filter: alpha(opacity=0);
88. opacity: 0;
89.}
90..view-tenth h2 {
91. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
92. background: transparent;
93. margin: 20px 40px 0px 40px;
94. -webkit-transform: scale(0);
95. -moz-transform: scale(0);
96. -o-transform: scale(0);
97. -ms-transform: scale(0);
98. transform: scale(0);
99. color: #006600;
100. -webkit-transition: all 0.5s linear;
101. -moz-transition: all 0.5s linear;
102. -o-transition: all 0.5s linear;
103. -ms-transition: all 0.5s linear;
104. transition: all 0.5s linear;
105. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
106. filter: alpha(opacity=0);
107. opacity: 0;
108.}
109..view-tenth p {
110. color: #006600;
111. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
112. filter: alpha(opacity=0);
113. opacity: 0;
114. -webkit-transform: scale(0);
115. -moz-transform: scale(0);
116. -o-transform: scale(0);
117. -ms-transform: scale(0);
118. transform: scale(0);
119. -webkit-transition: all 0.5s linear;
120. -moz-transition: all 0.5s linear;
121. -o-transition: all 0.5s linear;
122. -ms-transition: all 0.5s linear;
123. transition: all 0.5s linear;
124.}
125..view-tenth a.info {
126. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
127. filter: alpha(opacity=0);
128. opacity: 0;
129. -webkit-transform: scale(0);
130. -moz-transform: scale(0);
131. -o-transform: scale(0);
132. -ms-transform: scale(0);
133. transform: scale(0);
134. -webkit-transition: all 0.5s linear;
135. -moz-transition: all 0.5s linear;
136. -o-transition: all 0.5s linear;
137. -ms-transition: all 0.5s linear;
138. transition: all 0.5s linear;
139.}
140..view-tenth:hover img {
141. -webkit-transform: scale(10);
142. -moz-transform: scale(10);
143. -o-transform: scale(10);
144. -ms-transform: scale(10);
145. transform: scale(10);
146. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
147. filter: alpha(opacity=0);
148. opacity: 0;
149.}
150..view-tenth:hover .mask {
151. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
152. filter: alpha(opacity=100);
153. opacity: 1;
154.}
155..view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
156. -webkit-transform: scale(1);
157. -moz-transform: scale(1);
158. -o-transform: scale(1);
159. -ms-transform: scale(1);
160. transform: scale(1);
161. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
162. filter: alpha(opacity=100);
163. opacity: 1;
164.}
165.

Jetzt liegt alles im Ordner CSS.

Anschließend habe ich, dank deiner Hilfe, in Attribute-Mobile-Attribute den Quellcode:

<link rel="stylesheet" type="text/css" href="http://deineseite.de/css/hover.css" />

eingefügt.

Dann in Zeta einen neuen Artikel erstellt mit dem Quellcode:

<div class="view view-tenth"><img src="http://deineseite.de/css/deinbild.jpg" />
<div class="mask">
<h2>Überschrift</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<a class="info" href="dein Link">weiter</a></div>
</div>

Diesen entsprechend meiner Seite abgeändert und das Bild wurde auch gefunden.

Genau dieses Bild wird dauerhaft angezeigt ohne den Effekt des Wechselns zum hinterlegten Text. In welcher Form muß der Text in der CSS liegen (Format)??
Auch das Hintergrundbild wird nicht dargestellt.

Meine Vermutung ist, dass ich am Quellcode-hover einen Fehler drin habe. Aber ich leider keine Erfahrung in der html-Programmierung habe und bisher alles über die Zeta-Tools erledigen konnte.

Nochmals vielen Dank für deinen entscheidenden Tipp

Gruß Michael

Hallo Mario,

vielen dank für deine schnelle Reaktion. Attribute habe ich gefunden und Grafik konnte ich darstellen. Allerdings mit dem Switch-Effekt zum Text klappt es nicht . Sehe immer nur die Grafik.
Bin neu im HTML-programmieren und benötige Hilfe.

Danke nochmals.

Hallo Mario,
bitte wo finde ich: "In Zeta öffnet Ihr die Attribute - Mobile-Script und fügt folgendes ein"

Hallo, ich möchte einen "versteckten Text" hinter ein Bild legen. Wenn der User dann das Bild anklickt oder mit dem Cursor drüber streicht soll der "versteckte Text" aufpoppen. Wie wird das realisiert?

Über Popup-Bild habe ich es schon versucht.

Hallo, möchte für eine Anfahrtsbeschreibung Google maps einbinden. Wo finde ich Unterstützung?