nicht angemeldet
Hintergrundbild ändern mittels Java Script! Wie?
0 0 0 0 0 0 0 0 0 0 0
0 0
0
Hintergrundbild ändern mittels Java Script! Wie?
Guten Morgen!
Ich habe schon die die gesammte Seite durchforstet und habe keine Lösung finden können!
Ich bin auch eher Anfänger und bitte darum um eine Lösung meines Problems!
Es ist folgende Situation:
Ich möchte versuchen ein Hintergrundbild bei jedem Seitenstart zu wechseln! Und zwar soll diese Hintergrundbild nicht wiederholt werden
nach dieser Methode:
<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
</div>
Ich habe auch schon in etwa das Verfahren hinbekommen, das für das Wechseln zuständig ist:
<script>
var ms= (new Date()).getMilliseconds();
if(ms<=100){
document.write("<IMG SRC='../images/mon.jpg' vspace='0'hspace='0'>");
}else{
if(ms<=200){
document.write("<IMG SRC='../images/die.jpg' vspace='0'hspace='0'>");
}else{
usw....
insgesammt sollen sich drei verschiedene Bilder abwechseln!
fact!
Ich bekomm es einfach nicht hin!
Bitte helft mir!
Danke im voraus!
BessenG1
-
mit
document.getElementById("BlaBla").style.backgroundImage="url(gfx/bild.gif)";kannste das Hintergrundbild ändern, und zwar von "BlaBla" ;) Das ist die ID (bsp. vom Body, 'ner Table o.Ä.)
grüße
Manuel-
document.getElementById("BlaBla").style.backgroundImage="url(gfx/bild.gif)";
Ich wäre dir sehr dank bar wenn du mir das Anhand meines beispiels verddeutlichen könntest!
Denn sowas mit dem getElementById hab ich shcon auspribiert
hat aber leider nich gefunzt!
danke-
Sicher willst du das Hintergrund-Bild von dem Div ändern, also musst du ihm eine ID geben:
<div id="changeme" style="background-image:url(background4.jpg); background-repeat:repeat-x; margin:30px; border:thin solid #CCCCFF; font-size:150%">
</div>Die ID ist wichtig!
und dann kommt dein JavaScript (am besten in den Head :)
<script>
var ms= (new Date()).getMilliseconds();
if(ms<=100){
document.getElementById("changeme").style.backgroundImage="url(images/mon.jpg)"; vspace='0'hspace='0'>");
}
usw....Meinstes So?
Gruß
Manuel-
upps, das
vspace='0'hspace='0'>");
muss noch weg ;)
-
upps, das
vspace='0'hspace='0'>");
muss noch weg ;)
Hat bis jetzt leider noch nicht funktioniert!
Code sieht volgendermaßen aus:<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Ticker</title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR"><script>
var ms= (new Date()).getMilliseconds();
if(ms<=100){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=200){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else{
if(ms<=300){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else{
if(ms<=400){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=500){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else{
if(ms<=600){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else{
if(ms<=700){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=800){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else
{if(ms<=900){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else
{if(ms<=1000){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}}}}}}}}}}
</script>
</head><body bgcolor="#FFFFFF" text="#FFFFFF">
<div id="changeit" style="background-image:url(hlGras.gif);background-repeat:no-repeat">
ich bin am verzweifeln
ich versuch das shcon ne woche lang hinzukriegen
ich werd bekloppt-
ähem, schonmal in JS gecodet?
Syntax:
<SCRIPT LANGUAGE="JavaScript">
<!--
..........
//-->
</SCRIPT>Bei dir steht da nur:
<scrip>
..........
</script>Versuchs halt mal mit:
<SCRIPT LANGUAGE="JavaScript">
<!--
..........
//-->
</SCRIPT>Grüße
Manuel-
habe den js code nur übernommen und angeglichen und da fehlte von vorne herrein <!--
es stand nur <script> und das funktionierte!
aber naja
wahsaga könnte aber etwas freundlicher sein und mir nicht nur durch patzige antworten versuchen zu helfen!Achja hatte ich doch erwähnt das ich Anfänger bin oder?!
-
Habs nun ausgetauscht aber es funktioniert immer noch nich!
Naja frage ich mal Leute die Ahnung haben!-
Sorry, dass du dich angergriffen gefühlt hast, aber ich habs nicht böse gemeint !!!
-
So, ich hab deinen Code mal ein bisschen abgewandelt.
Das sieht so aus:<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Ticker</title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script language ="JavaScript">
window.setTimeout("ChangePic()",3000);
function ChangePic() {
document.getElementById("changeme").style.backgroundImage="url(2.gif)";
}
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="changeme" style="background-image:url(1.gif); background-repeat: no-repeat; width: 106px; height: 16px;">hallo
</div>
</body>
</html>Nach drei Sekunden wehcselt der das Bild.
Hoffe, ich konnte dir helfen
Manuel-
Danke für die Mühe!
Aber leider geht das etwas an meinem request vorbei!
Aber deine Variante is auch nich schlecht
nur weis ich jetzt nicht wie man das als endlosschleife laufen lässt!
oder hab ich da was falsch verstanden?
Achja weis nich ob das wichtig ist aber aber in dem <div> Tag muss auch der text und konsorten rein!
Geht es nich einfach den text auszutauschen der
in dem <di>-Tag steht
also nur die stelle wo der name von der bilddatei steht?
So was ähnliches hab ich schon ausprobiert aber irgendwie wollte das mal wieder nich so klappen wie ich das wollte!
Wäre sehr dankbar wenn du dich nochmal um mich kümmern könntest!?THX ersma für die mühe!
BessenG1
-
AAlSO
jetzt hab ichs soweit hinbekommen das es bei jedem start ein enues hintergrundbild kommt
aber jetzt hab ich das problem das das hintergrundbild mehrfach kommt
ich will aber das der hintergrund nur einmal kommt und nicht wiederholt!
das is ja sinn der ganzen sache
wenn das normal immer wiederholt werden soll dann wär alles kein prob gewesen!
#hier mein code:<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Ticker</title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head><body bgcolor="#FFFFFF" text="#FFFFFF">
<div id="changeit" style="background-image:url(""); background-repeat:no-repeat;>
<pre><font color="#3232b8"><applet code="rowshift.class" alt="Geht nich!" width="991" height="20">
<param name="TEXT" value="Tabelle Freizeitliga: 1. SKC - 2. HKC Albatros - 3. Grün Weiss - 4. IKC - 5. TUS - 6. WSC Werne - 7. Titania Tabelle E-Jugend: 1. Adler Rauxel - 2. HKC Albatros - 3. WSC Werne - 4. SKC - 5. Selmer KV - 5. TUS - 6. Grün Weiss - 7. Stockum - 8. HKC Albatros 2">
<param name="BGCOLOR" value="023493">
<param name="TEXTCOLOR" value="FFFFFF">
</applet></font>
</pre>
</div>
<script>
var ms= (new Date()).getMilliseconds();
if(ms<=100){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=200){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else{
if(ms<=300){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else{
if(ms<=400){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=500){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else{
if(ms<=600){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else{
if(ms<=700){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=800){
document.getElementById("changeit").style.backgroundImage="url(hlHalle.gif)";
}else{
if(ms<=900){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
}else{
if(ms<=1000){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
}}}}}}}}}}
</script></body>
</html>
achja an dem applet braucht ihr euch nicht stören! das is mein nextes prob das machen wir andermal!
thx
cya
-
Jetzt musste mir nochmal genau erklären was du willst?! ;)
Also nach meiner Methode könntest du das so basteln:Zeige Bild1 an, Wechsel zu Bild2, wechsel zu Bild3, wechsel wieder zu bild1, wechsel zu bild2 ...........
Aber du willst die Reihe an Bildern jetzt nicht wiederholen oder wie? also einmal alle durchlaufen und das wars? Ist mit meiner Methode auch kein Problem :)
Erklär mir doch bitte nochmal ganz kurz und easy, was du genau machen willst :D und was das Problem bei meiner Methode ist.
mfG
Manuel-
AAlSO
Ich möchte das bei jedem Seitenaufruf ein anderes HIntergrundbild angezeigt wird!
Auf SelfHTML gibt es anleitungen dazu wei man man das macht!
Nur ist darin nicht enthalten wie ich das bei Hintergrundbildern mache die sich nicht wiederholen sollen (background-repeat:no-repeat)!
Das is das ganze Problem
wie das nun gelöst wird is mir egal es sol einfach nur funktionieren!
Aber die Bilder in einer Art Slideshow anzuzeigen geht leider am sinn der sache vorbei
dann könnte ich besser ein animiertes gif nehemen und fertig!
Wie gesagt soweit funktioniert es aber das Hintergrundbild wird immernoch wiederholt (Kacheln)das solll so nicht sein!
cya
-
Hi,
Nur ist darin nicht enthalten wie ich das bei Hintergrundbildern mache die sich nicht wiederholen sollen (background-repeat:no-repeat)!
Du hast die Antwort doch gerade selbst gepostet!?
freundliche Grüße
Ingo-
Hi,
Nur ist darin nicht enthalten wie ich das bei Hintergrundbildern mache die sich nicht wiederholen sollen (background-repeat:no-repeat)!
Du hast die Antwort doch gerade selbst gepostet!?freundliche Grüße
IngoLustig
das alles funktioniert doch nicht!!-
Tag BessenG1.
das alles funktioniert doch nicht!!
[ ] du hast alle Antworten auf dein Posting gelesen.
Siechfred
--
»Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«-
Ok
Habs nun selbst gelöst
Trodzdem dankeCLOSE
cya
-
-
-
-
-
-
Tag BessenG1.
aber jetzt hab ich das problem das das hintergrundbild mehrfach kommt
Das style-Objekt erlaubt dir den Zugriff auf alle CSS-Eigenschaften, die das referenzierte HTML-Objekt haben kann. Da du versuchst, den Hintergrund zu manipulieren, sind dies natürlich die CSS-Eigenschaften für Hintergründe. Ändere also nicht nur das Hintergrundbild, sondern passe auch die CSS-Eigenschaften dafür an (Position und Wiederholung). Dies entweder direkt als Klasse oder dynamisch mit Javascript. Beispiel:
CSS-Definition im Kopfbereich der Datei:
<style type="text/css">
<!--
.bild {
background-position:50% 50%;
background-repeat:no-repeat;
}
-->
</style>HTML-Code im Bodybereich:
<div id="changeit" class="bild" />
ich will aber das der hintergrund nur einmal kommt und nicht wiederholt!
#hier mein code:
[...]
<div id="changeit" style="background-image:url(""); background-repeat:no-repeat;>Dein style-Attribut ist hier zu Ende -------------^ (schließende Anführungszeichen),
der Rest wird ignoriert.Zudem ist dein Javascript-Code ziemlich umständlich, das Ganze kannst du auf folgende paar Zeilen reduzieren:
<script language="Javascript" type="text/javascript">
<!--
function bildwechsel() {
var bilder = new Array("hlGras.gif","hlAsche.gif", .... )
var now = new Date;
var nr = parseInt(now.getMilliseconds()/100);
document.getElementById("changeit").style.backgroundImage="url("+bilder[nr]+")";
}
//-->
</script>Das Array »bilder« musst du natürlich noch so erweitern, dass alle 10 Bilder darin enthalten sind. Wie du diese Funktion jetzt nach einer bestimmten Zeit erneut aufrufen kannst, darfst du dir durch Lesen der Referenz zu setInterval selber aneignen.
[dsf 3.6]
Siechfred--
»Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«
-
-
-
-
Und da ich ganz lieb und harmlos bin, gebe ich dir noch einen kleinen Tipp:
Du kannst die SetTimeOut-Teile ja verschachteln
Bsp: Du rufst nach 3 sekunden eine funktion auf, die bild 1 anzeigt und einen settimeout startet, der eine zweite funktion nach 3 sekunden startet. diese funktion verändert das bild und ruft einen settimeout auf, der nach 3 sekunden wieder eine funktion aufruft...
Ein Beispiel:<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Ticker</title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR"><script language ="JavaScript">
window.setTimeout("ChangePic1()",3000);
function ChangePic1() {
document.getElementById("changeme").style.backgroundImage="url(2.gif)";
window.setTimeout("ChangePic2()",3000);
}function ChangePic2() {
document.getElementById("changeme").style.backgroundImage="url(1.gif)";
window.setTimeout("ChangePic1()",3000);
}
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="changeme" style="background-image:url(1.gif); background-repeat: no-repeat; width: 106px; height: 16px;">
</div>
</body>
</html>Zuerst wird nach 3 sekunden die funktion ChangePic1 aufgerufen, welche 1.Das Bild verändert und 2.wieder einen settimeout aufruft, welcher nach 3 sekunden changepic2 aufruft ...
Jetzt musst du nur noch deine Bilder einbauen, deine Zeit festlegen und feddich ;)
Grüße
Manuel
-
-
-
-
-
hi,
Hat bis jetzt leider noch nicht funktioniert!
Code sieht volgendermaßen aus:grausig.
<script>
var ms= (new Date()).getMilliseconds();kontrollausgabe, welchen wert hat ms?
if(ms<=100){
bin mir gerade nicht sicher, aber rückgabewert von Date.getMilliseconds() dürfte ein string sein - und somit nicht ohne weiteres mit zahlen "vergleichbar".
erst mal mit parseInt() 'ne zahl draus machen, könnte weiterhelfen.document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";
}else{
if(ms<=200){
document.getElementById("changeit").style.backgroundImage="url(hlAsche.gif)";
[...]du kennst http://de.selfhtml.org/javascript/objekte/array.htm?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em." -
Hi,
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Ticker</title>
<meta name="author" content="Dieter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR"><script>
var ms= (new Date()).getMilliseconds();
if(ms<=100){
document.getElementById("changeit").style.backgroundImage="url(hlGras.gif)";Das Script wird jetzt ausgeführt.
</script>
</head>
<body bgcolor="#FFFFFF" text="#FFFFFF">
<div id="changeit" style="background-image:url(hlGras.gif);background-repeat:no-repeat">Und jetzt beginnt das Element mit id changeit zu existieren.
Ruf das Script auf, wenn das Element auch sicher schon existiert, nicht vorher.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
-
-
Moin,
schau dir mal http://freelancer.mipu.de an.
Auf der Startseite gibt es einen Bildwechsler, zwar nicht für Hintergründe, aber das Prinzip kannst du anpassen.
gruß mipu