Roland: Links bei sich wechselnden Bildern

SELF-Forum

Links bei sich wechselnden Bildern

Roland
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich wollte in meiner Website auf der linken Seite in eine Art "newsspalte" erstellen. Dabei sollen verschiedene Bilder, die sich über eine random-Funktion bei neuladen immer wieder ändern, einen kleinen Text unter ihnen haben und selber ein Link zu der Seite mit den "ausführlicheren" News sein.

Einen kleinen Code indem sich die Bilder abwechseln konnte ich noch erstellen:

function random_imglink(){  
			var myimages=new Array()  
			myimages[1]="Unbenannt.png"  
			myimages[2]="Unbenannt2.png"  
			myimages[3]="Unbenannt3.png"  
			myimages[4]="Unbenannt4.png"  
			myimages[5]="Unbenannt6.png"  
  
			var ry=Math.floor(Math.random()*myimages.length)  
			if (ry==0)  
			ry=1  
			document.write('<img src="'+myimages[ry]+'" border=0>')  
			}  
			random_imglink()

Aber da ich ein kompletter Neuling auf dem Gebiet javascript bin und eigentlich immer nur mit html und css zu tun hatte, bräuchte ich jetzt Hilfe! Wie schaffe ich es, dass er, wenn bspw "unbenannt.png" erscheint, dann ein kleiner Text darunter erscheint und vor allem das ganze auch als Link zu einer anderen html Datei zählt?

Könnte man da vlt so etwas wie eine if-funktion machen und dainter irgendwie etwas mit html definieren? (Wie gesagt, ich bin kompletter Neuling, das ist mein erstes "Projekt")

Gruß Roland

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Links bei sich wechselnden Bildern

    Leonard
    – Informationen zu den Bewertungsregeln

    Hallöle,

    ich wollte in meiner Website auf der linken Seite in eine Art "newsspalte" erstellen. Dabei sollen verschiedene Bilder, die sich über eine random-Funktion bei neuladen immer wieder ändern, einen kleinen Text unter ihnen haben und selber ein Link zu der Seite mit den "ausführlicheren" News sein.

    Einen kleinen Code indem sich die Bilder abwechseln konnte ich noch erstellen:

    Kleiner Tipp, wenn du einen unbekannten Code hast bzw. veränderst gib den Namen der funktion in Google ein.

    Aber da ich ein kompletter Neuling auf dem Gebiet javascript bin und eigentlich immer nur mit html und css zu tun hatte, bräuchte ich jetzt Hilfe!

    Wenn du dich mit HTML und CSS auskennst dann schau dir mal die Zeile mit dem "document.write" genauer an!

    Wie schaffe ich es, dass er, wenn bspw "unbenannt.png" erscheint, dann ein kleiner Text darunter erscheint und vor allem das ganze auch als Link zu einer anderen html Datei zählt?

    indem du in den gerade schon benannten Teil nicht nur einen Text reinschreibst, sindern diesem auch noch einen Link verpasst.

    ganze sieht dann so aus:

    ~~~javascript

    [...]
      var ry=Math.floor(Math.random()*myimages.length)
      if(ry<1) ry++;
      var ry2=Math.floor(Math.random()*myimages.length)
      if(ry2<1) ry2++;
      if(ry == ry2){ry>1 ? ry2-- : ry2++;}
      //alert(ry + "|" + ry2);
      document.write('<a href="irgenndwo.htm"><img src="'+myimages[ry]+'" border="0">Hallo ich bin Bild Nummer Eins<p>')
      document.write('<a href="irgenndwo2.htm"><img src="'+myimages[ry2]+'" border="0">Hallo ich bin Bild Nummer Zwei<p>')
      document.write('<a href="irgenndwo3.htm"><img src="'+myimages[ry3]+'" border="0">Hallo ich bin Bild Nummer Drei<p>')
      document.write('<a href="irgenndwo4.htm"><img src="'+myimages[ry4]+'" border="0">Hallo ich bin Bild Nummer Vier<p>')
      document.write('<a href="irgenndwo5.htm"><img src="'+myimages[ry5]+'" border="0">Hallo ich bin Bild Nummer Fuenf<p>')
      document.write('<a href="irgenndwo6.htm"><img src="'+myimages[ry6]+'" border="0">Hallo ich bin Bild Nummer Sechs<p>')
      }
      random_imglink()
      //-->
      </SCRIPT>

      
  
