function doPic()

[Dominik]

Hallo zusammen,

ich habe mehrere 5 Bilder-große Bildergalerien nach folgendem Muster angefertigt:

Erste Zeile und Spalte: Mainpic, welches sich verändern soll.
Zweite Zeile und mehrere Spalten: Thumbnails mit Hyperlinks, die durch das Javascript dann das Mainpic dementsprechend verändern.
(Das ist hoffe ich mal verständlich von mir erklärt :)  )

Das ganze funktioniert wie gewünscht. Nun muss jedoch zu jeder Galerie noch ein Text hinzugefügt werden, der an der Stelle des Mainpics dargestellt werden soll. Also soll jetzt beispielsweise beim Öffnen von galerie_01.html der Text dargestellt sein und die Thumbnail-Leiste darunter. Beim Klick auf ein Thumb soll dann der Text durch das Bild ersetzt werden.

Mein einziger Gedanke das umzusetzen wäre den Text als Grafik anzufertigen und somit bei der ursprünglichen Variante zu bleiben. Das ist aber auf Dauer unpraktisch.

Ich hoffe ich habe meine Problematik verständlich dargestellt und hoffe auf Antworten. :)

vielen Dank schon mal,
Dominik

[Cheatah]

Hi,

Ich hoffe ich habe meine Problematik verständlich dargestellt

nein, nur Dein Ziel, und auch das nur rudimentär. Von einer Problematik war Deinem Posting nicht das geringste zu entnehmen.

Cheatah

[Dominik]

Hi,

Ich hoffe ich habe meine Problematik verständlich dargestellt

nein, nur Dein Ziel, und auch das nur rudimentär. Von einer Problematik war Deinem Posting nicht das geringste zu entnehmen.

Cheatah

...gut, dann hier eine konkrete Frage:
Welche Möglichkeit gibt es, meinen Plan -einen Text zu Beginn an zu zeigen, der dann durch das Bild ersetzt wird- umzusetzen/zu realisieren.
Ist das überhaupt sinnvoll oder welche Umsetzung ergibt mehr Sinn??

hoffe das hilft weiter zum Verständnis meiner Frage :)

beste Grüße,
Dominik

[ChrisB]

Hi,

Welche Möglichkeit gibt es, meinen Plan -einen Text zu Beginn an zu zeigen, der dann durch das Bild ersetzt wird- umzusetzen/zu realisieren.

Bspw. einfach Textinhalt durch Bild austauschen, per innerHTML.

Ist das überhaupt sinnvoll oder welche Umsetzung ergibt mehr Sinn??

Rein per JavaScript, so dass es ohne gar nicht funktioniert, wäre es nicht sinnvoll.

Alle Bilder direkt und sinnvoll strukturiert im Dokument einzubinden, so dass sie auf jeden fall betrachtbar sind, wäre sinnvoller.
JavaScript kann dann hinzukommen, wenn verfügbar, und bspw. bestimmte Bilder am Anfang ausblenden, und dann auf Nutzeraktion hin sichtbar machen, woanders positionieren, etc.

MfG ChrisB

[Dominik]

Hallo,

Bspw. einfach Textinhalt durch Bild austauschen, per innerHTML.

Das Stichwort "innerHTML" hat mich ans Ziel gebracht!! Vielen Dank!

beste Grüße,
Dom

PS: für die Jenigen, die sich für die Lösung interessieren - hier der Code:

<table border="0" cellpadding="0" cellspacing="2" align="center">
<tr>
<td height="80" colspan="10" align="center">
<div align="center" id="changethis">
<script type="text/javascript">
function changeText(){
var oldHTML = document.getElementById('changethis').innerHTML;
var newHTML = "<img src='bild01.jpg' name='mainpic' id='mainpic' />";
document.getElementById('changethis').innerHTML = newHTML;
}
</script>
<!--Fotogalerie Start -->
<script LANGUAGE="JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
document.mainpic.src = imgName;
  }
   }
//-->
</script>
<!--Fotogalerie Ende  -->
<p>  CONTENT  TEXTBLOCK</p>
</div></td>
</tr>
<tr>
<td align="center"><a href="javascript:doPic('bild01.jpg');"><img src="#" alt="" onclick="changeText()" /></a></td>
<td align="center"><a href="javascript:doPic('bild02.jpg');"><img src="#" /></a></td>
</tr>
</table>
<br />
</div>

[EKKi]

Mahlzeit Dominik,

PS: für die Jenigen, die sich für die Lösung interessieren - hier der Code:

Das ist keine Lösung ... das ist *vielleicht* der allererste Schritte vom unsicheren Getrippel zu Beginn des Wegs Richtung Lösung.

MfG,
EKKi

[Dominik]

Hallo,

Das ist keine Lösung ... das ist *vielleicht* der allererste Schritte vom unsicheren Getrippel zu Beginn des Wegs Richtung Lösung.

Das stimmt, das gebe ich zu! Auch dass ich den Javascript-Code von alten Projekten genommen habe (ja ich schäme mich dafür!).

Könntet ihr mir denn evtl. einen Hinweis geben, mit welchen Funktionen ich das besser machen sollte? Also sollte ich dafür bspw. "innerHTML" und "doPic()" außen vor lassen und besser etwas neueres/aktuelleres benutzen ?
Mich interessiert, wie man das sonst noch machen könnte und wahrscheinlihc auch sollte.

Danke für weitere Antworten.
Dominik

[Don P]

Hallo,

Mich interessiert, wie man das sonst noch machen könnte und wahrscheinlihc auch sollte.

Naja, in deinem Code ist so ziemlich jede Zeile verbesserungsbedürftig. Fertige Lösungen werden in diesem Forum selten geboten, aber du kannst auch selber draufkommen. Ich rate dir, wie folgt vorzugehen:

1. Solltest du den Code übersichtich gestalten, d.h. nicht sowas betrachten:

<table border="0" cellpadding="0" cellspacing="2" align="center">
<tr>
<td height="80" colspan="10" align="center">
<div align="center" id="changethis">
<script type="text/javascript">
function changeText(){
var oldHTML = document.getElementById('changethis').innerHTML;
var newHTML = "<img src='bild01.jpg' name='mainpic' id='mainpic' />";
document.getElementById('changethis').innerHTML = newHTML;
}
</script>

Sondern sowas:

<table border="0" cellpadding="0" cellspacing="2" align="center">  
  <tr>  
    <td height="80" colspan="10" align="center">  
  
      <div align="center" id="changethis">  
  
        <script type="text/javascript">  
  
          [code lang=javascript]function changeText(){  
  
            var oldHTML = document.getElementById('changethis').innerHTML;  
            var newHTML = "<img src='bild01.jpg' name='mainpic' id='mainpic' />";  
  
            document.getElementById('changethis').innerHTML = newHTML;  
          }

</script>

<script type="text/javascript">

// Code...

</script>

</div>

</td>
  </tr>
</table>[/code]

Dazu brauchst du einen Editor, der Sytax-Highlighting kann, z.B. TextPad, Notepad++ oder was immer, denn damit wird es bunter: Variablennamen, Schlüssselwörter usw. sind automatisch an der Farbe zu unterscheiden. Im Editor dann alle Tags und Script-Blöcke schön einrücken und nicht mit Leerzeilen sparen, wenn's der Übersichtlichkeit dienlich ist.

2. Fang' ganz oben an und versuche zu verstehen:

• was da steht
• warum es da steht
• ob es überhaupt notwendig ist

