PDA

Click to See Complete Forum and Search --> : Change the text of a layer on rollover?

leonard_770
02-12-2003, 05:37 AM
On my page I have a side menu and a layer with text in the center.

When you roll over one of the headings in the sidemenu I would like to change the text of the layer in the center.

Anyone have any ideas how to do this?

Thanks.
leonard_770
02-12-2003, 09:41 AM
Originally posted by Dave Clark
document.getElementById("divID").innerHTML = "...";

Dave

Thanks for your reply Dave, but could you expand on this
a little as I'm not sure what to do with this script or where
to put it.

Thanks,

Lenny.
Nevermore
02-12-2003, 03:15 PM
Put the following text in the head:

<script language="Javascript" type="text/javascript">
<!--
function divChange(newText) {
document.getElementById(divID).innerHTML=newText;
}
//-->
</script>
<noscript>Your browser does not support Javascript.</noscript>


and around the links you would like to use, that will change the text, put:
<a onMouseover="divChange('text')">...</a>

To make it work: change divID in the function to the ID of the div layer you want to change, and change text in the mouse over to whatever you want the text to be. Just two points:

1) You can have multiple links, each with a different text in the onmousover.

2) Make sure to maintain the ' ' around text in the onMouseOver.
leonard_770
02-13-2003, 03:48 AM
Hi cijori, I tried what you said but it doesn't seem to work at all.

Heres's my script, can you tell me if I'm doing something wrong;

<html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description">
<style type="text/css">
#divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right}
#divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right}
#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden}
#divContent{position:absolute; top:0; left:0}
</style>

<script language="Javascript" type="text/javascript">
<!--
function divChange(newText) {
document.getElementById(divContent).innerHTML=newText;
}
//-->
</script>

<script language="Javascript" type="text/javascript">

<!--
// begin absolutely positioned scrollable area object scripts
// Extension developed by David G. Miles
// Original Scrollable Area code developed by Thomas Brattli
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()


var speed=50

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}

function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}

function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts

<!--

<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>

</head>
<body bgcolor="#330000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea();MM_preloadImages('file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_up_ro.gif%27','file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_down_ro.gif')" link="#FFFFFF">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl" style="top: 311px; left: 220px; width: 345; z-index: 2; visibility: visible">
<a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_up.gif" width="10" height="9" name="Image2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_up_ro.gif',1)"></a></div>
<div id="divDownControl" style="top: 325px; left: 220px; width: 345; z-index: 3; visibility: visible">
<a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_down.gif" width="10" height="9" name="Image1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///LENNY/1_CLIENTES/bau%20web%20-%2003/00_bau_web/html/1cat/images/a_down_ro.gif',1)"></a></div>
<div id="divContainer" style="height: 285; left: 230; top: 45; width: 310; clip: rect(0 320 290 0); visibility: visible; z-index: 5">
<div id="divContent" style=""> <span class="titulo">PRESENTACI&Oacute; </span><br>
<span class="body">BAU, escola de disseny és un centre docent privat que
neix a Barcelona l'any 1989, fruit de les inquietuds d'un grup de professionals
del disseny amb vocació docent i pedagògica.<br>
<br>
Actualment BAU, és un centre vinculat a la Universitat de Vic que ofereix
una titulació universitària. <br>
<br>
L‘objectiu de BAU assegura un ensenyament de qualitat, aplicant una pedagogia
activa, una metodologia dinàmica i organitzant uns plans d‘estudis moderns
i flexibles que s‘adapten als interessos dels estudiants i els preparen
per l‘entrada al món laboral. <br>
<br>
Un ampli equip de professors qualificats i un mobre reduït d‘alumnes per
classe ens permet donar una atenció personalitzada per tal que cada alumne
pugui desenvolupar el seu potencial creatiu i projectual. <br>
<br>
Les infraestructures i instalacions del centre conformen uns espais lliures
i polivalents adaptats al nombre d‘alumnes que formen BAU. <br>
<br>
Les aules de BAU més que un lloc on s‘imparteixen classes, són un lloc de
treball, d‘anàlisi, de comunicació i per damunt de tot de participació.
<br>
<br>
Un ampli equip de professors qualificats i un mobre reduït d‘alumnes per
classe ens permet donar una atenció personalitzada per tal que cada alumne
pugui desenvolupar el seu potencial creatiu i projectual. <br>
<br>
Les infraestructures i instalacions del centre conformen uns espais lliures
i polivalents adaptats al nombre d‘alumnes que formen BAU. <br>
<br>
Les aules de BAU més que un lloc on s‘imparteixen classes, són un lloc de
treball, d‘anàlisi, de comunicació i per damunt de tot de participació.</span>
</div>
</div>

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.layers) document.write('<LAYER NAME="layerID"><\/LAYER><BR><BR><BR>');
else if (document.all) document.write('<DIV ID="layerID"><\/DIV>');
//-->
</SCRIPT>