Grüßle
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Links bei sich wechselnden Bildern

      Roland
      – Informationen zu den Bewertungsregeln

      Hallöle,

      ich wollte in meiner Website auf der linken Seite in eine Art "newsspalte" erstellen. Dabei sollen verschiedene Bilder, die sich über eine random-Funktion bei neuladen immer wieder ändern, einen kleinen Text unter ihnen haben und selber ein Link zu der Seite mit den "ausführlicheren" News sein.

      Einen kleinen Code indem sich die Bilder abwechseln konnte ich noch erstellen:

      Kleiner Tipp, wenn du einen unbekannten Code hast bzw. veränderst gib den Namen der funktion in Google ein.

      Aber da ich ein kompletter Neuling auf dem Gebiet javascript bin und eigentlich immer nur mit html und css zu tun hatte, bräuchte ich jetzt Hilfe!

      Wenn du dich mit HTML und CSS auskennst dann schau dir mal die Zeile mit dem "document.write" genauer an!

      Wie schaffe ich es, dass er, wenn bspw "unbenannt.png" erscheint, dann ein kleiner Text darunter erscheint und vor allem das ganze auch als Link zu einer anderen html Datei zählt?

      indem du in den gerade schon benannten Teil nicht nur einen Text reinschreibst, sindern diesem auch noch einen Link verpasst.

      ganze sieht dann so aus:

      [...]
        var ry=Math.floor(Math.random()*myimages.length)
        if(ry<1) ry++;
        var ry2=Math.floor(Math.random()*myimages.length)
        if(ry2<1) ry2++;
        if(ry == ry2){ry>1 ? ry2-- : ry2++;}
        //alert(ry + "|" + ry2);
        document.write('<a href="irgenndwo.htm"><img src="'+myimages[ry]+'" border="0">Hallo ich bin Bild Nummer Eins<p>')
        document.write('<a href="irgenndwo2.htm"><img src="'+myimages[ry2]+'" border="0">Hallo ich bin Bild Nummer Zwei<p>')
        document.write('<a href="irgenndwo3.htm"><img src="'+myimages[ry3]+'" border="0">Hallo ich bin Bild Nummer Drei<p>')
        document.write('<a href="irgenndwo4.htm"><img src="'+myimages[ry4]+'" border="0">Hallo ich bin Bild Nummer Vier<p>')
        document.write('<a href="irgenndwo5.htm"><img src="'+myimages[ry5]+'" border="0">Hallo ich bin Bild Nummer Fuenf<p>')
        document.write('<a href="irgenndwo6.htm"><img src="'+myimages[ry6]+'" border="0">Hallo ich bin Bild Nummer Sechs<p>')
        }
        random_imglink()
        //-->
        </SCRIPT>

      
>   
>   
> Grüßle  
  
  
  
Hallo noch einmal!  
  
Deine Antwort funktioniert momentan bezogen auf die Links, aber 2 Probleme ergeben sich:  
  
1\. Es werden immer 2 Bilder angezeigt, und mein Div-Container ist dafür etwas zu klein ;)  
  
2\. Die Links werden hier den Positionen, nicht den Bilder zugeteilt. An den Code soll eine Bedingung drangehangen werden, welche prüft, welches Bild gerade ausgewählt wurde, und je nachdem welches ausgewählt wurde dem Bild einen bestimmten Link zuweist.  
  
Hier nochmal der gesamte Code; kann ja sein, dass ich etwas falsch eingefügt habe :/  
  
~~~javascript
		  
