Hallo,
ich stehe vor dem Problem, ein per JavaScript eingefügtes Bild zuerst größer werden zu lassen und anschließend wieser kleiner.
Das vergrößern klappt auch, aber in der Methode die das Bild kleiner werden lässt, ist document.getElementById("this.ID"); null.
Es geht um Die Methode lower() In der Klasse Box. (bigger() funktioniert)
JavaScript
var school_Pictures = [["garbage-bag-1256041_1920.jpg", "school_1"],
["MBGLogo-grauorange.png", "MBG"],
["Plastic_beads2.jpg", "school_3"],
["plastikgranulat_digitalstock_fotolia_49126273_xxl_0.jpg", "school_4"]]; //Pictures of the schools
//Class for a themefield
class Box
{
constructor (Id, Pictures, Name)
{
this.Id = Id;//Id of the devision where the picture has to been put
this.pics = Pictures;//list of the possible pictures
this.name = Name;//ID of the devision where the name has to been put
this.img_pos = 0;//list iterator
this.max_img_pos = Pictures.length - 1;//number of listelements
this.img_ID = "img_" + Id;//ID of the Picture
}
change ()//methode for changing the picture
{
var img = this.pics[this.img_pos][0];//the picture to use
var name = this.pics[this.img_pos][1];
document.getElementById(this.Id).innerHTML = "<img src='" + img + "' width='250px' height='250px' id='" + this.img_ID + "'>";//including the picture in HTML (overwrite) //evt. wieder auf 250px setzen!
document.getElementById(this.name).innerHTML = "<p>" + name + "</p>";//including the name
if (this.img_pos < this.max_img_pos)//check for getting the following List-Indexnumber
{
this.img_pos ++;//incrementation of the List-Index-Number (iterator)
}
else
{
this.img_pos = 0;//setting the List-Index-Number to 0 (iterator)
}
}
bigger ()
{
var element = document.getElementById(this.img_ID);
element.animate
([
{
width: "0px",
height: "0px",
margin: "125px"
},
{
width: "250px",
height: "250px",
margin: "0px"
}
],
{
duration: 1500,
iterations: 1,
fill: "forwards"
}
);
}
lower ()
{
var element = document.getElementById(this.img_ID);
element.animate
([
{
width: "250px",
height: "250px",
margin: "0px"
},
{
width: "0px",
height: "0px",
margin: "250px"
}
],
{
duration: 1500,
iterations: 1,
fill: "forwards"
}
);
}
}
function renew_all ()
{
schools.change();
schools.bigger();
window.setTimeout(schools.lower, 2500);
window.setTimeout(renew_all, 4000);
//renew_all();
}
var schools = new Box ("school_pictures", school_Pictures, "name_of_school");//creating an object for the schools-Box
renew_all();
Alles anzeigen
Mit freundlichen Grüßen
Justus