Javascript Essentials Part 6

by Hiroshi on November 3, 2008

in Essentials, Javascript

We shall discuss the following important issues relating to javascript.

  • Mouseover mouseout changes and Theme change
    - Change Link Color (Text change, Color change, both change)
    - Color Switch by css (background change)
    - Theme switch by css
  • Image Galleries
    - CJ motion gallery – left right mouse over scroll
    - Oncliking link image changes with fade in out – gallery (Captions & Image Transitions)
    - Compact Gallery
    - One popup for all images (Displaying changing images.)
    - One popup for all images (Displaying changing images and captions
  • More Form Effects
    - Form field highlight on focus
    - Form Field Select
    - Form field counter
    - Data appears or disappears on click and focus out

Mouseover mouseout changes

Change Link Color(Text change, Color change, both change)

This example explains how to change the link color and text on mouse over and out events.

Consider following script for mouse over and out events.

onMouseOver="this.innerHTML = 'The Software Tycoon'; this.style.color = '#ff0000';" onMouseOut="this.innerHTML = 'Microsoft'; this.style.color = '#0000ff';"

Full example:

<html>
<body>
<A HREF="http://www.microsoft.com/"
onMouseOver="this.style.color = '#ff0000';" onMouseOut="this.style.color = '#0000ff';">Microsoft</A>
<br><br>
<A HREF="http://www.microsoft.com/">
<FONT COLOR="#0000ff" onMouseOver="this.innerHTML = 'The Software Tycoon'; this.style.color = '#ff0000';" onMouseOut="this.innerHTML = 'Microsoft'; this.style.color = '#0000ff';">Microsoft</FONT></A>
<br>
<A HREF="http://www.microsoft.com/">
<FONT onMouseOver="this.innerHTML = 'The Software Tycoon'" onMouseOut="this.innerHTML = 'Microsoft'">Microsoft</FONT></A>
</body>
</html>

more reference at JavaScript Event Handlers – onmouseover and onmouseout

Related Posts

Pages: 1 2 3 4 5 6

Previous post:

Next post: