[JavaScript] Bilder wechsel mit verlinkung (diashow)

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Aeonsam, 6. Mai 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 6. Mai 2009
    Bilder wechsel mit verlinkung (diashow)

    hallo Leute,

    habe folgenden script für eine mini dia show in js.

    Code:
    <body background="muster.jpg" link="#2543CF" vlink="#2543CF" onLoad="wechsle()">

<SCRIPT language="JavaScript">
function preload (s)
{
if (document.images)
{
i = new Image ();
i.src = s;
}
}
function Array() {
this.length = Array.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = Array.arguments[i]
}

/* "01.jpg" wird zweimal aufgerufen, da die
Diashow sofort nach dem Start ein fading
durchführt. So fadet Sie quasi in das
gleiche Bild rein. */
var pix = new Array ("11.jpg","12.jpg","13.jpg","14.jpg","15.jpg");
/* Andere Browser würden zweimal das Bild
laden und es dadurch doppelt so lange
zeigen. Um das auszuschließen, beginnen
diese direkt mit dem "zweiten" Bild */
if (navigator.appName.indexOf("Explorer") > -1)
{
var nummer = 1;
}
else
{
var nummer = 2;
}
var start = 0
function wechsle()
{
document.image.src = "img/"+pix[nummer];
nummer += 1;
if (nummer == 7) nummer = 2

/* Damit ein wechsel möglichst nach 10
Sekunden geschieht, wird einfach die Dauer
für den Preload von den 10 Sekunden
subtrahiert. Sollte der Preload länger als
10 Sekunden dauern, wird direkt zum
nächsten Bild gefadet */
var zeit= new Date ();
var a=zeit.getTime ()
pload = "img/"+pix[nummer];
var zeit= new Date ();
var b=zeit.getTime ()
var c=b-a
var d=Math.round (c)
var e=10000-d
if (e<0) e=0
preload(pload);
setTimeout("wechsle()", e);
next = new Image();
next.src = pload
document.all.fading.filters.blendTrans.Apply();
document.all.fading.src = next.src;
if (start!=0)
{
document.all.fading.filters.blendTrans.Play();
}
start=1
}
</SCRIPT>

<img id="fading" name="image" style="filter:blendTrans(Duration=4, Transition=16)" border="0" src="img/11.jpg" width="100" height="133">

    das funktioniert wuderbar die bilder wechseln. das problem was ich nun habe, das bild soll als link dienen.

    Bsp.
    Code:
    <a id="fading_link" href="link_zum_user.php">
<img id="fading" name="image" style="filter:blendTrans(Duration=4, Transition=16)" border="0" src="img/11.jpg" width="100" height="133">
</a>
    wie man oben sehen kann wird für das abspielen der bilder in reihen folge ein array erstellt.
    --------------------------------------------------------
    var pix = new Array ("11.jpg","12.jpg","13.jpg","14.jpg","15.jpg");
    --------------------------------------------------------

    es ist kein problem den dazugehörigen wert vom user zu erstellen. Nehmen wir mal an ich hätte
    einen array für die links:

    var pix_link = new Array ("user_1.php","user_2.php","user_3.php","user_4.php","user_5.php");



    wie schaffe ich es dem link tag (id="fading_link") eine neue href zuzuweisen und zwar syncron mit dem bild wechsel


    danke schon mal im voraus ^^


    MFG Aeonsam
     
  3. 6. Mai 2009
    AW: Bilder wchsel mit verlinkung

    suche:
    Code:
    document.all.fading.src = next.src;
    schreib drunter:
    Code:
    document.all.fading.parentNode.href = next.src;
     
  4. 6. Mai 2009
    AW: Bilder wchsel mit verlinkung

    das it schonmal super.

    ich will nur kein link zu dem aktuellen bild sondern user

    so sollte es aussehen
    link soll beim bild wechsel auch gewechselt werden aber aus dem zweitem array
    var pix_link = new Array ("user_1.php","user_2.php","user_3.php","user_4.php","user_5.php");


    HTML:
    <a id="fading_link" href="user_1.php">
