Bild überblendung?

[norbert-norb]

Wie bekomme ich einen solchen Effekt, wie die Bilder ihn haben auf den Link --> http://refotografie.blogspot.com/

Würde gerne 2 Bilder von mir auch per Mauszeiger, mit einen solchen Effekt programmieren.

 

[CrazyLopp]

AW: Bild überblendung?

Auf der Seite werden die Bilder im Content mittels Flash angezeigt und somit wurde auch der effekt in Flash generiert, kannst dir hier mal die Tutorials über Flash anschauen, damit du weißt wie so etwas geht...

Edit:
Da du den Link geändert hast, gibt es hier auch eine andere Antwort, auf der Seite (http://refotografie.blogspot.com/) wird der effekt mittels Javascript erzielt...
Dennoch findest du auch zu diesem Thema Tutorials auf der Seite, entweder unter Javascript oder jQuery, mit beiden geht es!

 

[Doitsu]

AW: Bild überblendung?

Meinst du jetzt das in der Navi, dass sich das Bild aendert? Oder das da dann noch diese Pfeile sind?

Wenn du das mit dem Bild aendern meinst, machst du das mit CSS:

a {
  display: block;
  height: px; /* Bild hoehe */
  width: px; /* Bild breite */
  background: url('pfad/zum/bild.ex') top left no-repeat;
}
a:hover {
  background: url('pfad/zum/hover_bild.ex') top left no-repeat;
}

So wuerde ich es machen - man kann es aber auch (wie auf der Seite) mit aendern der top-Werte des Backgrounds machen.
Mehr dazu hier.

Wenn du das mit den Pfeilen meinst, das ist keine ueberlagerung, sondern nur wie oben beschrieben das aendern des Hintergrundes - hier das
Je nach dem welches Teil gebraucht wird, wird dieses durch CSS eingeblendet.

(Oder meinst nu was ganz anderes? )

Edit: Ach die Bilder sind Klick bar, lol.

 

[HansjoergOtt]

AW: Bild überblendung?

Hallo,
das ist ein Mouse-Roll-over Effekt. Ähnlich wie bei Navigationsleisten, bei denen sich auch manchmal die "Taste" verändert, wenn man mit der Maus über den Link geht.
Herzliche Grüße
Hans-Jörg

 

[norbert-norb]

AW: Bild überblendung?

Auf der Seite werden die Bilder im Content mittels Flash angezeigt und somit wurde auch der effekt in Flash generiert, kannst dir hier mal die Tutorials über Flash anschauen, damit du weißt wie so etwas geht...

Edit:
Da du den Link geändert hast, gibt es hier auch eine andere Antwort, auf der Seite (REFOTOGRAFIE) wird der effekt mittels Javascript erzielt...
Dennoch findest du auch zu diesem Thema Tutorials auf der Seite, entweder unter Javascript oder jQuery, mit beiden geht es!

Beim ersten Link hat er auch Flash benutzt, hab leider die 2 Links verwechselt. Habe leider keine Tutorials genau zu diesem Thema gefunden.

Hallo,
das ist ein Mouse-Roll-over Effekt. Ähnlich wie bei Navigationsleisten, bei denen sich auch manchmal die "Taste" verändert, wenn man mit der Maus über den Link geht.
Herzliche Grüße
Hans-Jörg

Ja das weiß ich, nur leider weiß ich nicht wie man es einstellt das der Übergangseffekt so langsam stattfindet, und das Bild nur bei der Berührung der Maus umspringt.

EDIT

Bin Grad etwas durcheinander gekommen ^^, werde es mal wie du gesagt hast es probieren über Mouse-Roll-over.

 

[anoX]

AW: Bild überblendung?

Ich würde jquery dafür nutzen.

 

[norbert-norb]

AW: Bild überblendung?

Wusste gar nicht das ein solcher Effekt soviel Arbeit bedeutet ^^

EDIT:

Ich bekomme das ohne eine großen Arbeitsaufwand gar nicht gebacken, daher werde ich das wohl ganz liegen lassen, hab die Zeit dazu mich da jetzt Stunden einzuarbeiten leider nicht

 

[fakerer]

AW: Bild überblendung?

also das ist nicht so aufwändig.
Der hat einfach 2 Bilder übereinander gelegt ändert mit javascript die transparenz des oberen.
Musst dir nur mal opacity ansehen.

 

[norbert-norb]

AW: Bild überblendung?

Hab es herausgefunden,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).animate({"opacity": "0"}, "slow");
},
function() {
$(this).animate({"opacity": "1"}, "slow");
});
 
});
</script>


<style>
div.fadehover {
    position: relative;
clear: both;

    }
 
img.a {
    position: relative;
    left: 0;
    top: 0;
        z-index: 10;
cursor: pointer;

    }
 
img.b {
    position: absolute;
    left: 0;
    top: 0;
    }
</style>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<body>

<div class="fadehover"><img alt="" class="a" src="1.jpg" /><br />
<img alt="" class="b" src="2.jpg" /><br />
<div style="clear: both;">&nbsp;</div></div></p>
<div style='clear: both;'></div>
</div>

</body>

Danke auch für eure Hilfe, jetzt muss ich denn script noch irgendwie in WordPress bekommen ^^

 

[Doitsu]

AW: Bild überblendung?

Hm, wenn du spaeter auch mal Transparente (oder unterschiedlich grosse) Bilder haben solltest, wuerde ich gleich auf eine Variante mit fadeIn & fadeOut setzen. Wenn dem aber nie der Fall sein sollte ist das ziemlich.. egal.

 

[norbert-norb]

AW: Bild überblendung?

Das soll erst mal so bleiben.

Weiß jemand wie ich die Geschwindigkeit

$("img.a").hover(
function() {
$(this).animate({"opacity": "0"}, "slow");
},
function() {
$(this).animate({"opacity": "1"}, "slow");
});

noch langsamer machen kann?

Laut Homepage --> .animate() ? jQuery API steht

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Also kann ich es noch langsamer machen mit der Eingabe bei "Slow" mit "1000" oder mehr? Nur funktioniert das leider nicht.

 

[Doitsu]

AW: Bild überblendung?

Also bei mir gehts:

<script>
$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).animate({"opacity": "0"}, 10000);
},
function() {
$(this).animate({"opacity": "1"}, 10000);
});
 
});
</script>

du musst halt bedenken es sind Millisekunden, und 400 Millisekunden sind nicht gerade viel. (Deswegen jetzt einfach mal auf 10 Sekunden gesetzt)

 

[norbert-norb]

AW: Bild überblendung?

Ja genau hier war der Fehler danke. Hab immer mit "" geschrieben ^^