Hvordan: Roll Over Images for Blogger

Hvis du vil legge til en dynamisk funksjon til din Blogger-området, vurdere å lage rollover bilder for sidene dine. En roll er et bilde som endres til et annet bilde når du plasserer musepekeren over det, og det er ideelt hvis du ønsker å opprette en iøynefallende skjerm for de besøkende. Ved hjelp av Hypertext Markup Language (HTML), kan du legge inn koden som publiserer roll bilder til bloggen din.

Bruksanvisning

1 Logg deg på Blogger-kontoen, og klikk på "Nytt innlegg" -knappen. Klikk på "Legg til bilde" ikonet som vises øverst i tekstboksen og følg instruksjonene for å laste opp de to bildene du ønsker å bruke for velt. Klikk på "Rediger HTML" -kategorien, og deretter kopiere adresser som viser etter "<a href =" koder (for eksempel "http://4.bp.blogspot.com/-QLDvnt25gqQ/TjhPdrrbgbI/AAAAAAAAANo/U4k5dni1zMg/s1600/orginal_image.gif").

2 Klikk på "Nytt innlegg" linken under "Publisering" -kategorien, og angi en ønsket kurs og tekst, og klikk. Klikk på "Rediger HTML" -kategorien for å vise boksen der du skriver inn kode.

3 Skriv inn følgende HTML-kode i tekstboksen:

<Img onmouseover = "this.src = 'roll bilde'" onmouseout = "this.src = 'originalbildet'" />

4 Bytt ut de to "original image" oppføringer i koden med nettadressen til bildet du vil skal vises først. Substitute "rollover image" for nettadressen til bildet som vises når en besøkende svever henne musen over det. Å illustrere:

<img onmouseover="this.src='http://4.bp.blogspot.com/-QLDvnt25gqQ/TjhPdrrbgbI/AAAAAAAAANo/U4k5dni1zMg/s1600/rollover_image.gif' " onmouseout="this.src='http://4.bp.blogspot.com/-QLDvnt25gqQ/TjhPdrrbgbI/AAAAAAAAANo/U4k5dni1zMg/s1600/orginal_image.gif' "/>

5 Klikk på "Preview" for å se hvordan grafikken ser ut i posten, og klikk på "Publiser innlegg" -knappen for å prøve ut roll funksjonen.

Hint

  • For å gjøre velt ved hjelp av eksisterende bilder fra bloggen din, klikk på bildet, og deretter kopiere URL-adressen som vises i adressefeltet i nettleseren.