Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Frage Entwicklung HTML

Fadein fadeout eines bildes

Mitglied: Atlanos

Atlanos (Level 1) - Jetzt verbinden

29.03.2014, aktualisiert 21:06 Uhr, 2849 Aufrufe, 6 Kommentare, 2 Danke

Hallo Leute,
folgendes, hab ne Seite, nur als Hobby nicht komerziell, und eine Idee.
Ich weiss es gibt 1.000.000 dieser Ideen, aber ich hab keine Lösung zu einem einfachem Problem.
OK Hinterwäldler aus Luxemburg.
Wer kann helfen:
seite: index.html
da will ich ein Bild ( grösse zu bestimmen) über die Seite ein"faden" also langsam einblenden und auch wieder einfach langsam ausblenden.
z.b. wann,wo das nexte Event statfindet.
beim einblenden/ausblenden soll die geladene "index.html" in den Schatten gelegt werden, also dunker werden.
habe schon mit lightbox shadowbox.js u.s.w. probiert aber alles auf english. ( verstehe leider nur deutsch und französich)
WER KANN DEM HINTERWÄLDLER HELFEN ?
Momentan klappts nur mit popup fenster. ( ist aber meistens bei den Besuchern browserseitig gesperrt......
DANKE
jeder kann mich erreichen unter: joetrensch@yahoo.de
Mitglied: Lochkartenstanzer
29.03.2014 um 21:30 Uhr
hHast Du mal in SELFHTML reingeschaut?

lks
Bitte warten ..
Mitglied: Atlanos
29.03.2014 um 21:42 Uhr
Ja, aber dann lande ich immer bei der einführung von CSS, ich habe schon einen Teil des sripts aber ich kriege den nicht ÜBER die index,html seite gelegt.fahre ja momentan mit popup fenster aberr....
hier mal mein script:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js;&g ..."
<script type="text/javascript">
$(document).ready(function(){
$("#Objekt").fadeIn(10000).delay(5000).fadeOut(1000);
});
</script>
<body>
<img id="Objekt" src="images/fenster/lips.jpg" width="600" height="397" alt="">
</body>
</html>

aber genau das Bild soll nach dem laden der index.html datei, über dieser erscheinen, und wieder verschwinden. aber solange soll die index.html im Hintergund sichtbar sein....
schau auch, meine seite.:
http://www.sandrawies.com
Bitte warten ..
Mitglied: colinardo
31.03.2014, aktualisiert um 10:35 Uhr
Hallo Atlanos,

Beispiel: => Demoseite
01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Demo Bild einfaden</title> 
06.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
07.
<script> 
08.
$(document).ready(function(e) { 
09.
        // falls der Nutzer das Bild nicht sehen möchte und auf den Hintergrund klickt, ausblenden .... 
10.
	$('#outer').click(function() { 
11.
       	$('#outer').fadeOut({queue:false,duration:500}); 
12.
   	}); 
13.
        // Bild einblenden, warten und ausblenden 
14.
        $('#outer').fadeIn(1000).delay(3000).fadeOut(500); 
15.
}); 
16.
</script> 
17.
<style type="text/css"> 
18.
#outer { 
19.
	display:none; 
20.
	position: fixed; 
21.
	left: 0px; 
22.
	top: 0px; 
23.
	right: 0px; 
24.
	bottom: 0px; 
25.
	background-color: RGBA(0,0,0,0.6); 
26.
27.
#outer #inner { 
28.
	position:relative; 
29.
	margin:auto 0; 
30.
	top:50vh; 
31.
	text-align:center; 
32.
33.
#inner img { 
34.
	margin-top: -200px; 
35.
	box-shadow: 5px 5px 10px; 
36.
37.
</style> 
38.
</head> 
39.
 
40.
<body> 
41.
<div id="lipsum"> 
42.
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris   pharetra, elit sit amet viverra dictum, arcu felis blandit eros, et   condimentum elit eros vitae elit. Proin odio enim, iaculis ullamcorper   eros at, vulputate dictum lacus. Nulla id rhoncus lectus, convallis   laoreet nisl. Nam volutpat sollicitudin laoreet. Cras luctus convallis   mauris. Phasellus tincidunt tellus sit amet sapien ultricies lobortis.   Vestibulum venenatis pharetra augue nec tempor. Nulla convallis leo   vitae massa malesuada, a tincidunt erat accumsan. Etiam rutrum, nunc eu   mollis hendrerit, sapien lorem malesuada massa, ultrices consequat orci   metus vitae nisl. </p> 
43.
  <p> Nam condimentum sem eu dolor elementum, ac congue lacus varius. Aenean   semper eu felis vitae interdum. Vivamus id libero vel magna adipiscing   malesuada quis sit amet magna. Pellentesque id euismod lectus. Vivamus   vitae mi ante. Morbi id nisl egestas metus venenatis mattis vitae in   velit. Nulla facilisi. Duis massa ipsum, accumsan at auctor condimentum,   bibendum at turpis. Praesent luctus lacus nec lacus venenatis euismod   vel a est. Donec vel arcu non odio pellentesque adipiscing. Nunc a   condimentum orci. Sed sed erat risus. </p> 
44.
  <p> Ut semper imperdiet enim ut dapibus. Lorem ipsum dolor sit amet,   consectetur adipiscing elit. Morbi ut tortor rutrum, ornare tellus nec,   convallis dui. Pellentesque auctor at nisi non dictum. Pellentesque   luctus mi vel odio condimentum, id porta lorem interdum. Duis orci arcu,   malesuada et dui eget, ornare volutpat eros. Vivamus quis elit in eros   egestas euismod sed at dui. Nam at elit posuere, dictum leo sed,   accumsan leo. </p> 
45.
  <p> Suspendisse mollis sed nunc cursus elementum. Vestibulum consectetur   odio nec mi pellentesque, id adipiscing elit aliquam. Phasellus in   auctor sem. Mauris dui ligula, ultricies et consectetur at, condimentum   in dui. Morbi semper, quam scelerisque vestibulum ornare, lorem elit   tristique lorem, sed tempor neque sapien eget velit. Curabitur ultrices   eros ut lacus dapibus mattis. Nullam ac dapibus odio. Maecenas nec   viverra elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.   Quisque auctor magna purus, a dignissim nulla dictum id. Donec quis ante   volutpat mi tristique volutpat. </p> 
46.
  <p> Ut accumsan auctor purus, eget ultrices dui porttitor ac. Aenean ut quam   non arcu fermentum pretium. Maecenas eget massa luctus, ultricies felis   sed, lobortis mi. Morbi convallis eleifend gravida. Duis at nulla diam.   Sed malesuada dui nisi, eu consectetur est ornare sit amet. Sed   eleifend pellentesque sem et rutrum. Aenean quis arcu quis enim pharetra   posuere. Duis eu diam hendrerit, mollis libero sit amet, aliquam   ligula. Suspendisse nibh orci, tincidunt venenatis aliquam sit amet,   egestas nec nulla. Quisque ut mauris auctor, feugiat metus et, egestas   velit. Aenean at ipsum tincidunt, sollicitudin metus a, porttitor velit.   Mauris quis nibh ac nunc imperdiet gravida eget a felis. </p> 
47.
</div> 
48.
<div id="outer"> 
49.
	<div id="inner"> 
50.
    <img src="http://www.manualpraxis.ch/Praxis/images/stories/Grafiken/aloe_pflanze.jpg" /> 
51.
    </div> 
52.
</div> 
53.
</body> 
54.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: Atlanos
31.03.2014 um 10:27 Uhr
Uwe,
du bist mein Held.
genau DAS hab ich gesucht........
fantastisch
muss ich nur noch anpassen, sogar das Bild passt.
Wahnsinn. Du hast was gut bei mir, solltest du mal nach LX kommen melde dich auf meiner Email
Danke....
Bitte warten ..
Mitglied: Atlanos
31.03.2014 um 10:28 Uhr
Nochmal,
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
Danke dir nochmals.
Bitte warten ..
Mitglied: colinardo
31.03.2014, aktualisiert um 10:41 Uhr
Zitat von Atlanos:
das Bild z.b. oben rechts anpassen, z.b. abstand 10 auf a0 px ist ja normaler weg unter position ?
?? Du setzt dein Bild rein, dann solltest du eigentlich nur noch den CSS-Code zur vertikalen Positionierung des Bildes anpassen (margin-top auf die hälfte der Bildhöhe deines Bildes setzen / bei 400px Bildhöhe also -200px)
#inner img {  
  margin-top: -200px;  
  box-shadow: 5px 5px 10px; 
} 
Der Code ist für die Positionierung horizontal und vertikal zentriert optimiert, lässt sich aber mit dem CSS einfach an die Bedürfnisse anpassen.
Bitte warten ..
Ähnliche Inhalte
Grafik
Stapelverarbeitung Bild in neues Bild einfügen
Frage von KodaCHGrafik3 Kommentare

