Hoe rollover-afbeeldingen te maken met HTML-code

Video: How to create image rollover using HTML 5 and Javascript

Inhoud

routebeschrijving
Wat je nodig hebt

Met de miljoenen websites die op internet bestaan, is het van essentieel belang dat die van u uniek is. Een techniek die wordt gebruikt om een dynamisch effect aan websites toe te voegen, is 'rollover-afbeeldingen', ook wel 'rollover-knoppen' genoemd. In wezen verandert de bezoeker wanneer hij over een afbeelding zweeft en keert hij terug naar normaal wanneer de muis wordt verwijderd. Dit kan worden gebruikt voor een aantal subtiele effecten, zoals het wijzigen van de kleur van de afbeelding of de letter. U kunt uw eigen rollover-afbeelding maken met eenvoudige HTML-opmaak in verschillende ontwerpprogramma's.

routebeschrijving

Maak dynamische websites met behulp van rollover-afbeeldingen (Jupiterimages / Photos.com / Getty Images)

Maak een nieuw document van de gewenste grootte (in pixels) met behulp van beeldbewerkingssoftware zoals Photoshop. Maak de normale en "rollover" -afbeeldingen, die dezelfde grootte moeten hebben.
Sla beide afbeeldingen afzonderlijk op door naar het menu "Bestand" te gaan en "Opslaan" te selecteren. Gebruik JPEG-, GIF- of PNG-indelingen. Hoewel de eerste twee het meest worden gebruikt, behouden PNG's transparantie. Sla de afbeelding op in de lokale hoofdmap van uw site.
Open de juiste ontwerpsoftware, zoals Adobe Dreamweaver. Klik op de knop "Vernieuwen" in de bibliotheek om de bibliotheek en de lokale hoofdmap voor uw site bij te werken. Lokaliseer de afbeeldingen in de hoofdmap.
Schakel over naar de codeweergave van de webpagina.
Type "
"In de code, zonder de startcitaten.
Vervang 'http://yoursite.com' door uw websiteadres. Vervang ook "IMAGE1" en "IMAGE2" door respectievelijk de namen van de normale en "rollover" -afbeeldingen.