PDA

Vollständige Version anzeigen : Software Frage zu Programmiersprache

Garion
27.02.11, 21:07
Hey liebe Gemeinde!

Ich habe da mal eine Frage an euch. Es geht um eine Sprache die ich nicht beherrsche, eine Programmiersprache. Was es ist weiß ich nicht...HTML? CSS? PHP? Fragt mich nicht, ich hab keine Ahnung. Wahrscheinlich ist's aber HTML, warum erklärt sich sofort.

Was habe ich vor? Ich habe mittels GC Star eine Exportdatei über Datei->Exportieren->HTML erstellt. Das ergebnis seht ihr hier (http://www.photoshop-cafe.de/garion/garion/DVD/Garion%27s%20DVD%20Sammlung.html). Ursprünglich war die Anzahl an DVD's gar nicht dabei...soviel Verständnis hab ich dann doch noch so gerade eben, dass ich das selbst einfügen konnte.

Ich hätte aber gern, wenn man auf einen beliebigen Film klickt, dass anstatt der Bewertung "X/10" eines dieser Bilder hier erscheint:

http://www.photoshop-cafe.de/garion/garion/DVD/0Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/1Stern.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/2Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/3Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/4Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/5Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/6Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/7Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/8Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/9Sterne.jpg
http://www.photoshop-cafe.de/garion/garion/DVD/10Sterne.jpg

Aber ich weiß nicht, wie ich den Code dafür basteln muss. Denn wenn das $$rating$$ = 1 ist, dann soll die Grafik für einen Stern angezeigt werden und keine andere. Aber wie mach ich klar, wie das Rating ist. Geht das einfach mit "=1"? Kann ich mir nicht vorstellen. Ich weiß nicht, wie da die Kommunikation und der Exportfunktion von GC Star ist.

Ich hab auch schon an eine if-Klausel gedacht. Aber dafür müsste ich ja erst wissen, wie ich dem klar mache, welches Rating gleich welche Grafik bedeutet. Ich hoffe ihr könnt mir helfen. Eigentlich wollte ich hier die Datei hoch laden, wo alles drin steht...aber ich weiß nicht welche Dateiendung das ist, also mach ich das anders. Ganz unten habe ich etwas fett und rot markiert. Das ist die Stelle wo das $$rating$$ steht:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
Template made by Tian. It emulates a shelf display.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$$PAGETITLE$$</title>
<style type="text/css">
body
{
color:black;
}
h1
{
text-align:left;
margin-left:0.5em;
font-size:200%;
font-weight:bold;
color:#6c7b8b;
}
h2
{
font-size:150%;
text-align:center;
color:#1c86ee;
font-weight:bold;
}
h3
{
font-size:120%;
font-weight:bold;
margin:1em 0;
color:#6c7b8b;
border-bottom:1px dashed #6c7b8b;
}
#left
{

width:48%;

border:1px dashed #6c7b8b;
background:#f0f0f0;
}
.imgbox
{
float:left;
padding:2em 1em 0em;
margin:0;
}
img
{
margin:0;
padding:0;

cursor:pointer;

}
.imginfo
{
float:left;
margin-top:0.5em;

cursor:default;

}
.synopsis
{
height:8em;
overflow:auto;
padding:0.2em;
background:#f0f0f0;
}
table
{
margin:0 0.5em;
}
th
{
font-weight:bold;
text-align:left;
white-space:nowrap;
padding:0.5em;
background:#f0f0f0;
}
td
{
padding:0.5em;
background:#f0f0f0;
}
#note
{
text-align:center;
padding-top:0.5em;

width:48%;

color:#6c7b8b;
}
#note a
{
font-weight:bold;
color:#1c86ee;
}
#note a:hover
{
color:#6c7b8b;
}
.spacer
{
clear: both;
}

.expander
{
padding:0;
width:1em;
display:block;
float:left;
text-align:center;
margin-right:0.5em;
cursor:pointer;
}

.info
{
position:fixed;
top:0;
right:1%;
width:48%;
display:none;
}
.details
{
overflow: auto;
height: 500px;
}
</style>

<script type="text/javascript">
<!--
function getBoxes()
{
return document.getElementById("left").getElementsByTagName("div")
}
function getHeight()
{
//From http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight - 150;
}
function init()
{
// CSS changes from http://www.quirksmode.org/dom/changess.html
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[0].cssRules)
theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
theRules = document.styleSheets[0].rules
theRules[theRules.length-1].style.height = getHeight()+'px';

boxes = getBoxes()
for(i=0; i < boxes.length; i++)
{
box = boxes[i]
if (box.className == "movie")
{
boxes2 = box.getElementsByTagName("div")
boxes2[0].onclick = function(evt)
{
div = this.parentNode
showMe(div.getElementsByTagName("div")[1], this)
}
}
}
headers = document.getElementById("left").getElementsByTagName("h3")
for(i=0; i < headers.length; i++)
{
header = headers[i]
header.style.cursor = 'pointer'
header.innerHTML = '<span class="expander">−</span> ' + header.innerHTML
header.onclick = function(evt)
{
table = this.nextSibling
while (table.tagName != "TABLE") { table = table.nextSibling }
if (table.style.display == "none")
{
table.style.display = "table"
this.innerHTML = this.innerHTML.replace(/\+<\/span>/, '−</span>')
}
else
{
table.style.display = "none"
this.innerHTML = this.innerHTML.replace(/−<\/span>/, '+</span>')
}
}
}
}
var currentBox = 0
var currentImg = 0
function showMe(box, img)
{
hidePrevious()
box.style.display = "block"
img.style.background = "#4b4f63"
img.style.padding = "1em"
currentBox = box
currentImg = img
}
function hidePrevious()
{
if (currentBox)
{
currentBox.style.display = "none"
currentImg.style.background = "#f0f0f0"
currentImg.style.padding = "2em 1em 0em"
}
}
-->
</script>

