Grafik scalieren

rernanded

Erfahrenes Mitglied
Hi

habe folgendes Problem:
Mit folgendem Script kann ich das Bild vergrößern und wieder verkleinern. Leider sind die Vergrößerungen und Verkleinerungen nicht gleichartig nach oben und unten wenn man von der horizontalen Mittelachse der Grafik ausgeht. Wie kann ich das bewerkstelligen?
MONI
HTML:
<script>
var hoehe=1;
function change(){
if (hoehe == 1){
document.getElementById('img').style.height='100px';
hoehe = 2;
}else{
document.getElementById('img').style.height='300px';
hoehe = 1;
}
}
</script>
<style>
#div0 {
background-color: black;
width:100px;
height:100px;
}
#wrapper {
position: absolute;
top:auto;
left:600;
}
#img {
width:300px;
height:auto;
}
</style>
<div id="div0" onmouseover="change()" onmouseout="change()">
</div>
<div id="wrapper"><img id="img" src="grafik.jpg">
</div>
 
Zuletzt bearbeitet:
Leider sind die Vergrößerungen und Verkleinerungen nicht gleichartig nach oben und unten wenn man von der horizontalen Mittelachse der Grafik ausgeht. Wie kann ich das bewerkstelligen?
Hoffentlich alles richtig interpretiert :D
CSS:
#img {
width:300px;
height:auto;
position:absolute /* Ergänzung für JS */
}
Javascript:
var hoehe=1;
function change(){
  if (hoehe == 1){
    document.getElementById('img').style.height='100px';
    document.getElementById('img').style.top='100px'; /* Startposition von oben */
    hoehe = 2;
  }else{
    document.getElementById('img').style.height='300px';
    document.getElementById('img').style.top='0'; /* Startposition von oben */
    hoehe = 1;
  }
}
Übrigens fehlt hier die Angabe zur Einheit (px), was zu einer Fehlpositionierung führt:
CSS:
#wrapper {
...
left:600;
}
 
Zuletzt bearbeitet:
@SpiceLab
Danke, Du hast alles korrekt verstanden (war ja auch gut gefragt ;-)). MONI

PS
Hast Du eine wirklich gute Anleitung zu css transfers, transitions und animations in deutscher Sprache?
 
@SpiceLab Danke Dir den ersten Link kannte ich schon.
Vllt. kannst Du mir aber auch noch einen Tip geben:

Wenn Du den Code oben siehst brauche ich noch was Vergleichbares.
Und zwar will ich wie mit einem Schieberegler ein Image schrittweise um X px vergrößeren wobei das Ausgangsbild und jede Vergrößerung immer den selben fixierten Mittelpunkt haben müssen, d.h. das bild sich gleichmäßig nach oben und unten, rechts und links vergrößert und wieder verkleinert.

Danke vorab.

MONI
 
Wenn Du den Code oben siehst brauche ich noch was Vergleichbares.
Und zwar will ich wie mit einem Schieberegler ein Image schrittweise um X px vergrößeren wobei das Ausgangsbild und jede Vergrößerung immer den selben fixierten Mittelpunkt haben müssen, d.h. das bild sich gleichmäßig nach oben und unten, rechts und links vergrößert und wieder verkleinert.
Merke: Auf der Suche nach xyz ist google dein Freund und Helfer :cool:

jquery slider zoom image -> https://plugins.jquery.com/tag/zoom/ -> jQuery Panzoom
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück