IntroductionIn dit artikel zal ik laten zien hoe je de code te schrijven voor een fotogalerij. Een fotogalerij is slechts een verzameling van beelden. Meestal zijn deze beelden zijn klein. Wanneer u een klik ziet u een vergrote vorm van it.You nodig basiskennis van HTML, CSS, JavaScript en DOM om dit artikel te begrijpen. Opmerking: Als u de code niet kunt zien of als u denkt dat er iets ontbreekt in dit artikel (gebroken koppeling, het afwezig), neem dan contact met mij op [email protected].
Dat is, contact met mij op voor het geringste probleem dat je hebt over wat je bent reading.Some CSS en JavaScript het PrinciplesOne kan op dezelfde website worden getoond door meer dan één image-tags. Wat is belangrijk voor weer een bepaald beeld is de waarde (URL) van de eigenschap source. U kunt JavaScript (en DOM) gebruiken om deze waarde te wijzigen voor een afbeelding tag. Een afbeelding tag kan vele attributen en waarden. Als u alleen de waarde van de bron attribuut van de afbeelding tag te veranderen, wordt het beeld van de tag wordt weergegeven veranderen.
Toch zal de nieuwe afbeelding dezelfde CSS-eigenschappen (grootte, bijvoorbeeld) als de vorige image.ExampleThere hebben zijn verschillende ontwerpen voor een fotogalerij. Ik zal een eenvoudig voorbeeld hier te gebruiken. Daarna kunt u de code om uw commercieel project past wijzigen. In dit voorbeeld zijn er vijf kleine afbeeldingen op een webpagina. Wanneer u een kleine afbeelding klikt, wordt de vergrote vorm hoger in de pagina. De vijf beelden op een rij. LayoutWhenever de elementen van uw webpagina zijn in de vorm van een raster, rij of kolom, kunt u de HTML-tabel element.
Dus voor dit voorbeeld, moet je twee tafels. De eerste hoger in de webpagina heeft één rij en drie cellen. De eerste cel kan een tekst hebben. De tweede cel heeft de vergrote afbeelding en de derde cel kan een tekst hebben. De tweede tabel heeft een rij, maar met vijf cellen voor de vijf kleine afbeeldingen. Alle kleine beelden zijn van dezelfde grootte. Er is slechts één groot beeld, dat is het vergrote beeld. Dit is de HTML-code voor de tabel elementen: Sommige tekst kan here.Some tekst gaan kan gaan here.src = "img2.
jpg" onclick = "vergroting (event)"