Ergebnis 1 bis 7 von 7

Thema: Bildgre an HTML bergeben

  1. #1
    Meister(in) Avatar von Cujo
    Registriert seit
    11.07.2008
    Beitrge
    438
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard Bildgre an HTML bergeben

    Hallo,

    ich habe mir ein Slideshow-Script runtergeladen. Jetzt mchte ich das so verndern, dass zufallsgesteuert aus einer Auswahl von 24 Ordnern mit je 8 Bildern ein Ordner ermittelt und dessen 8 Bilder angezeigt werden. Die Zufallsfunktion habe ich hingekriegt.

    Das Problem ist jetzt aber, dass es 2 verschiedene Ordner gibt. Einmal Ordner mit Bildern im Format 256x341 und einmal Ordner mit Bildern im Format 341x256. Fr jedes Format gibt es auch noch ein extra Startbild.

    Jetzt habe ich versucht, ein zweites Script einzubinden, dass die Bildbreite und Bildhhe ermittelt und die entsprechenden Werte dem HTML-Befehl <img> bergibt.

    Ich habe versucht mir die JS-Grundbegriffe mittels SELFHTML anzulesen, aber irgendwie haut es nicht so hin, wie ich will. Das Bild wird nicht angezeigt

    Knnt ihr euch das bitte mal angucken? Ich wre euch sehr dankbar.
    Code:
    var maxnr = 8; // Anzahl der Bilder
    var pause = 2000; // Pause zwischen den Bildern
    var aktnr = 0, halt = 1, an = 1
    var zufall=Math.round&#40;Math.random&#40;&#41;*24+1&#41;
    var startbild = new Image&#40;&#41;;
    if &#40;zufall<100&#41; &#123;
    zufall="0" + zufall;
    if &#40;zufall<10&#41; &#123;
    zufall="0" + zufall;
    &#125;
    &#125;
    function doIt&#40;&#41;
    &#123;
    var newImage = new Image&#40;&#41;;
    newImage.onload = function &#40;&#41;
    &#123;
    getHeightWidth&#40; this &#41;
    &#125;;
    
    newImage.src = "foto-puzzle/" + zufall + "/foto-puzzle-" + 001 + ".jpg";";
    getHeightWidth&#40; newImage &#41;;
    
    if &#40;breite==256&#41;
    &#123;
    startbild.src = "foto-puzzle/foto-puzzle-quer.jpg";
    &#125; else
    &#123;
    startbild.src = "foto-puzzle/foto-puzzle.jpg";
    &#125;
    &#125;
    
    function getHeightWidth&#40; newImage &#41;
    &#123;
    if &#40;newImage.alreadyLoaded || newImage.width == 0&#41;
    	return true;
    breite = newImage.width;
    hoehe = newImage.height;
    newImage.alreadyLoaded = true;
    alert&#40;breite + "&#58;" + hoehe&#41;;
    document.getElementById&#40; "myDiv" &#41;.appendChild&#40; newImage &#41;;
    &#125;
    
    function bild&#40;nr&#41; &#123;
    if &#40;an&#41; &#123;
    aktnr += nr;
    if &#40;aktnr < 1&#41;
    aktnr = maxnr;
    else if &#40;aktnr > maxnr&#41;
    aktnr = 1;
    document.slide.src="foto-puzzle/" + zufall + "/foto-puzzle-" + aktnr + ".jpg"; // Adresse der Bilder und Format!
    &#125;
    doIt&#40;&#41;;
    &#125;
    function show&#40;&#41;&#123;
    if &#40;!halt&#41; &#123;
    bild&#40;1&#41;;
    setTimeout&#40;"show&#40;&#41;",pause&#41;;
    &#125;
    &#125;
    // -->
    HTML-Code:

    Code:
    [img]startbild[/img]
    
    <input value=" |&lt; " onclick="aktnr=1;bild&#40;0&#41;;" type="button"> <input value=" &lt; " onclick="bild&#40;-1&#41;" type="button"> <input value="Play" onclick="halt=0;show&#40;&#41;" type="button">
    <input value="Stop" onclick="halt=1" type="button"><input value=" &gt; " onclick="bild&#40;1&#41;" type="button"><input value=" &gt;| " onclick="aktnr=maxnr;bild&#40;0&#41;;" type="button">
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist lter als 90 Tage. Die darin enthaltenen Informationen sind mglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beitrge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Eintrge
    1

    Standard

    also zwei dinge solltest du beachten...
    du kannst mit javascript keine ordner auslesen und du kannst mit javascript keine abmessungen von bildern auslesen, bevor sie nicht in eine html-datei eingebettet wurden...
    du msstest mit nem array arbeiten, da kannste dann alle bild-srcs als sammlung anbieten und per zufalls-zahl dann aus dem array auslesen.
    fr die verschiedenen bildgrssen rate ich zu ner switch-anweisung in der du dann den file-name oder eben die arraynummer auslist und entsprechend dann die grsse festlegst.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter fr deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualitt, also klicken und kaufen

  3. #3
    Meister(in)
    Themenstarter
    Avatar von Cujo
    Registriert seit
    11.07.2008
    Beitrge
    438
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard

    Also das Skript hat ja soweit funktioniert, dass Javascript eine Zufallszahl ermittelt, dann den Pfad zusammenbastelt und an HTML weiterleitet. Wenn es nur eine Bildgre gbe, htte ich kein Problem.

    Und hier habe ich den Tipp gefunden, wie man die Bildgre mit JS ermittelt:

    http://www.traum-projekt.com/forum/1...ermitteln.html

    Jetzt habe ich halt versucht, die beiden Skripte miteinander zu verbinden. Sollte das wirklich nicht mglich sein?

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beitrge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Eintrge
    1

    Standard

    also selbst bei deinem tip wird die grsse des bildes unmittelbar vor der anzeige ermittelt, bzw whrend der anzeige.
    um jetzt beide scripte miteinander zu verbinden bedarf es etwas aufwand

    du hast in der funktion doit() letztlich die src von deinem newImage
    und in der funktion getHeightWidth( newImage ) wird dann die anzeige durchgefhrt.

    also musst du jetzt gucken, dass du ne funktion baust, die dann eine zufallszahl ermittelt, dieser wert wird dann am besten mit return ausgegeben, so kannst du diese funktion wie ne variable einbauen.
    die letztendliche darstellung wrd ich weiterhin getHeightWidth( newImage ) berlassen denn dann kannst du dort auch dementsprechend die werte weiterverarbeiten.
    evtl diese werte global definieren, dann knnen andere funktionen sie auch benutzen.
    Das Problem ist jetzt aber, dass es 2 verschiedene Ordner gibt. Einmal Ordner mit Bildern im Format 256x341 und einmal Ordner mit Bildern im Format 341x256. Fr jedes Format gibt es auch noch ein extra Startbild.
    und wenn du nur zwei formate benutzt, die auch noch in verschiedenen ordnern ligen, dann kannst du anhand der variable die den ordner identifiziert auch nen entsprechenden stylesetzen, sogar noch bevor das bild berhaupt ausgesucht wird.
    on daher wrd ich gar nicht versuchn die grsse eines jeden bildes abzufangen.
    das macht nur dann sinn, wenn du wirklich probleme bekmest, weil die pix alle verschiedne auflsungen haben...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter fr deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualitt, also klicken und kaufen

  5. #5
    Meister(in)
    Themenstarter
    Avatar von Cujo
    Registriert seit
    11.07.2008
    Beitrge
    438
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard

    Zitat Zitat von synaptic
    also musst du jetzt gucken, dass du ne funktion baust, die dann eine zufallszahl ermittelt, dieser wert wird dann am besten mit return ausgegeben, so kannst du diese funktion wie ne variable einbauen.
    Ich werde mich wohl weiter mit JS beschftigen mssen. Das ist mir noch ein bichen zu hoch


    und wenn du nur zwei formate benutzt, die auch noch in verschiedenen ordnern ligen, dann kannst du anhand der variable die den ordner identifiziert auch nen entsprechenden stylesetzen, sogar noch bevor das bild berhaupt ausgesucht wird.
    on daher wrd ich gar nicht versuchn die grsse eines jeden bildes abzufangen.
    das macht nur dann sinn, wenn du wirklich probleme bekmest, weil die pix alle verschiedne auflsungen haben...
    Tja, du hast den Teufel an die Wand gemalt Zustzlich zu dem obigen Beispiel sind mir jetzt noch andere Fotos eingefallen, die ich auch gerne zufllig anzeigen wrde. Und die sind alle verschieden in ihrer Gre.

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beitrge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Eintrge
    1

    Standard

    so cujo ich denke mal dein vorhaben ist mit dem folgenden code gelst

    bei fragen einfach fragen und wenn du nderungen haben willst die du selber nicht durchfhren kannst steh ich natrlich gerne zur vefgung!!!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
    
    <html>
    <head>
    	<title>http&#58;//cujo.bplaced.net/foto-puzzle/004/foto-puzzle-1.jpg</title>
    	<script type="text/javascript">
    /* <!&#91;CDATA&#91; */
    var maxAnzahlPic = 8;
    var pause = 2000;
    var maxAnzahlFolder = 24;
    var hoehe;
    var breite;
    var urlpart ="http&#58;//cujo.bplaced.net/foto-puzzle/";
    var trenner="/";
    var prefix="foto-puzzle-";
    var suffix=".jpg";
    var folder;
    var zahl;
    var newImage = new Image&#40;&#41;;
    var counter=1;
    var TIMER;
    var picUrl;
    var picholder;
    
    function zufallszahl&#40;n&#41;&#123;
    zahl = Math.round&#40;Math.random&#40;&#41;*n&#41;;
    if&#40;zahl == 0&#41;&#123;zahl=1&#125;
    return zahl;
    &#125;
    
    function getRandomFolder&#40;&#41;&#123;
    var folder = zufallszahl&#40;maxAnzahlFolder&#41;;
    	if&#40;folder<10&#41;&#123;
    	   folder="00" + folder;
    	&#125;
    	if&#40;folder > 9&#41;&#123;
    	   folder="0" + folder;
    	&#125;
    	return folder;
    &#125;
    
    function createURL&#40;&#41;&#123;
    picUrl = urlpart+getRandomFolder&#40;&#41;+trenner;
    return picUrl;
    &#125;
    
    function createArray&#40;&#41;&#123;
    picholder = new Array&#40;&#41;;
       for&#40;i=0; i<maxAnzahlPic; i++&#41;&#123;
       picholder&#91;i&#93; = new Image&#40;&#41;
    picholder&#91;i&#93;.src = picUrl+prefix+&#40;i+1&#41;+suffix;
       &#125;
       
    &#125;
    
    function doIt&#40;&#41;&#123;
    
    	newImage.onload = function&#40;&#41;&#123;
    		getHeightWidth&#40; this &#41;
    &#125;;
    
    newImage.src = createURL&#40;&#41;+prefix+counter+suffix;
    
    getHeightWidth&#40; newImage &#41;;
    &#125;
    
    function getHeightWidth&#40; newImage &#41;&#123;
     createArray&#40;&#41;;
    if &#40;newImage.alreadyLoaded || newImage.width == 0&#41;
    	return true;
    breite = newImage.width;
    hoehe = newImage.height;
    newImage.alreadyLoaded = true;
    var target=document.getElementById&#40; "slide" &#41;;
    
    if&#40;breite == 341&#41;&#123;target.src = "http&#58;//cujo.bplaced.net/foto-puzzle/foto-puzzle-quer.jpg"&#125;
    else&#123;target.src = "http&#58;//cujo.bplaced.net/foto-puzzle/foto-puzzle.jpg"&#125;
    target.style.height = hoehe;
    target.style.width = breite;
    
    &#125;
    
    function show&#40;&#41;&#123;
    var target=document.getElementById&#40; "slide" &#41;;
    target.src = picholder&#91;&#40;counter-1&#41;&#93;.src;
    target.style.height = hoehe;
    target.style.width = breite;
    document.getElementById&#40;"playbtn"&#41;.disabled = "disabled";
    &#125;
    
    
    function play&#40;&#41;&#123;
    show&#40;&#41;;
    TIMER = setTimeout&#40;"play&#40;&#41;", pause&#41;;
    counter++;
       if&#40;counter > 8&#41;&#123;
         stop&#40;&#41;;
    	 again&#40;&#41;;
       &#125;
    &#125;
    
    function stop&#40;&#41;&#123;
    clearTimeout&#40;TIMER&#41;;
    document.getElementById&#40;"playbtn"&#41;.disabled = false;
    &#125;
    
    function vor&#40;&#41;&#123;
    stop&#40;&#41;;
    
       if&#40;counter > 8&#41;&#123;
     again&#40;&#41;;
     &#125;
     
    show&#40;&#41;;
    counter++;
    &#125;
    
    function zurueck&#40;&#41;&#123;
    stop&#40;&#41;;
    counter--;
    if&#40;counter<1&#41;&#123;counter=1&#125;
    show&#40;&#41;;
    &#125;
    
    function erstes&#40;&#41;&#123;
    stop&#40;&#41;;
    counter=1;
    show&#40;&#41;;
    &#125;
    
    function letztes&#40;&#41;&#123;
    stop&#40;&#41;;
    counter=8;
    show&#40;&#41;;
    &#125;
    
    function again&#40;&#41;&#123;
    var weiter = confirm&#40;"Willst Du weitermachen??"&#41;;
     if&#40;weiter&#41;&#123;
     var address= top.location.href;
    top.location.href= address;
     &#125;
     else&#123;
     alert&#40;"Ich hoffe das rtseln hat Dir Spass bereitet"&#41;;
     &#125;
    &#125;
    /* &#93;&#93;> */
    </script>
    </head>
    
    <body onload="doIt&#40;&#41;;">
    <div id="header"></div>
    	 <div id="wrapper">
    	 	  <div id="content">
    		  	   <div id="showDiv">
    			   		[img][/img]</div>
    			   		<input value=" |&lt; " onclick="erstes&#40;&#41;;" type="button">
     			   		<input value=" &lt; " onclick="zurueck&#40;&#41;" type="button"> 
     			   		<input value="Play" onclick="play&#40;&#41;;" id="playbtn" type="button">
    			  		<input value="Stop" onclick="stop&#40;&#41;;" type="button">
    			  		<input value=" &gt; " onclick="vor&#40;&#41;;" type="button">
    			  		<input value=" &gt;| " onclick="letztes&#40;&#41;;" type="button">
    	   	  </div>
    	 </div>
    
    
    </body>
    </html>
    das ganze als link haste dann hier:
    http://home.arcor.de/synaptic/hilfe/...how_array.html
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter fr deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualitt, also klicken und kaufen

  7. #7
    Meister(in)
    Themenstarter
    Avatar von Cujo
    Registriert seit
    11.07.2008
    Beitrge
    438
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard

    Wow, da hast du dich ja richtig fr mich ins Zeug gelegt.

    Vielen Dank fr deine Hilfe

hnliche Themen

  1. Bildgre herausfinden
    Von komma im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 29.07.2007, 18:38
  2. Bildgre
    Von newco im Forum Forum fr Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 22.06.2007, 10:24
  3. Antworten: 0
    Letzter Beitrag: 17.02.2007, 16:38
  4. Bildgre nach %
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.10.2006, 01:01
  5. bildgre ndern
    Von mop im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 03.09.2005, 03:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhnge hochladen: Nein
  • Beitrge bearbeiten: Nein
  •