Guten Morgen Ich habe hier einen Ordner mit ganz vielen Bildern. Die grösse ist komplett unterschiedlich. Nun habe ich ...

Humor (lol)
Wo ist der Fehler auf dem Bild?
Information von the-buccaneerHumor (lol)17 Kommentare

und was wird denn beim klicken nun behoben? nichts! meldung bleibt so. nachdem ein anderer client nach einem produktupdate ...

Windows Tools
Dopppelte Bilder
gelöst Frage von malikaWindows Tools7 Kommentare

Guten Abend! Kann mir jemand bitte ein kostenloses Programm für Windows 7 Pro oder OS X El Capitan empfehlen, ...

Windows 8
Bilder nach kopieren defekt
gelöst Frage von deb10er0Windows 828 Kommentare

Hallo ich habe seit neuestem ein Problem wenn ich Bilder von meinem PC weg (also z.B. auf ein Tablet ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 1 TagLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 2 TagenTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 2 TagenSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 2 TagenSicherheit10 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
Batch & Shell
Meltdown Microsoft Prüf Script - .zip Datei leider leer
gelöst Frage von MasterBlaster88Batch & Shell13 Kommentare

Hallo zusammen, ich patche gerade unsere Windows Server bzgl. der Meltdown Lücke. Patch vorhanden, Reg Keys gesetzt Um das ...

Batch & Shell
Shell-Skript - Syntax error: Unterminated quoted string
Frage von newit1Batch & Shell13 Kommentare

Hallo Ich schreibe ein Skript das eine CSV-Datei in eine mySQL Datenbank schieben soll. Bekomme nach start des Skrips ...

E-Mail
Erfahrungen mit hMailServer gesucht
Frage von it-fraggleE-Mail10 Kommentare

Hallo, meine neue Stelle möchte einen eigenen Mailserver. Ich als Linuxkind war direkt geistig mit Postfix dabei. Leider wollen ...

Entwicklung
VBS: alle PDF-Dateien in einem Ordner gleichzeitig öffnen
gelöst Frage von JuweeeEntwicklung9 Kommentare

Hallo, ich habe in deiner Ordnerstruktur (.\Tagesberichte\xx.18\) mehrere dynamische PDF-Formulare (mit LCD erstellt). Die Berichtsformulare sind im Layout alle ...