Sådan vises et nyt billede på Hover

November 20

Du kan bruge et billede skiftende effekt på din webside til accent dine knapper, bannere og menuen billeder. Når en bruger bevæger musen til at svæve over billedet, vil den ændres til et andet billede, indtil brugeren bevæger musen væk fra billedet. For at dette skal fungere, skal du have de to billeder hostes på en online server. Du kan derefter bruge en JavaScript-kode på dit website for at foretage ændringer af billedet på en mus-over.

Instruktioner

1 Upload de to billeder, du gerne vil bruge til din webhost eller et billede hosting service.

2 Optag URL-adresse til begge billeder. Du skal bruge dette, når du opretter koden.

3 Fremhæv følgende javascript kode, så højre-klik og vælg "Kopier" fra menuen:

<A href = "URL" onmouseover = "document.but.src = 'Image2'"

onMouseOut = "document.but.src = 'Image1« ">

<Img src = "Image1" NAME = "ImageName" border = "0" alt = "alttext">

</A>

4 Åbn din webside kode i en tekst eller online editor.

5 Højreklik i editoren og vælg "Indsæt" for at indsætte en kopi af JavaScript-kode.

6 Erstat "URL" med en URL-adresse til en webside, hvis billedet vil linke til en anden hjemmeside. Hvis billedet ikke linke til en hjemmeside kan du fjerne "href =" URL "" del af koden.

7 Sæt de to forekomster af "Image1" med URL-adressen for det første billede. Dette er det normale billede en besøgende vil se, når ikke svæver musen over billedet.

8 Erstat "Image2" med URL-adressen på det andet billede. Dette vil være det billede den besøgende vil se, når svæver musen over billedet.

9 Erstat "ImageName" med navnet på billedet. Dette kan være en hvilken som helst navn, du vælger.

10 Erstat "alttext" med tekst, som du gerne vil blive vist, når nogen mouses over billedet.

11 Gem ændringer til din webside og udgive den. Når du får vist din webside, vil du se det nye billede, der ændrer sig, når du holder musen over den.

TIPS

  • Fjern ikke nogen anførselstegn, når du redigerer denne kode eller koden vil ikke fungere.

relaterede artikler