- 1. Designordner: Das JavaScript headerflash.js im Ordner des verwendeten Designs abspeichern.
- 2. global.ccml : Das eingesetzte JavaScript in der global.ccml anmelden .
- 3. Verknüfung zum Script herstellen.
- 4. html-Absatz : Anlegen und Code für den Flashfilm eingeben.
- 5. CSS- Styleangaben ergänzen
- 6. pic_headertitel.gif entpacken und im Designordner als pic_headertitel.gif abspeichern
- 7. Flashfilme erstellen, die die Überschrift enthalten (als Serviceleistung von Webdesignconsult.de: je 10,00 €)
1. JavaScriptCode
Laden Sie sich von hier das JavaScript
headerflash.js [6 KB] auf Ihren Rechner.
2. global.ccml
Folgende Codezeile in den Zwischenspeicher kopieren und in der global.ccml einfügen.
<cc:*>für Flashdedect als Headerzeile:</cc:*>
<cc:asset src="headerflash.js" dst="headerflash.js" obj="myheaderflashscript">
3. Script einbinden
(A) Kommen die Titelzeilen-Flashfilme wiederholt auf Ihrer Website zum Einsatz, binden Sie den Scriptaufruf diret im Head der navigation.ccml ein:
<cc:*>flashdedect für Headerzeile im Head der navigation.ccml einbinden</cc:*>
<script type="text/javascript" src="<cc:print value="&myheaderflashscript.url">"></script>
CAVE: Weniger ist mehr ...
(B) Wenn Sie lediglich einen Flashfilm zeigen wollen, können Sie die Verknüpfung zum Javascript direkt vor dem Aufruf zum Flashfilm platzieren:
<cc:*>flashdedect für Headerzeile direkt im html-Absatz einbinden</cc:*>
<script src="<cc:print value="&myheaderflashscript.url">" type="text/javascript"></script>
4. Code für den Flashfilm + Alternativgrafik
Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.
<cc:*> generiert die Alternativgrafik:</cc:*>
<cc:picture obj="pic.h5"
src="pic_headertitel.gif"
dst="'ph5'+&page.content.uid+'.gif'"
text="&page.content.caption"
fontname="Action Man"
textcolor="#990000"
textleft="10"
texttop="5"
fontbold="0"
textalign="left"
textvalign="top"
fontsize="18"
smooth="2"
crop="0">
<div class="flashmovieheader"><!--Start Movie-->
<br />
<div id="flashmovieheaderpic" style="background:url(<cc:printpictureurl obj="pic.h5">) no-repeat;">
<h4 style="display:none;"><cc:print value="&page.content.caption"></h4>
</div>
<cc:*> Ausgabecode für Flashfilm:</cc:*>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://www.deineUrl.de/flash/film1.swf", "sotester", "500", "30", "9", "#ffffff");
so.write("flashmovieheaderpic");
// ]]>
</script></div>
Erläuterung
530 = Breite
50 = Höhe
9 = Flashplayerversion
#ffffff = Hintergrundfarbe
Bitte anpassen:
http://www.deineDomain.de/deinfilm.swf
Eine Liste für die Ausgabe unterschiedlicher Titel finden Sie
hier
.
CSS
Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.
/* für h1 / h2 Überschrift: für Alternativbild des Flashs. WICHTIG: Die Größe muss mit der des Filmes übereinstimmen*/
div.flashmovieheader {
border: none;
text-align: left;
width: 480px;
height: 60px;
}
/* für h1 / h2 Überschrif: Alternativbild des Flashs. WICHTIG: Die Größe muss mit der des Filmes übereinstimmen*/
/* macht nur Sinn, wenn der Ausgabecode NICHT auf transparent steht. Ansonsten wird die Grafik hinter dem Film angezeigt */
#flashmovieheaderpic {
border: none;
text-align: left;
width: 480px;
height: 60px;
background: url(../images/headergrafik.gif) no-repeat;
}
Die Werte passen Sie bitte an Ihre Erfordernisse an. Setzen Sie mehrere Headerflashs ein, sind die Ausgabegrafikgen jeweils einzeln zu definieren.