<div id="sideMenu1" style="position:absolute; width:150px; z-index:4; left: 10px; top: 118px; visibility: visible">
<span class="sideMenu"><a href="javascript:;" onMouseover="divChange('El pla pedag&ograve;gic
de l'escola es basa principalment, en la creen&ccedil;a
que cada alumne pot trobar una determinada forma
d'expressi&oacute; i d'especialitzaci&oacute; a
trav&eacute;s dels coneixements i els mitjans necessaris
que li permetin descobrir la seva pr&ograve;pia
via creativa i comunicativa.<br>
<br>
L'alumne ha d'aprendre que no existeixen receptes
o f&oacute;rmules m&agrave;giques per arribar
a crear b&eacute, i que la soluci&oacute;
a qualsevol problema creatiu &eacute;s el treball.<br>
<br>
El curs ha de ser un lloc de treball: el treball
de crear. Crear constantment dins i fora de l'escola;
l'alumne ha d'habituar-se a viure creativament
fins arribar a ser un operador de m&uacute;ltiples
idees.<br>
<br>
A BAU, l'alumne adquireix l'an&agrave;lisi autocr&iacute;tica
que li permet valorar els seus treballs gr&agrave;cies
a un sistema d'autoavaluaci&oacute; progressiu que
s'implanta al llarg dels estudis.')">Filosofia
i Objectiu <br>
Pedag&ograve;gic </a>
<br>
</span></div>
<!-- end absolutely positioned scrollable area object -->
</body>

</html>


Thanks,

Lenny.
IxxI
02-13-2003, 04:17 AM
Where you have getElementById(divContent) you should have getelementbyId("divContent").
IxxI
Nevermore
02-13-2003, 11:13 AM
Where you have getElementById(divContent) you should have getelementbyId("divContent").

Yes, it should have quotes, but his capitalization was right. When i didnt use quotes, i only did it because i didnt know the name of the div layer. Sorry for any confusion.
IxxI
02-13-2003, 11:24 AM
Sorry - I forgot about the captilisation (even though I'd just written it!) It still doesn't seem to work though - I think you might need to hide your original text first before trying to put your new text on top of it. Thats the way I've done it anyway. If you call your original text in the same way - using innerHTML and grabbing the text, but make it default to that text, then it should change only when you move your mouse over your link.
IxxI
IxxI
02-13-2003, 11:41 AM
I didn't explain very well so here's what I'd do. To make it easier to see what I'm doing I've put the text in variables in the javascript, but you can do it the other way too.


<HTML>
<HEAD>
<TITLE> Test Div </TITLE>

<script language="Javascript" type="text/javascript">

var text1="<B>Hello</B> this appears when you load the page"

var text2="And <I><U><B>this</B></U></I> should appear when you move your mouse over the link"

<!--
function divChange(newText) {
document.getElementById("div1").innerHTML=newText;
}
//-->
</script>

</HEAD>
<BODY onload="divChange(text1)">

<BR><BR><BR><BR><BR>

<CENTER>
<div id="div1"></div>
</CENTER>

<BR><BR>

<A HREF="page1.html" onMouseover="divChange(text2)" onMouseout="divChange(text1)">Div Changing Link</A>

</BODY>
</HTML>


It just means that you can display over the original text, whereas in your code you don't seem to be able to, though it may not be for that reason. Also as it is innerHTML it understands any HTML commands - so you can still call the styles and add breaks. Hope this helps.
IxxI