<img id="fading" name="image" style="filter:blendTrans(Duration=4, Transition=16)" border="0" src="img/11.jpg" width="100" height="133">
</a>
    ^^
     
  5. 8. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    keiner eine Idee?? ?(
     
  6. 8. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    Code:
    document.all.fading.parentNode.href = pix_link[nummer];
     
  7. 13. Mai 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Bilder wechsel mit verlinkung (diashow)

    Hmm irgentwie ändert sich da nichts.

    hier mal das ganze Download
     
  8. 13. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    1. kein valides html (kein head, title, html, kein </body>)
    2. du überschreibt nen nativen prototype (Array)
    3. leerzeichen (\n) zwischen <img> und <a> = parentNode = #text

    fehler beheben und es sollte laufen.

    ~ meta -> closed
     
  9. 13. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    sry das ich nicht so ein JS hirn bin...

    hier nun der qt mit html tags so wie es sein soll

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>New Document</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 
 <SCRIPT language="JavaScript">
 function preload (s)
 {
 if (document.images)
 {
 i = new Image ();
 i.src = s;
 }
 }
 function Array() {
 this.length = Array.arguments.length
 for (var i = 0; i < this.length; i++) this[i+1] = Array.arguments[i]
 }
 
 /* "01.jpg" wird zweimal aufgerufen, da die
 Diashow sofort nach dem Start ein fading
 durchführt. So fadet Sie quasi in das
 gleiche Bild rein. */
 var pix = new Array ("11.jpg","12.jpg","13.jpg","14.jpg","15.jpg");
 var pix_link = new Array ("user_1.php","user_2.php","user_3.php","user_4.php","user_5.php");
 
 
 /* Andere Browser würden zweimal das Bild
 laden und es dadurch doppelt so lange
 zeigen. Um das auszuschließen, beginnen
 diese direkt mit dem "zweiten" Bild */
 if (navigator.appName.indexOf("Explorer") > -1)
 {
 var nummer = 1;
 }
 else
 {
 var nummer = 2;
 }
 var start = 0
 function wechsle()
 {
 document.image.src = "img/"+pix[nummer];
 nummer += 1;
 if (nummer == 7) nummer = 2
 
 /* Damit ein wechsel möglichst nach 10
 Sekunden geschieht, wird einfach die Dauer
 für den Preload von den 10 Sekunden
 subtrahiert. Sollte der Preload länger als
 10 Sekunden dauern, wird direkt zum
 nächsten Bild gefadet */
 var zeit= new Date ();
 var a=zeit.getTime ()
 pload = "img/"+pix[nummer];
 var zeit= new Date ();
 var b=zeit.getTime ()
 var c=b-a
 var d=Math.round (c)
 var e=10000-d
 if (e<0) e=0
 preload(pload);
 setTimeout("wechsle()", e);
 next = new Image();
 next.src = pload
 document.all.fading.filters.blendTrans.Apply();
 document.all.fading.src = next.src;
 document.all.fading.parentNode.href = pix_link[nummer];
 if (start!=0)
 {
 document.all.fading.filters.blendTrans.Play();
 }
 start=1
 }
 </SCRIPT>
 
 
 </head>
<body background="muster.jpg" link="#2543CF" vlink="#2543CF" onLoad="wechsle()">




<a id="fading" href="user_1.php">
<img id="fading" name="image" style="filter:blendTrans(Duration=4, Transition=16)" border="0" src="img/11.jpg" width="100" height="133">
</a>


</body>
</html>
    Was du mit den beiden Punkten meinst weis ich leider nicht.
     
  10. 13. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    http://de.selfhtml.org/javascript/index.htm

    aja, id="fading" hast auch zweimal drinnen (id muss eindeutig sein)

    hier fehlt es eindeutig an grundlagen
     
  11. 13. Mai 2009
    AW: Bilder wechsel mit verlinkung (diashow)

    Jo danke dir Murdoc
    php -f brain.php

    ich werde nun auch alle auf google hinweisen

    ------------------------------------------------------------------------------------------------------------------

    Falls es hier noch jemanden gibt der JS nicht drauf hat ( weshalb man überhaupt hier fragen stellt )

    Ich habe ein Lösung für euch:

    HTML:
    
<html>
<head>
 <script type="text/javascript">
 <!--
 // 1. Der Link zu den Bildern.
 var user_bild = new Array (
 "img/11.jpg",
 "img/12.jpg",
 "img/13.jpg",
 "img/14.jpg",
 "img/15.jpg",
 "img/16.jpg",
 "img/17.jpg",
 "img/18.jpg",
 "img/19.jpg",
 "img/20.jpg");
 
 // 2. Die Zeit in Millisekunden der einzelnen Bilder.
 var timeout = new Array (
 8000,8000,8000,8000,8000,8000,8000,8000,8000,12000);
 
 // 3. Der Link zu den Seiten bei Mausklick.
 var link_url = new Array (
 "http://link_01.php",
 "http://link_02.php",
 "http://link_03.php",
 "http://link_04.php",
 "http://link_05.php",
 "http://link_06.php",
 "http://link_07.php",
 "http://link_08.php",
 "http://link_09.php",
 "http://link_10.php");
 
 var link_name = new Array (
 "user 1",
 "user 2",
 "user 3",
 "user 4",
 "user 5",
 "user 6",
 "user 7",
 "user 8",
 "user 9",
 "user 10");
 
 // 4. Die Anzahl der Bilder.
 var max_bild = 10;
 
 // 5. Den Startwert der Variable vorgeben.
 var i_bild = 0;
 
 // 6. Die eigentliche Funktion starten.
 function Changeuserwechsel (){
 
 document.getElementById ( "show_bild" ).src = user_bild [i_bild];
 document.getElementById ( "show_link" ).href = link_url [i_bild];
 document.getElementById ( "show_name" ).value = link_name [i_bild];
 
 window.setTimeout ( "Changeuserwechsel()", timeout [i_bild]);
 if ( i_bild <= max_bild ){
 i_bild++;
 }
 else {
 i_bild = 0;
 }
 }
 
 window.setTimeout ( "Changeuserwechsel()", 0 );
 
 //-->
 </script>
</head>

<body onload="Changeuserwechsel ()">

<center>
<div style="text-align:center;">
<input type="text" name="show_name" id="show_name" style="width:100px; border:solid 0px; text-align:center;" />
<br />
<a target="_blank" href="#" id="show_link">
<img src="" name="show_bild" id="show_bild" style="width:100px; height:133px; border:solid 0px;" />
</a>
</div>
</canter>

</body>
</html>




    ~closed~
     
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.