</head>
<body onload="init()">
<h1>$$PAGETITLE$$ &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &ensp; $$TOTALNUMBER$$ $$ITEMS$$</h1>
<div id="left">


<div class="movie">
<div class="imgbox">
<img src="$$image$$" height="$$HEIGHT_PIC$$" alt="$$title$$" title="$$title$$" />
</div>
<div class="info">
<h2>$$title$$</h2>
<div class="details">
<h3>$$info_LABEL$$</h3>
<table>
<tr>
<td rowspan="5" width="10%">
<img class="imginfo" src="$$image$$" height="$$HEIGHT_PIC$$" alt="$$title$$" title="$$title$$" />
</td>
<th>$$date_LABEL$$</th><td>$$date$$</td>
</tr>
<tr><th>$$director_LABEL$$</th><td>$$director$$</td></tr>
<tr><th>$$time_LABEL$$</th><td>$$time$$</td></tr>
<tr><th>$$genre_LABEL$$</th><td>$$genre$$</td></tr>
<tr><th>$$actors_LABEL$$</th><td>$$actors$$</td></tr>
<tr>
<td colspan="3">
<p class="synopsis">
$$synopsis$$
</p>
</td>
</table>
<h3>$$details_LABEL$$</h3>
<table>
<tr><th>$$rating_LABEL$$</th><td>$$rating$$/10</td></tr>
<tr><th>$$format_LABEL$$</th><td>$$format$$</td></tr>
<tr><th>$$borrower_LABEL$$</th><td>$$borrower$$</td></tr>
</table>
</div>
</div>
</div>


<div class="spacer">&nbsp;</div>
</div>
<p id="note">$$GENERATOR_NOTE$$</p>
</body>
</html>
phoenix
27.02.11, 23:19
Versuch mal sowas einzubauen:

span.x {
background-image:url(x.xxx)}

<span class=".$$rating$$"></span>

<tr><th>$$rating_LABEL$$</th><td><span class=".$$rating$$"></span></td></tr>
Garion
28.02.11, 06:38
Also die von dir angegebene Codezeile einfach mit dem hier ersetzen:

<tr><th>$$rating_LABEL$$</th><td>$$rating$$/10</td></tr>


Und das was du über dem Codeblock geschrieben hast... die ersten beiden Zeilen, also von "span" bis "}" würde ich hier einbauen (eine Zeile über dem ersetzten halt):

<table>
------>
<tr><th>$$rating_LABEL$$</th><td>$$rating$$/10</td></tr>


Und was ist mit der dritten Zeile? Habe ich die nicht schon durch das ersetzen eingebaut? Oder muss ich die zwei Mal drin haben? Und was soll ich für die x einsetzen? Bei span hätte ich jetzt den Bildtitel angegeben...aber dann müsste ich ja rein theoretisch für jedes der 11 Bilder einen so'nen Befehl anlegen oder? Und was soll bei URL für die x eingesetzt werden? Ich frag nur so doof, weil der Punkt mich total irritiert... "x.xxx"? Müsste dann statt dessen der Pfad zu den Bildern hin?
Und was ich jetzt noch nicht so ganz verstanden habe, wie der jetzt weiß welches Sternenbild der einsetzen muss.
phoenix
28.02.11, 12:03
Du sollst das hier:
<tr><th>$$rating_LABEL$$</th><td>$$rating$$/10</td></tr>

