Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

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

Fadein fadeout eines bildes

Frage Entwicklung HTML

Mitglied: Atlanos

Atlanos (Level 1) - Jetzt verbinden

29.03.2014, aktualisiert 21:06 Uhr, 2709 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 ..
Neuester Wissensbeitrag
Heiß diskutierte Inhalte
LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (18)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...