Photoshop-Cafe.de :: Dein Photoshop-Forum - Software Frage zu Programmiersprache

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Installation, Konfiguration, Hardware und Software (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=28)

- - Software Frage zu Programmiersprache (https://www.photoshop-cafe.de/forum/showthread.php?t=11686)

Frage zu Programmiersprache

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. 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:

Code:

[HEADER]

<!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

{

[JAVASCRIPT]

 width:48%;

[/JAVASCRIPT]

 border:1px dashed #6c7b8b;

 background:#f0f0f0;

}

.imgbox

{

 float:left;

 padding:2em 1em 0em;

 margin:0;

}

img

{

 margin:0;

 padding:0;

[JAVASCRIPT]

 cursor:pointer;

[/JAVASCRIPT]

}

.imginfo

{

 float:left;

 margin-top:0.5em;

[JAVASCRIPT]

 cursor:default;

[/JAVASCRIPT]

}

.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;

[JAVASCRIPT]

 width:48%;

[/JAVASCRIPT]

 color:#6c7b8b;

}

#note a

{

 font-weight:bold;

 color:#1c86ee;

}

#note a:hover

{

 color:#6c7b8b;

}

.spacer

{

  clear: both;

}

[JAVASCRIPT]

.expander

{

 padding:0;

 width:1em;

 display:block;

 float:left;

 text-align:center;

 margin-right:0.5em;

 cursor:pointer;

}

[/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

  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>

[/JAVASCRIPT]

</head>

<body [JAVASCRIPT]onload="init()"[/JAVASCRIPT]>

<h1>$$PAGETITLE$$ &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &ensp; $$TOTALNUMBER$$ $$ITEMS$$</h1>

<div id="left">

[/HEADER]

[ITEM]

<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>

[/ITEM]

[FOOTER]

<div class="spacer">&nbsp;</div>

</div>

<p id="note">$$GENERATOR_NOTE$$</p>

</body>

</html>

[/FOOTER]

[POST]

[/POST]

Versuch mal sowas einzubauen:

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

Code:

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

Also die von dir angegebene Codezeile einfach mit dem hier ersetzen:

Code:

<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):

Code:

<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.

Du sollst das hier:

Code:

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

durch das hier ersetzen:

Code:

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

und zusätzlich noch die CSS Klassen definieren:

Code:

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.

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.

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.

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.
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.

Öhm ja, da steht x/10. Du hast die Änderung nicht upgeloadet, die wäre interessant ;)

:bonk: Mein Fehler, sorry. Einmal aktualisierter Upload, kommst sofort. Bitteschön.

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:

Code:

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...

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:

Code:

 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;

Code:

 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;

Code:

[/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:

Code:

span.8

{

background-image:url(8Sterne.jpg);

}

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 ;)

Zur Position:

Code:

<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:

Code:

.span.8

{

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

}

also so:

Code:

span.8

{

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

}

Habe es jetzt so in der Datei drin:

Code:

 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.

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.

Halb so wild, war nur ein Selektoren Problem. Lösung wie folgt:

Erst die CSS Befehle zum integrieren:

Code:

.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:

Code:

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

noch abändern in:

Code:

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

Müsste dann jetzt eigentlich funktionieren.

Alternativ kannst Du aber eben auch folgendes machen:
CSS alles weglassen (rating0-ratingx) und anstatt:

Code:

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

schreiben wir:

Code:

<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 ;)

Ööööö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!

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?

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 ;)

Und verpass dem IMG Tag mal noch n alt="" und border="0".

Aber klar doch! Das ist zwar eine französische Community mit englischsprachigem Support Center, aber da schwirren bestimmt auch jede Menge Deutsche/Deutschsprachige rum ;)