Hvordan få et bilde uskarpt når du musen over det

Hvordan få et bilde uskarpt når du musen over det


Endre utseendet på et bilde på en nettside når en besøkende pekeren ligger over det bildet er en vanlig styling metode som brukes til å animere bilder og knapper. Du kan legge denne effekten til noen av nettstedets sider. Heldigvis trenger du ikke avansert koding kunnskap for å skape denne effekten, men du trenger tilgang til HTML-koden på nettsiden.

Bruksanvisning

Lag bilde

1 Åpne bildet du ønsker å dimme i et bilderedigeringsprogram.

2 Påfør en uskarphet i bildet.

3 Lagre uskarpt bilde som en bildefil, slik som en PNG eller JPEG. Gi bildet et enkelt navn, for eksempel navnet på den opprinnelige bildefilen etterfulgt av nummeret "2."

4 Lagre originalbildet og uskarpt bilde på hjemmesiden eller en fil-fiendtlig sted. Kopier bildets URL-adresser, inkludert "http: //", og lime dem inn i et dokument.

Kode

5 Legg til følgende kode til nettsidens HTML for å angi bildet som vises når noen første besøkene på din side: <img name = "Image name". Erstatt "URL til originalbildet" med full URL, inkludert "http: //" i bildet som ikke er uklare. Erstatt "Image name" med ett ord navn på bildet, for eksempel filnavnet. Plasser koden mellom "<body>" og "</ body>" koder.

6 Legg til følgende kode etter den første linjen med kode for å angi bildet som vises når markøren svever over bildet: onmouseover = "document.images [ 'Bilde name'] src = 'URL til uskarpt bilde". ". Erstatt "Image name" med bildenavnet du har angitt i trinn 1. Erstatt "URL til uskarpt bilde" med den fullstendige nettadressen, inkludert "http: //" av uskarpt bilde.

7 Legg til følgende linje med kode for å angi bildet som vises når markøren er ikke lenger svever over bildet: onmouseout = ". Document.images [ 'Bildenavn'] src = 'URL til originalbildet'" />. Erstatt "Image name" med bildenavnet du har angitt i trinn 1. Erstatt "URL til originalbildet" med full URL, inkludert "http: //" i bildet som ikke er uklare.

Hint

  • Størrelse bildene dine før du legger dem til websiden din for å unngå pikselering og andre negative effekter.
  • Hvis du trenger å endre størrelsen på bildet som vises på websiden din, angi "width" og "høyde" egenskaper før "/>".