megan.ashley312
Threadersteller
Dabei seit: 23.09.2012
Ort: -
Alter: 33
Geschlecht: 
|
Verfasst Mi 07.11.2012 18:57
Titel Hintergrundbilder überblenden |
  |
|
Hallo Ihr Lieben,
Ich habe ein Problem. Und zwar bastel ich gerade an einer Seite rum bei der ich ein Hintergrundbild habe das einfach durch ein zweites und ein drittes usw. ersetzt werden soll. Das Bild soll nicht ausfaden und das darauffolgende soll auch nicht einfaden. Ich möchte einfach an der Stelle von Bild1 das Bild2 haben.
Ich hab schon ewig viel rumgesucht und ausprobiert aber nichts funktioniert so wirklich. Einmal habe ich etwas gefunden das ein mal das Bild gewechselt hatte aber das leider viel zu schnell. Ab da bin ich dann nicht mehr weiter gekommen.
Mit einem anderen Code ( den ich als Download irgendwo gefunden habe) hatte ich es dann soweit, dass ich meine Bilder untereinander stehen hatte aber mit dem Bildwechsel wurde es dann leider wieder nichts. Den Code hierzu habe ich hier:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>A Javascript / CSS crossfader script | BrandSpankingNew</title>
<meta name="keywords" content="javascript, css, fade, opacity, transparency, transparent, DOM, brandspankingnew, download" />
<meta name="description" content="A downloadable javascript that fades between two or more DIVs." />
<style type="text/css">
body {
font-family: Lucida Grande, Arial, sans-serif;
font-size: 10px;
text-align: center;
margin: 0;
padding: 0;
}
table
{
border: 1px;
background-color: #999;
font-size: 10px;
}
tr
{
vertical-align: top;
}
th
{
text-align: left;
background-color: #ccc;
}
th,
td
{
padding: 2px;
font-family: Lucida Grande, Arial, sans-serif;
font-size: 1.2em;
}
td
{
background-color: #fff;
}
a {
font-weight: bold;
text-decoration: none;
color: #f30;
}
a:hover {
color: #fff;
background-color: #f30;
}
#wrapper {
width: 400px;
margin: 10px auto;
text-align: left;
}
#content {
font-size: 1.2em;
line-height: 1.8em;
}
#content h1 {
font-size: 1.6em;
border-bottom: 1px solid #ccc;
padding: 5px 0 5px 0;
}
#content h2 {
font-size: 1.2em;
margin-top: 3em;
}
/* STYLES FOR CROSSFADER */
div.cf_wrapper
{
position: relative;
}
div.cf_element
{
width: 400px;
height: 250px;
background-color: #eee;
border: 1px solid #ccc;
}
div.cf_element div.content
{
padding: 10px;
}
div.cf_element div.content h3
{
padding-top: 0;
margin-top: 0;
}
</style>
<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>view the <a href="http://www.brandspankingnew.net/archive/2006/09/javascript_css_crossfader.html">original article</a> at BrandSpankingNew</p>
<h1>Javascript crossfader</h1>
<p>Here's an example of an unobtrusive javascript crossfader.</p>
<div class="cf_wrapper">
<div class="cf_element" id="cf1">
<div class="content">
<h3>Element 1</h3>
<p>Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii <a href="#">legunt saepius claritas</a> est etiam processus dynamicus qui.</p>
</div>
</div>
<div class="cf_element" id="cf2">
<div class="content">
<h3>Element 2</h3>
<p>Est notare quam littera gothica quam nunc putamus parum claram <a href="#">anteposuerit litterarum</a>. Qui nunc nobis videntur parum clari fiant sollemnes in! In vulputate velit esse molestie consequat.</p>
</div>
</div>
<div class="cf_element" id="cf3">
<div class="content">
<h3>Element 3</h3>
<p>Iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me. Usus legentis in lius quod ii legunt saepius claritas est etiam processus dynamicus qui. <a href="#">Littera gothica quam!</a></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
</script>
</body>
</html> |
Such ich nach dem Falschen? Oder versteh ich da einfach etwas nicht? Bin jedenfalls langsam am verzweifeln und mag nicht mehr 
Danke schon mal für eure Hilfe! 
|
|
Willkommen auf dem Portal für Mediengestalter
