Using JavaScript to replace text on hover

[phillips321]

Hi guys,

 

I know this is a php forum, my site is built using php but i need to do a part of it using JavaScript.

 

I currently have a picture system where there is a main image and lots of thumbs, when one of the thumbs has the mouse cursor hover over it the main image change to the large version of the thumb, all works fine.

 

What i need to do now is create text for each image, when the image is hovered on the main image changes to replicate the thumb as well as text that relates to the photo.

 

Here is the Javascript part:

	<script type="text/javascript" language="JavaScript">
		<!--
		function swapImage() { //v3.0
		  var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
		   if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
		}
		function preloadImages() { //v3.0
		  var d=document; if(d.images){ if(!d.p) d.p=new Array();
		    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
		    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
		}

		function findObj(n, d) { //v4.0
		  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=findObj(n,d.layers[i].document);
		  if(!x && document.getElementById) x=document.getElementById(n); return x;
		}

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

		function swapImgRestore() { //v3.0
		  var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
		} 
		preloadImages('pics/normal/I_made_smart_paving_2.jpg','pics/normal/I_instal_automatic_gate_2.jpg','pics/normal/pics/normal/pics/normal/I_made_painting_and_decorating2.jpg','pics/normal/I_made_smart_paving_3.jpg','pics/normal/I_install_automatic_gate.jpg','pics/normal/I_made_painting_and_decorating3.jpg','pics/normal/I_made_smart_paving_4.jpg','pics/normal/I_install_gate.jpg','pics/normal/I_made_painting_and_decorating.jpg','pics/normal/I_made_smart_paving.jpg','pics/normal/I_install_railings.jpg','pics/normal/I_made_paving_and_lighting_1.jpg','pics/normal/I_made_timber_faced_vegetable_beds_and_gravel_paths.jpg','pics/normal/I_instal_railings.jpg','pics/normal/I_made_paving_and_lighting_2.jpg','pics/normal/I_repair_brick_walls_2.jpg','pics/normal/I_made_natural_stone_walling_1.jpg','pics/normal/I_made_paving_and_lighting_3.jpg','pics/normal/I_repair_brick_walls.jpg','pics/normal/I_made_natural_stone_walling_2.jpg','pics/normal/I_made_paving_and_lighting_4.jpg','pics/normal/I_repair_steps_2.jpg','pics/normal/I_made_natural_stone_walling_3.jpg','pics/normal/I_made_paving_and_lighting.jpg','pics/normal/I_repair_steps.jpg','pics/normal/I_made_natural_stone_walling_4.jpg','pics/normal/I_made_Paving_natural_stone_gravel.jpg','pics/normal/I_made_natural_stone_walling_5.jpg','pics/normal/I_made_Paving_natural_stones_2.jpg','pics/normal/house_before.jpg');
		//-->
</script>

 

And here is the HTML that uses it:

<img src="default.jpg" name="large_pic">
<img src="A_small.jpg" onmouseover="swapImage('large_pic','','A.jpg',1)">
<img src="B_small.jpg" onmouseover="swapImage('large_pic','','B.jpg',1)">
<img src="C_small.jpg" onmouseover="swapImage('large_pic','','C.jpg',1)">
<img src="D_small.jpg" onmouseover="swapImage('large_pic','','D.jpg',1)">

 

Any one with any ideas? I was thinking of createing a form with a lable and that text in that just changes. Would that work?

 

Sorry for not being a php question but this code is based inside a php script

 

Cheers in advance

 

 

[teng84]

still this is not php

any way try this <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_animation">example</a>

[kenrbnsn]

Moving to the Javascript forum.

[phillips321]

sorted, cheers teng84, that was enough to allow me to hack something that works.

 

The JS -->

function textchange(newtext){

document.getElementById('textarea').innerHTML=newtext

}

 

and the HTML -->

<span class="pictext" id="textarea">BEFORE</span>

<img src="image.jpg" onmouseover="textchange('AFTER)">

 

 

many thanks

 

(p.s. sorry to admin, didn't realise there was a JS forum, my bad)