Bildlaufleiste in Webseite einfügen

friesenrolf schrieb am 04.01.2023 um 22:20 Uhr

Hallo zusammen,

Meine Software: MAGIX Web Designer Premium 19.0.0.64291 M DL x64 May 3 2022

Ich möchte auf meiner Seite eine kleine Bildlaufleiste einfügen und habe mir dafür einen Javascript (kostenlos und frei verfügbar und änderbar) runder geladen. Diese funktioniert im WD gut. Inhalt vom script sind kostenlose Bilder aus dem Netz.

Im script steht das diese Bilder mit den eigenen ersetzt werden können, es muss nur der Link geändert werden, ich habe den Pfad eingetragen aber das Bild wird nicht angezeigt sondern nur ein Symbol für das Bild. Ich habe den script mal unten angehängt, der 1Pfad ist mein Bild. Die anderen sind von kostenlose-javascripts.de. Muss ich in der Zeile noch etwas ändern? Vielleicht könnt ihr mir einen Tipp geben, würde mich sehr freuen.

Gruß friesenrolf

<script type='text/javascript'>
<!--
var sliderwidth = 550; // Breite des Sliders
var sliderheight = 80; // Höhe des Sliders
var slidespeed = 1; // Geschwindigkeit des Sliders
var slidebgcolor = "#FFFFFF"; // Hintergrundfarbe
var leftrightslide = new Array();
var copyspeed = slidespeed;
var i = 0;

/* AB HIER NICHTS MEHR ÄNDERN */
leftrightslide = '<nobr>' + leftrightslide.join("") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-3000px">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;

function slideleft(){
   if (iedom){
       if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
           cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px";
       else
           cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+"px";

       if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
           cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px";
       else
           cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+"px";
   }
   else if (document.layers){
       if (ns_slide.left>(actualwidth*(-1)+8))
           ns_slide.left-=copyspeed;
       else
           ns_slide.left=ns_slide2.left+actualwidth;

       if (ns_slide2.left>(actualwidth*(-1)+8))
           ns_slide2.left-=copyspeed;
       else
           ns_slide2.left=ns_slide.left+actualwidth;
   }
}

if (iedom||document.layers){
   with (document){
       document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
       if (iedom){
           document.write('<div style="position:relative;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;overflow:hidden">');
           document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">');
           document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
           document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
           document.write('</div></div>');
       }
       else if (document.layers){
           document.write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>');
           document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
           document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
           document.write('</ilayer>');
       }
       document.write('</td></table>');
   }
}
//-->
</script>
<br />
JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/bilder/bildlaufleiste/" target="_blank">kostenlose-javascripts.de</a>
<br />
<script type="text/javascript">function addEvent234(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}};addEvent234(window,'load',fillup);</script>

Kommentare

BilderMacher schrieb am 05.01.2023 um 07:34 Uhr

Hallo,

so funktioniert das nicht!

Dein eingefügter Pfad ist falsch. Er führt doch auf deine Festplatte und nicht in das Verzeichnis, in dem der WD Bilder ablegt.

So sieht es korrekt aus: (a-href habe ich gelöscht, weil ich keinen LINK zu Bildern habe)

/* HIER DIE LINKS UND BILDER ANPASSEN*/
leftrightslide[i++] = '<img src="index_htm_files/Bild1.jpg">';
leftrightslide[i++] = '<img src="index_htm_files/Bild2.jpg">';
leftrightslide[i++] = '<img src="index_htm_files/Bild3.jpg">';
leftrightslide[i++] = '<img src="index_htm_files/Bild4.jpg">';
leftrightslide[i++] = '<img src="index_htm_files/Bild5.jpg">';

Wobei hierfür einige Vorbereitungen zu treffen sind.

Zunächst alle Bilder auf die Seite laden. Dann die Webeigenschaften öffnen und auf dem Reiter "Bilder" für jedes Bild einen Namen vergeben. Ich habe durchnummeriert: "Bild1" bis "Bild5" für meine 5 Bilder.

Die Vorschau zeigt dann, ob alles stimmt.