Nedtonet grafik

Med dette css script kan du nedtone noget grafik el.l. (gøre det gennemsigtigt). Når musen køres hen over, vil det komme helt til syne.

Du kan selv definere hvor nedtonet grafikken skal være, samt om det skal blive 100% synligt ved mouse over. Denne kode kan ikke anvendes i et stylesheet.

Sådan gør du:

Koden kan indsættes i forskellige elementer. Vi har prøvet med på <img>, <fieldset>, <input> og <textarea>, men koden kan sikkert anvendes på andre tags.

Indsæt bare denne lille kode i dit tag:

style="filter: alpha(opacity=25)" onMouseOver="this.filters.alpha.opacity=100" onMouseOut="this.filters.alpha.opacity=25"

Definer selv værdierne markeret med rødt. Værdierne angives i procent - 100 svarer således til et almindelig billede uden nedtoning.

Indsat i et <img> tag kunne det fx se således ud:

<img style="filter: alpha(opacity=25)" onMouseOver="this.filters.alpha.opacity=100" onMouseOut="this.filters.alpha.opacity=25" border="0" src="../../../images/a-scripting.gif" width="210" height="90">

Eksempel >>

Hint:

Hvis du vil have billedet til at tone frem og blive fremme, også efter musen fjernes, skal du bare slette hele onMouseOut-delen. Fjern denne del:

onMouseOut="this.filters.alpha.opacity=25"

Hint:

Hvis du bruger scriptet i formular felter, kan du med fordel ændre koden, så du erstatter onMouseOver med onFocus og erstatter onMouseOut med onBlur.

På denne måde fremhæves feltet ikke bare, når musen er over, men når der er fokus på feltet ... fx når du klikker i det eller tab'er dig over i feltet. Se forskellen i eksemplet herover.

Hvis du bruger vores services,
beder vi dig huske på princippet bag ClickWare ...
hvad med at besøge et par af vore sponsorer?

Til toppen >>