<script language="JavaScript">  
  
function random_imglink(){  
var myimages = [  
	"Unbenannt.png",  
	"Unbenannt2.png",  
	"Unbenannt3.png",  
	"Unbenannt4.png",  
	"Unbenannt6.png"  
];  
  
var ry=Math.floor(Math.random()*myimages.length)  
if(ry<1) ry++;  
//alert(ry + "|" + ry2);  
document.write('<a href="irgenndwo.htm"><img src="'+myimages[ry]+'" border="0">Hallo ich bin Bild Nummer Eins<p>')  
document.write('<a href="irgenndwo2.htm"><img src="'+myimages[ry2]+'" border="0">Hallo ich bin Bild Nummer Zwei<p>')  
document.write('<a href="irgenndwo3.htm"><img src="'+myimages[ry3]+'" border="0">Hallo ich bin Bild Nummer Drei<p>')  
document.write('<a href="irgenndwo4.htm"><img src="'+myimages[ry4]+'" border="0">Hallo ich bin Bild Nummer Vier<p>')  
document.write('<a href="irgenndwo5.htm"><img src="'+myimages[ry5]+'" border="0">Hallo ich bin Bild Nummer Fuenf<p>')  
document.write('<a href="irgenndwo6.htm"><img src="'+myimages[ry6]+'" border="0">Hallo ich bin Bild Nummer Sechs<p>')  
}  
random_imglink()  
			  //-->			}		  
		</script>

      Gruß Roland

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Links bei sich wechselnden Bildern

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Roland!

        Bitte vermeide Vollzitate, sie stören nur den Lesefluss. Zitiere bitte nur das, worauf du dich konkret beziehst. Danke.

        Du solltest vielleicht besser auf der Grundlage von Felix' Antwort weitermachen. Allein der Verzicht auf document.write macht dein Script deutlich flexibler.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Akt und Aktenordner.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Links bei sich wechselnden Bildern

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hi,

        zusätzlich zu dem, was dir Matthias schon ans Herz gelegt hat (Vollzitate, document.write() vermeiden), noch eine Ergänzung:

        document.write('<a href="irgenndwo.htm"><img src="'+myimages[ry]+'" border="0">Hallo ich bin Bild Nummer Eins<p>')

        Wenn du schon nicht von document.write() abrücken willst, dann solltest du damit wenigstens korrektes HTML erzeugen. Die obige Anweisung erzeugt einen Link (a-Element), der nicht geschlossen wird, sowie einen Absatz (p-Element), der ebenfalls nicht geschlossen wird.
        Und ich empfehle ebenfalls, das Semikolon *nicht* wegzulassen.

        1. Es werden immer 2 Bilder angezeigt

        Woran mag denn das wohl liegen?

        var ry=Math.floor(Math.random()*myimages.length)

        if(ry<1) ry++;
        //alert(ry + "|" + ry2);
        document.write('<a href="irgenndwo.htm"><img src="'+myimages[ry]+'" border="0">Hallo ich bin Bild Nummer Eins<p>')
        document.write('<a href="irgenndwo2.htm"><img src="'+myimages[ry2]+'" border="0">Hallo ich bin Bild Nummer Zwei<p>')
        document.write('<a href="irgenndwo3.htm"><img src="'+myimages[ry3]+'" border="0">Hallo ich bin Bild Nummer Drei<p>')
        document.write('<a href="irgenndwo4.htm"><img src="'+myimages[ry4]+'" border="0">Hallo ich bin Bild Nummer Vier<p>')
        document.write('<a href="irgenndwo5.htm"><img src="'+myimages[ry5]+'" border="0">Hallo ich bin Bild Nummer Fuenf<p>')
        document.write('<a href="irgenndwo6.htm"><img src="'+myimages[ry6]+'" border="0">Hallo ich bin Bild Nummer Sechs<p>')

          
