Fragen und Antworten » Laufschrift mit Grafik

13.03.2016 13:39

Devil-su
#1 Laufschrift mit Grafik

De

Kann mir vielleicht jemand helfen, ich suche einen Html Code, mit dem ich in der Kopfzeile des Forums, in einer Laufschrift Bilder /Grafiken einfügen kann, die, wenn man mit der Maus drüberfährt anhalten und größer angezeigt werden.
Vielen Dank im voraus.

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden

#2

13.03.2016 13:41

TripleM
#2 RE: Laufschrift mit Grafik

TripleM

Meinst du im Header??

http://bundesliga-friends.xobor.de/

so ähnlich wie dort?

Antworten

Beitrag melden

#3

13.03.2016 13:48

Devil-su
#3 RE: Laufschrift mit Grafik

De

Devil-su

Hallo, ich habe den Link angeklickt, aber ich kann dort keine Laufschrift sehen.

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden

#4

13.03.2016 14:15

TripleM
#4 RE: Laufschrift mit Grafik

TripleM

Habe nun bei dir geschaut denke ich weiß was du möchtest. Schau mal ob ich was hin bekomme.

Antworten

Beitrag melden

#5

13.03.2016 14:18

Devil-su
#5 RE: Laufschrift mit Grafik

De

Devil-su

Das ist ja super, vielen Dank.

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden

#6

13.03.2016 14:36

TripleM
#6 RE: Laufschrift mit Grafik

TripleM

Der Wolfgang hat da was im Angebot Warum das Rad neu Erfinden. Das kann man auch in der Kopfzeile Nutzen.
http://www.hilfe-tricks-tipps.de/t437f31...Funktionen.html

Würde da einfach mal Fragen bevor wir nun was neues erstellen.

Antworten

Beitrag melden

#7

13.03.2016 14:58

Devil-su
#7 RE: Laufschrift mit Grafik

De

Devil-su

Vielen Dank für deinen Tipp, leider muss ich gestehen, dafür reicht mein Wissen leider nicht aus. Ich dachte es würde einfacher gehen. Naja, einen Versuch war es wert.

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden

#8

13.03.2016 20:41

Olaf
#8 RE: Laufschrift mit Grafik

Ol

Olaf

Ich habe einen CSS/HTML Code geschrieben,der eventuell Deinen Wunsch nachkommt.
Zu sehen in meinem Testforum in der Kopfzeile.
http://138600.homepagemodules.de/

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#9

13.03.2016 21:05

Devil-su
#9 RE: Laufschrift mit Grafik

De

Devil-su

Das ist ja toll. Sieht super aus. Genau so wollte ich das. Vielen Dank für die Mühe.

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden

#10

13.03.2016 21:06

Kicky
#10 RE: Laufschrift mit Grafik

Kicky

@Olaf ... Das würde mir auch gefallen, wenn man Bilder hinter die Laufschrift einfügt, dass diese sich beim drüberfahren vergrößern! Könnte man dafür den Code bekommen?

Buisness Template

https://allroundboard.info

Liebe Grüße

Antworten

Beitrag melden

#11

13.03.2016 22:08 (zuletzt bearbeitet: 13.03.2016 22:14)

Olaf
#11 RE: Laufschrift mit Grafik

Ol

Olaf

Zitat von Kicky im Beitrag #10
Könnte man dafür den Code bekommen?

Naklar.
Die nötigen CSS Kenntnisse sollte man beim anpassen des Code schon haben.

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
 
<style>
.laufschrift {
animation: lauf 20s linear infinite;
}
@keyframes lauf {
0%   { transform: translate(100%, 0);}
100% {  transform: translate(-20%, 0); }
}
.laufschrift img{
width:30px;
height:30px;
}
.laufschrift:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.laufschrift img:hover{
cursor:pointer;
position:absolute;
width:200px;
height:200px;
}
</style>
<div class="laufschrift">Ein Bild vergrößern mit der Maus berühren&nbsp;<img src="http://up.picr.de/12030197os.jpg">&nbsp;<img src="http://up.picr.de/12030198yd.jpg">&nbsp;<img src="http://up.picr.de/12030199xm.jpg"></div>
 
 

Den Code habe ich im Adminmenü in der "Kopfzeile" eingesetzt.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#12

13.03.2016 22:32

Olaf
#12 RE: Laufschrift mit Grafik

Ol

Olaf

Ich habe keine Navileiste in meinem Testforum und da liegen die Bilder ganz auf dem Forum.Ist allerdings eine Navileiste vorhanden,dann werden die vergrößerten Bilder unter der Navileiste angezeigt.Ich habe einen "z-index" Wert mit eingefügt,um die vergrößerten Bilder über der Navileiste anzuzeigen.

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
 
<style>
.laufschrift {
z-index:1000;
animation: lauf 20s linear infinite;
}
@keyframes lauf {
0%   { transform: translate(100%, 0);}
100% {  transform: translate(-20%, 0); }
}
.laufschrift img{
width:30px;
height:30px;
}
.laufschrift:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.laufschrift img:hover{
cursor:pointer;
position:absolute;
width:200px;
height:200px;
}
</style>
<div class="laufschrift">Ein Bild vergrößern mit der Maus berühren&nbsp;<img src="http://up.picr.de/12030197os.jpg">&nbsp;<img src="http://up.picr.de/12030198yd.jpg">&nbsp;<img src="http://up.picr.de/12030199xm.jpg"></div>
 
 

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

Antworten

Beitrag melden

#13

13.03.2016 22:48 (zuletzt bearbeitet: 13.03.2016 22:49)

Kicky
#13 RE: Laufschrift mit Grafik

Kicky

@Olaf, ich habe Deinen Code so eingefügt in der Kopfzeile und unten abgeändert! Aber dann scrollt die gesamte Navigation mit, deswegen nun erstmal wieder entfernt!

Ich hatte nur ein Bild eingefügt zum ausprobieren! So sieht der unten veränderte Laufschrift-Code aus!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<style>
.laufschrift {
animation: lauf 20s linear infinite;
}
@keyframes lauf {
0%   { transform: translate(100%, 0);}
100% {  transform: translate(-20%, 0); }
}
.laufschrift img{
width:30px;
height:30px;
}
.laufschrift:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.laufschrift img:hover{
cursor:pointer;
position:absolute;
width:200px;
height:200px;
}
</style>
<div class="laufschrift">Welcome im Allroundboard&nbsp;<img src="https://files.homepagemodules.de/b594691/a_1800_03c67150.jpg"</div>
 

Buisness Template

https://allroundboard.info

Liebe Grüße

Antworten

Beitrag melden

#14

13.03.2016 23:01

Devil-su
#14 RE: Laufschrift mit Grafik

De

Devil-su

Hallo Olaf, erst einmal vielen Dank für deine Hilfe, es funktioniert prima, aber ich hätte noch gern einen Abstand zwischen den einzelnen Bildern.
Wieviele Bilder kann ich dort einbinden oder ist das unbegrenzt?
MfG Devil-su

Gruß Devil-su
----------------------------------------------------------------------------------------------------------
Board 202048 www.a-f-a-forum.de

Sorge dafür, dass du hast, was du liebst, sonst bist du irgendwann gezwungen, zu lieben was du hast.

Antworten

Beitrag melden