durch das hier ersetzen:
<tr><th>$$rating_LABEL$$</th><td><span class=".$$rating$$"></span></td></tr>

und zusätzlich noch die CSS Klassen definieren:

span.x {
background-image:url(x.xxx);}

wobei die Klassen optional sind, erstmal schaun was er an Output generiert, wenn Du den HTML Tag änderst.
Garion
28.02.11, 20:42
Okay, habe ich getan. Die CSS Klassen hab ich erst einmal weg gelassen. Nachdem ich das ersetzt hatte, ist das Feld "Bewertung" leer geblieben. Also nicht mal die "x/10" standen noch da.
phoenix
28.02.11, 21:16
Was ist das denn überhaupt, sprich wo läuft das? Im Browser? Dann bitte einmal den Quelltext von der entsprechenden Umgebung zeigen. Aber zur Laufzeit, nicht das Template mit den Platzhaltern.

Das x/10 nicht mehr angezeigt wird ist normal, bisher wurde '$$rating$$/10' als Text in der Tabelle ausgegeben, jetzt wird das $$rating$$ dazu benutzt eine CSS Klasse zu definieren und das '/10' haben wir gelöscht, passt noch alles.
Garion
28.02.11, 21:56
Ja, das läuft im Browser. Ich bin mir nicht sicher welche Stelle vom Quelltext ich rauskopieren soll, vielleicht magst du dir das selbst mal ansehen? Das wäre super.

Das ganze läuft hier (http://www.photoshop-cafe.de/garion/garion/DVD/Garion's DVD Sammlung.html).
Einfach auf einen x-bliebigen Film klicken um die Details anzeigen zu lassen, ganz unten steht dann der Punkt bewertung, wo die Sterne hin sollen.
phoenix
28.02.11, 22:26
Öhm ja, da steht x/10. Du hast die Änderung nicht upgeloadet, die wäre interessant ;)
Garion
01.03.11, 06:12
:bonk: Mein Fehler, sorry. Einmal aktualisierter Upload, kommst sofort. Bitteschön (http://www.photoshop-cafe.de/garion/garion/DVD/Garion's DVD Sammlung.html).
Ylloh
01.03.11, 09:36
Sieht doch schon mal ganz gut aus ;)

der "." ist noch zuviel also der vor $$rating...

Setz jetz mal in den <style type="text/css"> -Bereich folgendes ein:

span.8 {
background-image:url(8.jpg);}
und schau ob das bei den 8ern ersetzt wird.

Wenn das der Fall ist, musst du nur noch für jede Zahl ein span in den css-Bereich einsetzten mit dem Verweis auf das Bild, fertig.

Eventuell muss die SPAN-Größe noch angepasst werden...
Garion
01.03.11, 12:28
Hat leider nicht funktioniert...allerdings war ich mir auch nicht wirklich sicher, wo genau ich das jetzt einsetzen sollte. Versucht hab ich's an den drei folgenden Stellen:


Template made by Tian. It emulates a shelf display.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$$PAGETITLE$$</title>
<style type="text/css">
------>
body
{
color:black;
}
h1
{
text-align:left;
margin-left:0.5em;
font-size:200%;
font-weight:bold;
color:#6c7b8b;
}
h2
{
font-size:150%;
text-align:center;
color:#1c86ee;
font-weight:bold;


Template made by Tian. It emulates a shelf display.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$$PAGETITLE$$</title>
<style type="text/css">
body
{
color:black;
}
------>
h1
{
text-align:left;
margin-left:0.5em;
font-size:200%;
font-weight:bold;
color:#6c7b8b;
}
h2
{
font-size:150%;
text-align:center;
color:#1c86ee;
font-weight:bold;


[/JAVASCRIPT]
.info
{
position:fixed;
top:0;
right:1%;
width:48%;
display:none;
}
.details
{
overflow: auto;
height: 500px;
}
-------->
</style>
[JAVASCRIPT]
<script type="text/javascript">
<!--
function getBoxes()
{
return document.getElementById("left").getElementsByTagName("div")
}
function getHeight()
{
//From http://www.howtocreate.co.uk/tutorials/javascript/browserwindow


Eingefügt habe ich jedes Mal:

span.8
{
background-image:url(8Sterne.jpg);
}
phoenix
01.03.11, 12:44
display:block; width:20px; height:20px noch mit in die CSS zum background... und schaun das der Pfad stimmt, dann müsste das laufen. Die 20px sind ein Platzhalter ;)
phoenix
01.03.11, 12:52
Zur Position:

<style type="text/css">
------>

HIER WÄRE ES Z.B. EINFÜGBAR

body
{
color:black;
}

Du kannst aber eigentlich auch auf den Span verzichten und direkt einen IMG Tag verwenden:

<img src="$$rating$$"> oder <img src="http://www.bla.de/meinbild/$$rating$$.jpg">

Ist das Selbe in orange.

edit:

Den ersten Punkt vor dem Span weg:
.span.8
{
display:block; width:20px; height:20px background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/8Sterne.jpg);
}

also so:

span.8
{
display:block; width:20px; height:20px background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/8Sterne.jpg);
}
Garion
01.03.11, 13:02
Habe es jetzt so in der Datei drin:

