Roteren van een afbeelding op een webpagina met Javascript is relatief eenvoudig. U moet bekend zijn met HTML, zodat u wat u zoekt weet op wanneer u de code van de webpagina als u wilt roteren van de afbeelding hebt bewerkt, maar als u een web-pagina uitgeven hulpmiddel geschikt voor het auto-genereren van Javascript voor rollover-afbeeldingen gebruiken, hoeft u niet te schrijven van eventuele Javascript in jezelf om dit werk te maken.
Wat die u nodig hebt
- Webpagina's bewerken software
- Grafische software
- Webbrowser
- Computer
Open uw web-pagina uitgeven software en maak een nieuwe pagina of optrekken van de pagina die u wilt toevoegen het roterende beeld en invoegen van de afbeelding. Het wordt aanbevolen dat u een web-pagina uitgeven hulpmiddel zoals Adobe Dreamweaver dat sommige van de Javascript voor u kunt maken.
Open uw grafische software als u niet al een reeks afbeeldingen tonen de rotatie van het beeld.
Uw grafische programma gebruiken om kopieën van de oorspronkelijke afbeelding te maken, elk gedraaid iets meer dan de vorige, totdat u terug naar de oorspronkelijke afbeelding. Als u van een 90 graden draaiing telkens gebruikmaakt, zou je eindigen met 4 beelden.
![]()
Deze afbeeldingen exporteren als afzonderlijke JPG- of GIF-bestanden.
Klik op de originele afbeelding in uw web bewerkgereedschap en noem deze iets als Rotate_Me in het deelvenster Eigenschappen van uw web software voor het bewerken of in de HTML-code. De code zou uitzien: img src="/Smilies/Smiley1.png" alt = "Smiley1" naam = "Rotate_Me" width = "109" height = "109" id = "Rotate_Me".
![]()
Klik boven aan uw web-pagina en kies gedrag uit het Windows-menu (Dreamweaver). Als u geen Dreamweaver gebruikt, maken een roll over het gedrag van de afbeelding van de knop/swap in uw web software voor het bewerken of gaat u naar stap 7 en de Javascript kopiëren van de afbeelding.
![]()
Toevoegen van een nieuwe gedrag met de + menu en kies Afbeelding verwisselen als het type. Gebruik de knop Bladeren om te zoeken van het tweede bestand in uw rotatie. De afbeelding ziet u de Javascript-code automatisch gegenereerd door Dreamweaver. Kopieer dit naar uw web-pagina als uw web bewerkgereedschap niet auto-van de code genereren.
![]()
Klik in de HTML-code voor uw pagina en voeg de javascript die u hierboven in de volgende afbeelding in de HEAD-sectie van uw pagina ziet, de / /-- en
/ script tags. Voor een snelkoppeling, kunt u deze code van Danilo Celic de on line zelfstudie op roterende beelden met Dreamweaver downloaden (zie bronnen).![]()
Aanpassen van de code om de locatie en de bestandsnamen van de afbeeldingen die deel van uw rotatie uitmaken te weerspiegelen, en de tijd tussen afbeelding swaps te controleren de snelheid van de rotatie aanpassen. 1000 = 1 tweede, zodat de code standaardwaarde 5 seconden tussen is beeld worden verwisseld. Uw code er ongeveer zo uit Array('Smilies/Smiley1.png','Smilies/Smiley2.png','Smilies/Smiley3.png','Smilies/Smiley4.png'); en vertraging van de var = 1000;
Verwijder de overbodige MouseOver opdracht die Dreamweaver toegevoegd aan de lichaamsmarkering bij het instellen van het gedrag Afbeelding verwisselen. Hier vindt u de code net onder de Javascript die u in hebt geplakt. Het ziet eruit als: body onload "MM_preloadImages (something1.jpg)" onmouseover = = "MM_swapImage 'Rotate_Me','','something2.jpg',1)". Maken het eruit: body onload="preloadImgs();randomImages();".
Zoeken en vervangen de afbeelding naam "rotator" in de RandomImages-functie met de afbeelding naam u gaf uw afbeelding in stap 3. In het voorbeeld hier gebruikt, Rotate_Me is de afbeeldingsnaam zodat de start van de bewerkte code eruit zou zien: MM_swapImage ('Rotate_Me',...
Uw webpagina opslaan, uploaden naar uw webserver samen met alle grafische bestanden en een videovoorbeeld weergeeft in uw webbrowser te testen.
