74 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

rollover i textfält

En kombination av javascript och CSS för att ge en rollovereffekt på olika delar av ett textfält (textarea). Javascriptet läggs inom <TEXTAREA> och CSS-effekterna inom <HEAD>. Läs mer om formulärkontroller i övningen "Formulär" » och mer om CSS i övningen "CSS-stilmallar" »

Exempel 1:
Byte av bakgrundsfärg:

Exempel 2:
Byte av textfärg:

Exempel 3:
Byte av både textfärg och bakgrund:

 

 

Steg 1:
Lägg koden inom <TEXTAREA>

 

<TEXTAREA name="textruta" class="onLoad" onMouseOver="this.className='onMouseOver'" onMouseOut="this.className='onMouseOut'">
</TEXTAREA>

 

(OnLoad är utseendet vid start, OnMouseover ger rollovereffekten och OnMouseOut är återgång till det ursprunliga läget. Du kan alltså låta OnLoad och OnMouseOut ha samma värden.)

 

Steg 2:
Lägg CSS-koden inom <HEAD>

Här är koden till exempel 1. Vill du använda de andra exemplen kan du kopiera koden från textfälten ovan.

<HEAD>

<style type="text/css">
<!--
.onLoad { color:#000000; background:#FFFFFF }
.onMouseOver { background:#FFCC99 }
.onMouseOut { color: #000000; background:#FFFFFF }
-->
</style>

</HEAD>