Template made by Tian. It emulates a shelf display.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$$PAGETITLE$$</title>
<style type="text/css">

.span.8
{
display:block; width:20px; height:20px; background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/8Sterne.jpg);
}

body
{
color:black;
}
h1
{
text-align:left;
margin-left:0.5em;


Leider nüscht. (http://www.photoshop-cafe.de/garion/garion/DVD/Garion's DVD Sammlung.html)




Die Verzeichnisstruktur ist übrigens wie folgt:

...DVD/:

Garion's DVD Sammlung.html
0Sterne.jpg
1Stern.jpg
2Sterne.jpg
...


...DVD/Garion's DVD Sammlung_images/:

Alle DVD Cover


Warum schleichen sich bei mir immer Punkte ein, die da gar nicht hin gehören? :gruebel:
Daran lag's aber leider auch nicht.
phoenix
01.03.11, 13:35
Halb so wild, war nur ein Selektoren Problem. Lösung wie folgt:

Erst die CSS Befehle zum integrieren:

.rating0 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/0Sterne.jpg);}

.rating1 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/1Sterne.jpg);}

.rating2 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/2Sterne.jpg);}

.rating3 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/3Sterne.jpg);}

.rating4 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/4Sterne.jpg);}

.rating5 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/5Sterne.jpg);}

.rating6 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/6Sterne.jpg);}

.rating7 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/7Sterne.jpg);}

.rating8 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/8Sterne.jpg);}

.rating9 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/9Sterne.jpg);}

.rating10 {
display:block;
width:264px;
height:28px;
background-image:url(http://www.photoshop-cafe.de/garion/garion/DVD/10Sterne.jpg);}


Und da wir den Selektor jetzt von span.x auf ratingx geändert haben, müssen wir im Template die Zeile:

<tr><th>$$rating_LABEL$$</th><td><span class="$$rating$$"></span></td></tr>

noch abändern in:

<tr><th>$$rating_LABEL$$</th><td><span class="rating$$rating$$"></span></td></tr>

Müsste dann jetzt eigentlich funktionieren.

Alternativ kannst Du aber eben auch folgendes machen:
CSS alles weglassen (rating0-ratingx) und anstatt:
<tr><th>$$rating_LABEL$$</th><td><span class="rating$$rating$$"></span></td></tr>

schreiben wir:

<tr><th>$$rating_LABEL$$</th><td><img src="http://www.photoshop-cafe.de/garion/garion/DVD/$$rating$$Sterne.jpg"></td></tr>

spart etwas Code, hast Du eh schon genug von ;)
Garion
01.03.11, 14:31
Öööööh! Klappt super! Sowohl die erste (lange), als auch die zweite (kurze) Version. Habe mich dann für die Kurzversion entschieden. Danke euch zwei, ihr seid Spitze :ok: :clap:. Guckscht'de hier! (http://www.photoshop-cafe.de/garion/garion/DVD/Garion's DVD Sammlung.html)

Jetzt noch eine Frage zum Schluss:
Darf ich die mit eurer Hilfe modifizierte Datei in die GC Star Community einbringen damit andere GC Star Nutzer was davon haben?
Ylloh
01.03.11, 14:34
Der HTML-Code hat wohl nicht genug Schöpfungshöhe, dass du das nicht machen könntest *gg*

Aber ja nicht vergessen, das PSC zu erwähnen ;)
phoenix
01.03.11, 14:54
Und verpass dem IMG Tag mal noch n alt="" und border="0".
Garion
01.03.11, 14:54
Aber klar doch! Das ist zwar eine französische Community mit englischsprachigem Support Center, aber da schwirren bestimmt auch jede Menge Deutsche/Deutschsprachige rum ;)
Garion
01.03.11, 21:00
Et voilá! (http://forums.gcstar.org/viewtopic.php?pid=7288#p7288) ;)