27 mei 2013

Zie je liever wat anders?

Willem Karssenberg,
edubloggerIk doe natuurlijk een beetje aan "personal branding" en gebruik daarom bewust overal dezelfde foto van mezelf, dus ook in de zijkolom van deze website.
Maar ik begrijp het helemaal als je een keer op mij bent uitgekeken en graag wat anders wilt zien. In dat geval hoef je alleen maar even met de muis over m'n foto te gaan!

Wil je weten hoe ik dat gedaan heb? Lees dan verder!

Je moet zorgen dat je twee of drie verschillende plaatjes online hebt staan. Dat kun je doen door ze even te uploaden naar je weblog. Ik noem ze voor het gemak even plaatje1.jpg, plaatje2.png en plaatje3.jpg
Het tweede plaatje heb ik transparant gemaakt, vandaar png als extensie.
Nu plaats je de volgende code op je pagina:
<img alt="tekst bij mouse over" border="0" height="200" onmouseout="this.src='pad-naar-plaatje2.png'" onmouseover="this.src='pad-naar-plaatje3.jpg'" src="pad-naar-plaatje1.jpg" title="tekst bij mouse over" width="200" />

Probeer het maar eens uit om te zien wat het resultaat is!
Wil je maar met twee plaatjes werken, dan kan je plaatje drie weglaten en daarvoor in de plaats in de code plaatje1 zetten bij OnMouseOver en plaatje2 bij OnMouseOut.

Naschrift:
Dit effect is natuurlijk alleen maar te zien op een ouderwetse computer met muis. Op een tablet of smartphone heb je geen idee waar dit allemaal over gaat...

2 opmerkingen:

  1. Hallo Oom, op de smartphone (android) is dit wel te doen hoor, wanneer je Chrome gebruikt lang op het plaatje drukken en dan het geopende menu wegklikken ;-)

    BeantwoordenVerwijderen
  2. Je hebt gelijk! Even uitgeprobeerd op m'n Google Nexus en zo waar: dat werkt (af en toe)

    BeantwoordenVerwijderen