Friday 16 September 2011

Question about mouse-over javascript effect...?

I'm building a website. I'm trying to create the effect where text changes when you roll your mouse over it. I know how to insert a mouse roll-over effect where it replaces one image with another image when the mouse rolls over it. What I am after is a mouse roll-over effect that replaces the existing text with some other text... I know I could do this by turning the text into images, but I want it to be a bit more simple. Is this possible to have the mouse-over effect with just text?
Question about mouse-over javascript effect...?
%26lt;htm%26gt;

%26lt;head %26gt;

%26lt;title%26gt; Untitled Page %26lt;/title%26gt;

%26lt;script type = %26quot;text/javascript%26quot; language = %26quot;javascript%26quot;%26gt;

function MouseOver() {

var div = document.getElementById( %26quot;Text%26quot; );

div.innerHTML = %26quot; The mouse is Over Me%26quot;;

}



function MouseOut() {

var div = document.getElementById( %26quot;Text%26quot; );

div.innerHTML = %26quot;My Text is back%26quot;;

}

%26lt;/script%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;form%26gt;

%26lt;div id=%26quot;Text%26quot; onmouseover = %26quot;MouseOver();%26quot; onmouseout = %26quot;MouseOut();%26quot;%26gt;

My Text Goes here

%26lt;/div%26gt;

%26lt;/form%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;
Question about mouse-over javascript effect...?
I don't think you can use mouse over to replace hard coded text on the page with something else.
Use 'onmouseover' and 'onmouseout' attributes on a HTML element.. like



%26lt;p onmouseover=%26quot;this.innerText = 'blahblah';%26quot; onmouseout=%26quot;this.innerText = 'rollover';%26quot;%26gt;rollover%26lt;/p%26gt;



you could use innerHTML as well, if you want to change the HTML content of an element such as a DIV.



This is a simple example, better practice would be to use a function and call the function from the element.