U kunt een foto-effect in uw Tumblr-thema maken dat een afbeelding duidelijk weergeeft wanneer de muis over de afbeelding beweegt, maar wanneer de muis niet boven de afbeelding zweeft, wordt de afbeelding wazig weergegeven. Bereid eerst de afbeeldingen voor die u gaat gebruiken voor het effect. Voeg vervolgens twee codefragmenten in uw Tumblr-thema in. Merk op dat de code niet wordt ondersteund in Tumblr-berichten, alleen in blogthema's.
Afbeeldingen voorbereiden
Om de wazige afbeeldingstaak te volbrengen, hebt u twee bijna identieke afbeeldingen nodig: een kopie van de originele heldere afbeelding en een tweede kopie van dezelfde afbeelding, alleen wazig. Gebruik het vervagingseffect in GIMP of Photoshop om het wazige uiterlijk van de tweede foto te creëren. Zorg ervoor dat de afbeeldingen exact dezelfde afmetingen hebben.
JavaScript-code
Een stukje JavaScript-code wordt ingevoegd tussen de
en tags van je Tumblr-blog. De JavaScript-code bevat de gebeurtenissen MouseRollover en MouseOut. De gebeurtenis MouseRollover geeft de opdracht om de duidelijke afbeelding weer te geven wanneer de muis over de afbeelding beweegt. De gebeurtenis MouseOut definieert welke afbeelding moet worden weergegeven als de muis niet over de afbeelding zweeft.Het JavaScript-codefragment dat voor dit effect moet worden gebruikt, is:
Wijzig de verwijzing "Picture1.jpg" in de URL voor de duidelijke originele afbeelding. Wijzig de verwijzing "Picture2.jpg" in de URL voor de wazige afbeelding.
HTML code
De HTML-code die bij het Javascript-fragment hoort, definieert de grootte, locatie en lay-out van de afbeelding. Voeg de HTML-code in het Tumblr-thema in waar u de fotoweergave wilt hebben. De HTML-code bij het bovenstaande Javascript-fragment is:
Vervang "Picture2.jpg" door de URL naar de wazige foto, die standaard wordt weergegeven. Wijzig de variabelen "breedte" en "hoogte" in de gewenste grootte van uw weergegeven afbeelding.
Installeer code
Om de code in je Tumblr-thema te installeren, open je je Tumblr-dashboard en klik je vervolgens op het tabblad 'Aanpassen' in het dashboard om de blog aan te passen. Klik op de optie "HTML bewerken" om de thema-editor te openen. Selecteer het Javascript-codefragment om de code te markeren en druk vervolgens op "Ctrl-C" om de code te kopiëren. Klik op de spatie voor de “” tag in uw themacode en druk vervolgens op “Ctrl-V” om de code te plakken.
Kopieer de HTML-code en keer terug naar de Tumblr-thema-editor. Zoek de locatie in de code waar u het foto-effect wilt weergeven. Klik op de locatie en druk vervolgens op "Ctrl-V" om het HTML-fragment te plakken. Klik op "Update Preview" om het effect te testen in het Preview-venster. Klik op "Opslaan" om de wijzigingen op te slaan.
