Hoe De Cursor Op De Site Te Veranderen

Inhoudsopgave:

Hoe De Cursor Op De Site Te Veranderen
Hoe De Cursor Op De Site Te Veranderen

Video: Hoe De Cursor Op De Site Te Veranderen

Video: Hoe De Cursor Op De Site Te Veranderen
Video: Creating Custom Cursors - CSS Only, and JavaScript! 2024, Mei
Anonim

Sites met een aantrekkelijk uiterlijk zijn erg populair bij bezoekers. Om het uiterlijk van de bron te verbeteren, veranderen hun eigenaren het ontwerp meestal volledig of gedeeltelijk. Helaas kost het toevoegen van nieuwe kleurrijke elementen voor paginadecoratie veel tijd. Een snelle manier om de aandacht van bezoekers van bronnen te trekken, is door de gebruikelijke cursor te vervangen door een kleine afbeelding. Om een dergelijk element op de site te installeren, moet u een paar eenvoudige stappen uitvoeren.

Hoe de cursor op de site te veranderen
Hoe de cursor op de site te veranderen

Het is nodig

  • - eigen site
  • - minimaal basiskennis van HTML hebben
  • - weet waar de CSS-code zich op de site bevindt

instructies:

Stap 1

Download eerst een afbeelding die de aanwijzer op de site zal vervangen. Afbeeldingen van gangbare grafische formaten (.bmp,.gif,.jpg,.png, etc.) zijn hiervoor niet geschikt.

Stap 2

Om de aanwijzer te vervangen, hebt u een afbeelding in het.cur- of.ani-formaat nodig. Om zo'n afbeelding te krijgen, zoekt u op internet naar afbeeldingen die speciaal zijn ontworpen voor cursors. De.cur-extensie is specifiek voor statische afbeeldingen en de.ani-extensie is specifiek voor geanimeerde afbeeldingen. Sla het gewenste bestand op uw computer op.

Stap 3

Maar om de aanwijzer te wijzigen, is het helemaal niet nodig om de voltooide afbeelding te maken. Wil je zelf een foto maken, gebruik dan een van de speciale programma's voor het maken van cursors of het converteren van grafische bestandsformaten.

Stap 4

Vul de afbeelding in voor de cursor op de site. Zoek vervolgens in de broncode de tag en breng de volgende wijzigingen aan:

In plaats van "afbeeldingen / 1.ani" te schrijven, geeft u het pad aan naar de afbeelding die naar uw site is geüpload.

Stap 5

Als u wilt dat de cursor de vorm heeft van één afbeelding wanneer u over de link zweeft, en wanneer het in de afwezigheid van het linking-element is - om eruit te zien als een andere afbeelding, dan is het beter om CSS te gebruiken om de aanwijzer te wijzigen. Om dergelijke transformaties uit te voeren, uploadt u eerst een ander bestand met de extensie.cur of.ani naar de site.

Stap 6

Maak vervolgens in de CSS van uw site een item "body {cursor: url ('1.ani');}", in plaats van "1.ani", specificeer het pad naar de hoofdafbeelding voor de cursor die is geüpload naar de plaats. Deze code voegt de eigenschap toe om de cursor naar de opgegeven afbeelding te wijzigen in de tag waarin de inhoud van alle pagina's van de bron is geschreven.

Stap 7

Schrijf vervolgens in CSS de regel "a {cursor: url ('2.ani');}", waarbij "2.ani" wordt vervangen door het pad naar de cursorafbeelding die is geüpload naar de bron, die zou moeten verschijnen wanneer de aanwijzer erboven staat de link. Met de ingevoerde invoer kunt u de cursor vervangen door de bijbehorende afbeelding wanneer de aanwijzer een link op de site raakt, omdat deze wijzigingen aanbrengt in de tag-eigenschap.

Aanbevolen: