Rollover

[Maik Franz]

Ich versuche für meine Seite ein Rollover zu erstellen, welches beim Hover, also beim überfahren der Bilder, reinzoomt. So weit so gut, jedoch hatte ich es mir so vorgestellt, dass das Bild in der Größe bleibt wie es vorher war und sozusagen nur die Bildmitte herangezoomt wird und der Rand abgeschnitten wird. An sich auch kein Problem. Jedoch ist das Problem, welches ich jetzt habe, eine Zeit dazwischen zu kriegen, sodass das Bild nicht sofort beim Hover im Zoom ist, sondern es langsam dahin zoomt.

Bitte um Codevorschläge.

[Felix Riesterer]

Lieber Maik,

Bitte um Codevorschläge.

dito. Wenn ich weiß, was Du tust, kann ich basierend auf Deinem Code Vorschläge machen.

Liebe Grüße,

Felix Riesterer.

[Maik Franz]

<img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'"/>

Ergäbe das ganze nur halt ohne dieses Zeitlimit. Bild zwei wären dann einfach so zurecht geschnitten wie es gewünscht ist.

Mfg

[JürgenB]

Hallo,

als Anregung kannst du dir ja mal die Ausschnittsvergrößerung auf meiner Spiralenseite ansehen.

Gruß
Jürgen

[Maik Franz]

Als Anregung hatte ich die Seite http://ifitontime-personal.com/ gefunden, welche unter dem "Titelbild" dieses Rollover benutzt. Weiß halt nur nicht wie dies funktionieren soll.

Grüße Maik

[Matthias Apsel]

Hallo Maik Franz,

Als Anregung hatte ich die Seite http://ifitontime-personal.com/ gefunden, welche unter dem "Titelbild" dieses Rollover benutzt. Weiß halt nur nicht wie dies funktionieren soll.

Da, wo "Kochbuch" steht?

Das wird mithilfe der Pseudoklasse :hover vergrößert. transform: scale3d(1.1,1.1,1); Das ginge auch mit transform: scale(1.1). Die weichen Übergänge erreicht man durch transition. Unbekannte Begriffe kannst du gern in unserem Wiki nachschlagen und bei Problemen hier gern wieder nachfragen.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Maik,

<img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'"/>

Du verwendest JavaScript - Deine onmousexyz-Attribute erwarten JavaScript-Anweisungen. Deinen Thread hast Du aber (neben "HTML") mit "CSS" getagged. Wo verwendest Du CSS?

CSS bietet die Möglichkeit, Änderungen in der Darstellung mit Animationen zu erweitern. Dein JavaScript-Bildertauscher kann das so nicht. Vielleicht findest Du ja hier passende Hinweise:

• Bildwechsler (mit CSS-Animations)
• transform: scale()

Liebe Grüße,

Felix Riesterer.

[Maik Franz]

Hallo Matthias Apsel,

genau das meinte ich.

An sich dachte ich mir dies genau so. Jedoch zoomt er mit der funktion scale das ganze Bild und die Größe bleibt nicht erhalten.

Deswegen bin ich immer noch am verzweifeln ^^ .

Maik

[Matthias Apsel]

Hallo Maik Franz,

An sich dachte ich mir dies genau so. Jedoch zoomt er mit der funktion scale das ganze Bild und die Größe bleibt nicht erhalten.

Das Bild befindet sich in einem a-Element, für welches overflow: hidden gesetzt ist.

Bis demnächst
Matthias

[Maik Franz]

Super! Vielen Dank, musste mir gerade selber an die Stirn schlagen grins.