Was macht denn dieser Code? Er erzeugt als erstes eine Zufallszahl ry im Bereich 0 bis n-1 (wobei n die Zahl der Arrayelemente ist). Diese Zahl ry könnte also direkt als Arrayindex taugen.  
Dann prüfst du, ob ry<1 ist (also ==0), und falls ja, erhöhst du ry um 1. Wozu das? Damit erreichst du, dass der erste Arrayeintrag niemals ausgewählt werden kann, der zweite dafür mit doppelter Wahrscheinlichkeit, weil jedesmal, wenn 0 ermittelt wird, stattdessen 1 genommen wird.  
Und schließlich gibst du nacheinander sechs HTML-Fetzen aus, greifst dabei auf die Variablen ry2, ry3, ry4, ry5, ry6 zu, die gar nicht existieren. Das erzeugt einen Javascript-Fehler, der das Script abbricht.  
  

> 2. Die Links werden hier den Positionen, nicht den Bilder zugeteilt.  
  
Nein. Hier existiert noch gar kein Zusammenhang.  
  

> An den Code soll eine Bedingung drangehangen werden  
  
Wenn schon, dann gehängt, nicht gehangen.  
  
So long,  
 Martin  

-- 
Frauen sind wie Elektrizität: Fasst man sie an, kriegt man eine gewischt.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Links bei sich wechselnden Bildern

    Felix Riesterer Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Lieber Roland,

    	var myimages=new Array()  

      	myimages[1]="Unbenannt.png"  
  	myimages[2]="Unbenannt2.png"  
  	myimages[3]="Unbenannt3.png"  
  	myimages[4]="Unbenannt4.png"  
  	myimages[5]="Unbenannt6.png"

      
das liest sich besser so:  
  
~~~javascript
var myimages = [  
    "Unbenannt.png",  
    "Unbenannt2.png",  
    "Unbenannt3.png",  
    "Unbenannt4.png",  
    "Unbenannt6.png"  
];

    document.write('<img src="'+myimages[ry]+'" border=0>')

    Da sollte ein Semikolon am Ende stehen, auch wenn JavaScript hier ohne ein solches keinen Syntax-Fehler bemängelt. Das gilt für jede einzelne Anweisung.

    Generell gefällt mir die Verwendung von document.write nicht. Es kommt aus den Urzeiten von JavaScript. Besser gefällt mir das Erstellen von Elementknoten, die dann in den Elementenbaum eingehängt werden - auch wenn das Deinen Code wesentlich verkompliziert. Es ist für Deine Zwecke document.write zwar völlig ausreichend, funktioniert aber nur, wenn die Seite gerade geladen wird. Späteres verändern (z.B. wie eine Dia-Show) leistet Dein Code dann aber nicht! Wenn Du das später einmal haben willst, wirst Du Deine Funktion wesentlich umbauen müssen.

    random_imglink()

    Es ist gut, dass Du Deinen gesamten Code in eine Funktion verpackst, um diese dann später aufzurufen. Aber in diesem Fall soll ja nur ein einziges Mal der Code ausgeführt werden. Da bräuchte es eigentlich keine eigens definierte Funktion, zumindest keine benannte Funktion. Stattdessen könnte man eine "anonyme" Funktion notieren, die auch sofort ausgeführt wird. Vergleiche einmal diese beiden Schreibweisen:

    function random_imglink() { ... }  
