View Full Version : Change Div text onMouseOver????

03-26-2005, 08:27 PM
OK, I have 6 text buttons like so::

<div id="p1">1</div><div id="p2">2</div><div id="p3">3</div>
<div id="p4">4</div><div id="p5">5</div><div id="p6">6</div>

Now what I want to be able to do is when I mouseOver one of the above div a corresponding Div will appear beneath these above buttons.

Nothing fancy, just straight up text in these things.

So I would give all the content divs unique ID's like text1, text2, text3, etc. So onMouseOver of p1 above the contents of text1 would appear in the div. IS this possible?

Here is a page for reference of what I am trying to add this to.... in the 'Process' section I want to rollover the 1-6 buttons and change the text below them...... http://www.skaaren.com/sifr/layout4.asp

Cheers All! :thumbsup:

03-26-2005, 08:47 PM
you should be able to adapt this to fit your needs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Single Mouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
var firsttext='This is the 1st div'
var secondtext='This is the 2nd div'
var thirdtext='This is the 3rd div'
var fourthtext='This is the 4th div'
var fifthtext='This is the 5th div'
var sixthtext='This is the 6th div'
function writetext(what){
function notext(){

<div id="p1" onmouseover="writetext(firsttext)" onmouseout="notext()">1</div>
<div id="p2" onmouseover="writetext(secondtext)" onmouseout="notext()">2</div>
<div id="p3" onmouseover="writetext(thirdtext)" onmouseout="notext()">3</div>
<div id="p4" onmouseover="writetext(fourthtext)" onmouseout="notext()">4</div>
<div id="p5" onmouseover="writetext(fifthtext)" onmouseout="notext()">5</div>
<div id="p6" onmouseover="writetext(sixthtext)" onmouseout="notext()">6</div>
<div id="textarea"></div>

03-26-2005, 09:13 PM
Aero, you're awesome.... thank you sooo much!!!! :D

03-26-2005, 09:18 PM
yw, and interesting site u got there

03-26-2005, 09:25 PM
i am getting js errors for some reason... the code shoud be correct?!?!

Object Expeceted error line 220..... hmmmmm.......

03-26-2005, 09:51 PM
OK.... got it, i was accidentally including the script tag in the #include file.... therefore it was in there twice. :rolleyes:


10-15-2008, 03:04 AM
First post on this forum :).

This is a great little bit of code, but to further enhance it's usability and look, how could I set a default tab that show when the page is opened?

And how could I set the textarea to stay visible instead of disappearing on mouseout?

Thanks in advance.

10-21-2008, 02:41 AM
I'm going to give myself a bump on this thread by answering part of my own question :D

By removing the onmouseout the text will be left visible.

But I still need a solution for my other problem. How could I go about making some default text visible onload.

Any ideas?

10-21-2008, 04:03 AM
Why not just add highlighted:

<div id="textarea">This is the default text</div>

10-21-2008, 07:27 AM
Thankyou rangana, I just tried this and it works well.