Forum - Bewegtes Icon quer über das Forum - Schwebendes Bild mit JavaScript

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten � Bewegtes Icon quer über das Forum - Schwebendes Bild mit JavaScript

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Bewegtes Icon quer über das Forum - Schwebendes Bild mit JavaScript datum

15.10.2012 19:24 (zuletzt bearbeitet: 03.12.2023 15:12)

Hans58

Informationen anzeigen

Beitr�ge:	111
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	25

Hallo Wolfgang,

dieser JavaScript ließ ein Gif quer ... vertikal ... hin und her über das Forum laufen.
War nur so ein Gag, den ich sporadisch eingesetzt habe.
Wenn es dir möglich ist, kannste mal drüber schauen, warum der nicht mehr läuft?

Ist aber absolut nicht wichtig.

Vielen Dank
Hans

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!--- bewegter - icon --->
 <div id="img" style="position:absolute;">
<img src="https://files.homepagemodules.de/b104774/bhnetfiles-3pnj-l.gif">
</div><script LANGUAGE="JavaScript">
<!--- Begin
var xPos = 0;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.right = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function GGl() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
//  End --->
</script> 
 
 

Schlie�en

Antworten

#2 | Schwebendes Bild mit JavaScript datum

30.10.2012 17:56 (zuletzt bearbeitet: 03.12.2023 15:10)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1245

Schwebendes Bild mit JavaScript Teil 1
Aktualisiert 21.07.19

Hallo Hans58,
es gibt eine super funktionierende Lösung für das bewegte Icon!

Florian hat das Skript komplett neu überarbeitet.
Die Grafik oder das Icon läuft über das ganze Bild und stößt sich rechtwinklig an den Rändern des geöffneten Browserfenster ab.
Es funktioniert auch hier im Forum im aktuellen IE, FF, Opera und Chrome, ohne dass sich die Skripte untereinander stören.

Hier die Installation:

Das folgende Skript kommt in die Fußzeile oder besser als Plugin in den "bottom_header".
In Zeile 15 wird die Geschwindigkeit der bewegten Grafik angepasst!
In Zeile 7 kann die Adresse der Grafik beliebig ausgetauscht werden!
In Zeile 11+12 wird die Startposition festgelegt!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<style type="text/css">
#movingContainer {position:fixed;display:none;}
#movingContainer  img {width:80px;height:69px;}
</style>
 
<div id="movingContainer">
<img id="moving_picture" src="https://files.homepagemodules.de/b104774/bhnetfiles-3pnj-l.gif" alt="Clown">
</div>
 
<script type="text/javascript">
 var posX = 50; // x Startposition
 var posY = 50; // y Startposition
 var moveX = 2; // Pixel in x-Richtung
 var moveY = 2; // Pixel in y-Richtung
 var delay = 40; // ... pro Zeiteinheit in ms
 
 var interval;
 var movingPicture;
 var movingContainer;
 
 
 function movePicture() {
 if (posX < 0) {
 moveX = Math.abs(moveX);
 }
 else if (posX >= (window.innerWidth - movingPicture.style.width.split('px')[0])) {
 moveX = Math.abs(moveX) * (-1);
 }
 
 if (posY < 0) {
 moveY = Math.abs(moveY);
 }
 else if (posY >= (window.innerHeight - movingPicture.style.height.split('px')[0])) {
 moveY = Math.abs(moveY) * (-1);
 }
 
 posX += moveX;
 posY += moveY;
 movingContainer.style.left = posX + 'px';
 movingContainer.style.top = posY + 'px';
 }
 
 function initMovePicture() {
 movingPicture = document.getElementById('moving_picture');
 movingContainer = movingPicture.parentNode;
 movingContainer.style.width = movingPicture.style.width;
 movingContainer.style.height = movingPicture.style.height;
 movingContainer.style.display = 'block';
 movingContainer.style.left = posX + 'px';
 movingContainer.style.top = posY + 'px';
 
 interval = window.setInterval('movePicture();', delay);
 }
 
initMovePicture();
</script>
 

Schlie�en

Bewegte Grafiken (Schneeflocken): Schneeflocken im Forum

Bis dann und gutes Gelingen

Wolfgang

Antworten

#3 | Schwebendes Bild mit JavaScript - Grafikstop! datum