Du erkennst z.B. ein <table>-Tag am Anfang, d.h. eine Tabelle. Deine nächste Frage (die dir hier auch schon gestellt wurde) muss lauten: Warum steht hier alles in einer Tabelle?
Weil darin alles schön nebeneinander zu liegen kommt, denkst du wahrscheinlich, ok.
Nun die dritte Frage: Ist es nötig? Für die Antwort musst du vielleicht ein bisschen recherchieren, aber ich kann dir verraten: Es ist nicht nötig.

Denn alles, was das Layout, d.h. das Aussehen am Bildschirm betrifft, wie z.B. ob Bilder nebeneinander oder übereinander stehen, muss nicht und sollte auch nicht mit HTML-tags wie <table> und auch nicht mit HTML-Attributen wie align oder width bestimmt werden, sondern mit style-Angaben in einem sog. stylesheet. CSS ist das Stichwort.

Ein Code ist dann gut, wenn nur das nötigste, was man für die Funktionalität braucht, übersichtlich drinsteht, und unterschiedliche Funktionen wie HTML-Auszeichnung, Stilangaben und evtl. JavaScript-Code fein säuberlich getrennt sind, am besten sogar in verschiedenen Dateien: eine für HTML, eine für CSS und eine für JavaScript.

3. Was den JavaScript-Code betrifft, geht man genauso vor:

• was steht da?
• warum steht es da?
• ist es notwendig?

Z.B. steht am Anfang die Zeile:
var oldHTML = document.getElementById('changethis').innerHTML;

Offenbar wird der momentane Inhalt eines 'changethis'-Elements in der Variablen oldHTML gespeichert.
Aber warum? oldHTML wird anschließend nie mehr angesprochen, also ist es völlig unnötig, die Variable anzulegen und zu befüllen - weg damit.

usw. usf.  Wenn du die drei Fragen auf auf jedes Detail anwendest, musst du zwangläufig, um die Antworten zu finden, das eine oder andere JS-Konstrukt nachschlagen und wirst dabei leicht lernen, wie man es richtig macht. Das steht nämlich an vielen Stellen im Web beschrieben, z.B. in SELFHTML.

Für konkrete Fragen gibt es dieses Forum.

Viel Spass,
Don P

[Dominik]

Hey Don P,

danke für die detaillierte Antwort!!

• was steht da?
• warum steht es da?
• ist es notwendig?

In meinem Code habe ich nun nahezu alles verändert:

• Tabellen-Layout durch <div>-Bereiche sowie <ul>-Bereiche ersetzt
• Css-Datei angelegt und ins html eingebunden
• Javascript-Code von oben bis unten neu geschrieben und in externe Datei verlagert, dann ins html eingebunden

Jetzt steht auch nur noch alles Notwendige im HTML-/Css-/ und JS-Code.

Also danke nochmal für die hilfreichen Antworten!

beste Grüße,
Dominik

[Struppi]

PS: für die Jenigen, die sich für die Lösung interessieren - hier der Code:

Ohje, der ist schlimm.

<table border="0" cellpadding="0" cellspacing="2" align="center">

Wozu die Tabelle?

<!--Fotogalerie Start -->
<script LANGUAGE="JavaScript">

Wo hast du diesen prähistorischen Code her? Der muss mindestens 12 Jahre alt sein und ist nicht valide, da das Pflichtatribut 'type' fehlt.

<!--

HTML Kommentare im Skriptblick waren selbst vor 12 Jahren nicht mehr nötig, es gibt keine Browser mehr, die das script-Tag nicht kennen.

browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

daran erkennt man, dass das Skript, das du wohl irgendwo gefunden hast, sehr sehr alt ist. Aber es war schon damals eine schlechte Technik Fähigkeiten des Browsers über navigator.appName zu bestimmen. Ein einfacher Featuretest ist völlig ausreichend.

function doPic(imgName) {
if (ns3up || ie4up) {
document.mainpic.src = imgName;

Und das konnten auch ältere Browser, aber du erwartest nicht wirklich, dass jemand mit dem IE 3 oder Netscape 2 noch ernsthaft surft?

Struppi.