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

**Garion** · #1 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. 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]

**phoenix** · #2 27.02.11, 23:19

Versuch mal sowas einzubauen:

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

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

Code:

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

**Garion** · #3 28.02.11, 06:38

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.

**phoenix** · #4 28.02.11, 12:03

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><span class=".$$rating$$"></span></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.

**Garion** · #5 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** · #6 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** · #7 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.
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** · #8 28.02.11, 22:26

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

**Garion** · #9 01.03.11, 06:12

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

**Ylloh** · #10 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:

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Software c++ frage ...	paradox	Installation, Konfiguration, Hardware und Software	3	01.03.11 13:14
IQ-Frage	gelöschter User	Lounge	40	17.02.11 21:49
Frage zu Tut	GrimmeL	Hilfestellung, Tipps und Tricks	12	27.12.10 21:32
CSS Frage	Dagger	Hilfestellung, Tipps und Tricks	2	12.04.10 00:50
Ich hab ne Frage	Sinux	Lounge	14	08.04.10 17:51

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)