02.11.2012 01:41 (zuletzt bearbeitet: 03.12.2023 15:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1245

Schwebendes Bild mit JavaScript - Grafikstop Teil 2
Aktualisiert 21.07.19

Hallo Hans58,
im zweiten Teil läßt sich die Grafik oder das Icon per Mouseover anhalten und mit einem Link versehen, eine beliebige Webseite aufrufen!
Auch ist es möglich mit "title" der Grafik einen Tooltip zu spendieren.
Das Script funktioniert auch hier im aktuellen IE, FF, Opera und Chrome, ohne dass sich die Scripte untereinander stören.

Hier die Installation:

  • Das folgende Skript kommt in die oder besser als Plugin in den "".
  • In Zeile 15 wird die Geschwindigkeit der bewegten Grafik angepasst!
  • In Zeile 7 kann die Adresse der Grafik beliebig ausgetauscht werden!
  • In Zeile 11+12 wird die Startposition festgelegt!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<style type="text/css">
#movingContainer {position:fixed;display:none;}
#movingContainer img {cursor:pointer;width:80px;height:69px;}
</style>
 
<div id="movingContainer">
<img title="Hier geht es zum Beitrag" id="moving_picture" src="https://files.homepagemodules.de/b104774/bhnetfiles-3pnj-l.gif" alt="Hier geht es zum Beitrag" onClick="location.href='https://www.hilfe-tricks-tipps.de/t667f30-bewegter-Icon-quer-ueber-das-Forum.html';" onmouseover="moveEnabled(false);" onmouseout="moveEnabled(true);">
</div>
 
<script type="text/javascript">
	var posX = 50; // x Startposition
	var posY = 50; // y Startposition
	var moveX = 2; // Pixel in x-Richtung
	var moveY = 2; // Pixel in y-Richtung
	var delay = 40; // ... pro Zeiteinheit in ms
 
	var interval;
	var movingPicture;
	var movingContainer;
 
 
	function movePicture() {
	if (posX < 0) {
	moveX = Math.abs(moveX);
	}
	else if (posX >= (window.innerWidth - movingPicture.style.width.split('px')[0])) {
	moveX = Math.abs(moveX) * (-1);
	}
 
	if (posY < 0) {
	moveY = Math.abs(moveY);
	}
	else if (posY >= (window.innerHeight - movingPicture.style.height.split('px')[0])) {
	moveY = Math.abs(moveY) * (-1);
	}
 
	posX += moveX;
	posY += moveY;
	movingContainer.style.left = posX + 'px';
	movingContainer.style.top = posY + 'px';
	}
 
	function initMovePicture() {
	movingPicture = document.getElementById('moving_picture');
	movingContainer = movingPicture.parentNode;
	movingContainer.style.width = movingPicture.style.width;
	movingContainer.style.height = movingPicture.style.height;
	movingContainer.style.display = 'block';
	movingContainer.style.left = posX + 'px';
	movingContainer.style.top = posY + 'px';
 
	interval = window.setInterval('movePicture();', delay);
	}
 
function moveEnabled(enable) {
	if (enable) {
	clearInterval(interval);
	interval = window.setInterval('movePicture()', delay);
	}
	else {
	clearInterval(interval);
	}
	}
	function teminateMoving() {
	clearInterval(interval);
	movingContainer.style.display = 'none';
	}
 
initMovePicture();
</script>
 

Schlie�en

Bewegte Grafiken (Schneeflocken): Schneeflocken im Forum

Bis dann und gutes Gelingen

Wolfgang

Antworten

#4 | RE: Schwebendes Bild mit JavaScript datum

02.11.2012 08:49

Wunderbar!
Vielen, vielen Dank

Antworten

#5 | Schwebendes Bild mit JavaScript - Time Out! datum

04.11.2012 17:51 (zuletzt bearbeitet: 03.12.2023 15:06)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1245

Schwebendes Bild mit JavaScript - Time Out Teil 3
Aktualisiert 21.07.19

Hallo Hans58,
es kann auch nervig sein, ständig die Grafik zwischen den Beiträgen zu sehen.
Um nicht ganz auf diesen Effekt zu verzichten, wird im dritten Teil die Grafik nach einer bestimmten Zeit ausgeblendet!
Das Script funktioniert auch hier im aktuellen IE, FF, Opera und Chrome, ohne dass sich die Scripte untereinander stören.

Hier die Installation:

Das folgende Skript kommt in die Fußzeile oder besser als Plugin in den "bottom_header".
In Zeile 15 wird die Geschwindigkeit der bewegten Grafik angepasst!
In Zeile 7 kann die Adresse der Grafik beliebig ausgetauscht werden!
In Zeile 11+12 wird die Startposition festgelegt!
In Zeile 16 wird die Dauer der Animation eingestellt (hier 30Sek.)!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<style>
#movingContainer {position:fixed;display:none;}
#movingContainer img {cursor:pointer;width:80px;height:69px;}
</style>
 
<div id="movingContainer">
<img title="Hier geht es zum Beitrag" id="moving_picture" src="https://files.homepagemodules.de/b104774/bhnetfiles-3pnj-l.gif" alt="Hier geht es zum Beitrag" onClick="location.href='https://www.hilfe-tricks-tipps.de/t667f30-bewegter-Icon-quer-ueber-das-Forum.html';" onmouseover="moveEnabled(false);" onmouseout="moveEnabled(true);">
</div>
 
<script>
	var posX = 50; // x Startposition
	var posY = 50; // y Startposition
	var moveX = 2; // Pixel in x-Richtung
	var moveY = 2; // Pixel in y-Richtung
	var delay = 40; // ... pro Zeiteinheit in ms
	var timePicture = 30000; // ausblenden nach ... ms, -1 beendet Animation niemals
 
	var interval;
	var movingPicture;
	var movingContainer;
 
 
	function movePicture() {
	if (posX < 0) {
	moveX = Math.abs(moveX);
	}
	else if (posX >= (window.innerWidth - movingPicture.style.width.split('px')[0])) {
	moveX = Math.abs(moveX) * (-1);
	}
 
	if (posY < 0) {
	moveY = Math.abs(moveY);
	}
	else if (posY >= (window.innerHeight - movingPicture.style.height.split('px')[0])) {
	moveY = Math.abs(moveY) * (-1);
	}
 
	posX += moveX;
	posY += moveY;
	movingContainer.style.left = posX + 'px';
	movingContainer.style.top = posY + 'px';
 
	if (timePicture >= 0) {
	window.setTimeout("teminateMoving();", timePicture);
	}
	}
 
	function initMovePicture() {
	movingPicture = document.getElementById('moving_picture');
	movingContainer = movingPicture.parentNode;
	movingContainer.style.width = movingPicture.style.width;
	movingContainer.style.height = movingPicture.style.height;
	movingContainer.style.display = 'block';
	movingContainer.style.left = posX + 'px';
	movingContainer.style.top = posY + 'px';
 
	interval = window.setInterval('movePicture();', delay);
	}
 
	function moveEnabled(enable) {
	if (enable) {
	clearInterval(interval);
	interval = window.setInterval('movePicture()', delay);
	}
	else {
	clearInterval(interval);
	}
	}
	function teminateMoving() {
	clearInterval(interval);
	movingContainer.style.display = 'none';
	}
 
initMovePicture();
</script>
 

Schlie�en

Bewegte Grafiken (Schneeflocken): Schneeflocken im Forum

Bis dann und gutes Gelingen

Wolfgang

Antworten

#6 | RE: Schwebendes Bild mit JavaScript datum

04.11.2012 19:20

Wird ja immer besser!

Du bist ein Genie .... vielen, vielen Dank

Antworten

#7 | Skript "Schwebende Bild" eingeschränkt laufen lassen! datum

01.10.2014 19:43 (zuletzt bearbeitet: 17.05.2020 21:37)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3314
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1245

Skript "Schwebende Bild" eingeschränkt laufen lassen!

Hallo Hans-Lud,
das Skript kann man auch nur im "Portal" oder garnicht im "Portal" oder auf der "Forum Übersicht" laufen lassen!
Das Skript wird einfach mit den passenden Variablen umgeben!
Allerdings kann das Skript durch die Variablen nicht in die "" geschoben werden!
Man kann das Skript im "Template Element" "" oder als Plugin in den "" einfügen (Template wird nicht verändert)!

Skript "Schwebende Bild" nur im "Portal" laufen lassen:

1
2
3
4
5
6
 
{{page_portal==true.start}}
 
// Skript läuft nur im "Portal"!
JavaScript + Div-Container
 
{{page_portal==true.end}}
 

Skript "Schwebende Bild" läuft überall, außer im "Portal":

1
2
3
4
5
6
 
{{page_portal==false.start}}
 
// Skript läuft überall, nur nicht im "Portal"!
JavaScript + Div-Container
 
{{page_portal==false.end}}
 

Skript "Schwebende Bild" nur in der "Forum Übersicht" laufen lassen:

1
2
3
4
5
6
 
{{current_page_index==true.start}}
 
// Skript läuft nur in der "Forum Übersicht"!
JavaScript + Div-Container
 
{{current_page_index==true.end}}
 

Bis dann und viel Erfolg

Wolfgang

Antworten

#8 | RE: Script "Schwebende Bild" nur im Portal laufen lassen datum

01.10.2014 19:49

Vielen Dank für die schnelle Hilfe!

Gruß

Antworten

Aussehen des Forum-Blogs verändern � � Bild vergrössern

�hnliche Themen

Antworten

Letzter Beitrag

Audio-Player fürs Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 2 07.10.2022 20:11
Wolfgang • Zugriffe: 358
Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 633
Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6345

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang

29.08.2020 19:05
von

Wolfgang • Zugriffe: 2211

Bilder vergrößern mit variabler Lupenfunktion!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

21.06.2023 14:42
von

Kipper-Spedition • Zugriffe: 32210

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 4493

Scripte und Effekte fürs Forum und die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.10.2009 17:41
von

Wolfgang • Zugriffe: 13331

Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so �brig bleibt von Wolfgang 0 10.04.2007 17:57
Wolfgang • Zugriffe: 18585

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

78%