random_imglink();  
  
  
(function () {... } ());

    Durch die Notation function random_imglink () {...} definierst Du eine Funktion mit einem Namen, die dann als window.random_imglink bekannt ist (man sagt eine Methode des window-Objektes). Du könntest auch gleich window.random_imglink = function () {} notieren, das käme auf dasselbe hinaus. Manchmal will man aber nicht, dass da eine neue Methode beim window-Objekt angelegt wird, um dieses nicht zuzumüllen, insbesondere dann nicht, wenn man mehrere JavaScripte in seine Seite einbinden will, daher mein Vorschlag mit der zweiten Notation.

    Die Schreibweise random_imglink() steht ja im Grunde für das Ausführen Deiner Funktion. Stattdessen könntest Du ja auch function () { ... }() notieren. Es ist nur üblicherweise sinnvoller, einen Funktionscode mit einem Namen zu versehen, damit man ihn nicht nur einmal, sondern öfters aufrufen kann, insbesondere auch von anderen Kontexten heraus. Aber für Deinen Zweck ist das nicht notwendig, daher kann man diesen Funktionsaufruf in Klammern setzen, damit sich der Parser nicht daran stört, dass die Funktion keinen Namen trägt. Denn dann ist die Syntax ähnlich der folgenden:

    var random_imglink = function () { ... };

    Hier wird ein Funktionsobjekt definiert und in einer Variable gespeichert. Wenn man soetwas in einer Funktion notiert, dann ist die Variable eine sogenannte lokale Variable, ansonsten landen wir wieder bei window.random_imglink. Und wenn man ein Funktionsobjekt so notieren kann, dann kann man das auch als "Argument" notieren, wie bei Deinem if-Statement:

    if (ry == 0) ry=1;

    Dort notierst Du in der runden Klammer ein Argument. Das Sprachkonstrukt "if" (nein, if ist keine Funktion oder ein Funktionsaufruf!) bekommt in der Klammer etwas vor die Füße geworfen, welches es jetzt auswerten muss. Dort könnte auch ein Funktionsaufruf stehen, oder sogar ein Funktionsobjekt, dessen Rückgabewert if auswerten soll:

    if (my_func()) {...};  
  
if (function () { var myimages = ... }()) {...}

    Deshalb ist es aus meiner Sicht für Deinen Zweck am besten, wenn Du Deinen Code in einer anonymen Funktion notierst, die in runden Klammern steht, um dann auch sofort ausgeführt zu werden:

    (function () {  
    var myimages = [  
        "Unbenannt.png",  
        "Unbenannt2.png",  
        "Unbenannt3.png",  
        "Unbenannt4.png",  
        "Unbenannt6.png"  
    ];  
  
    // Zufallszahl zwischen 1 und 4 (0 ausschließen, "Unbenannt.png" nie verwenden):  
    var ry = Math.floor(  
        // random * (Obergrenze - Untergrenze) + Untergrenze  
        Math.random() * (myimages.length -1) +1  
    );  
  
    document.write('<img src="'+myimages[ry]+'" alt="Thmubnail" border=0>');  
}());

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Links bei sich wechselnden Bildern

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Die Sache mit dem Linktext...

      Stellen wir uns vor, ein solcher "News-Eintrag mit Bild" hätte diese HTML-Struktur:

      <p id="news">  
    <a href="news2413.html">  
        <img src="unbenannt2413.png" alt="Bild zur News">  
        Sony wurde schon wieder gehackt!  
    </a>  
</p>

      Mit CSS kann man das <p>-Element über seine ID schön gestalten, z.B. dadurch, dass man den Text zentriert und das Bild zu einem Block umgestaltet, der nach sich eine neue Zeile erzwingt. Anschließend erzwingt man, dass das Bild innerhalb des Links keinen Rahmen hat:

      #news {  
    text-align: center;  
}  
  
#news img {  
    display: block;  
    margin: auto;  
}  
  
#news a img {  
    border: none;  
}

      Jetzt brauchen wir insgesamt wohl drei Arrays:

      var myimages = [...];  
  
var myurls = [  
    "news1.html",  
    "news2.html",  
    "news3.html",  
    "news4.html",  
    "news6.html"  
];  
  
var mynews = [  
    "Sony wurde wieder gehackt!",  
    "Wer schon immer mal ... wollte.",  
    "...(3)",  
    "...(4)",  
    "...(6)"  
];

      Jetzt kann man obiges HTML entsprechend zusammenbauen:

      document.write(  
    '<p id="news"><a href="' + ???? + '">' +  
    '<img src="' + myimages[ry] + '" alt="News" border=0>' +  
    '???' +  
    '</p>'  
);

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln