javascript mouseover

moose · July 18, 2004, 01:53:21 PM

anybody know of anyway in javascript that if you mouse over an image, you can have text describing it pop up in another spot on that page?

like, if i mouse over link a, text describing link a appears in table cell a.

Vinoth · July 18, 2004, 02:43:09 PM

1. Copy the coding into the HEAD of your HTML document

2. Add the last code into the BODY of your HTML document

Code Select

<HEAD>



<SCRIPT LANGUAGE="JavaScript">

window.onerror = null;

 var bName = navigator.appName;

 var bVer = parseInt(navigator.appVersion);

 var NS4 = (bName == "Netscape" && bVer >= 4);

 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);

 var NS3 = (bName == "Netscape" && bVer < 4);

 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);



//-----------------------------------------------------------

 var scroll_length = 150; //The scroll length

 var time_length =50; //Scroll delay in milliseconds

 var begin_pos = 260; //Start position of scroll hint

 var i=begin_pos;

 var j=i;

 var scroll_dir = "right"; // To scroll left use "left"

                           // To scroll right use "right"

//-----------------------------------------------------------

 

if (NS4 || IE4) {

 if (navigator.appName == "Netscape") {

 layerStyleRef="layer.";

 layerRef="document.layers";

 styleSwitch="";

 }else{

 layerStyleRef="layer.style.";

 layerRef="document.all";

 styleSwitch=".style";

 }

}



//SCROLL

function Scroll(layerName)

{

 if (NS4 || IE4)

 { 

  if(scroll_dir=="right")

  {

   if(i<(begin_pos+scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');

    i++;

    j++;

   }

  }

  if(scroll_dir=="left")

  {

   if(i>(begin_pos-scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.right="'+(-i)+'"');

    i--;

    j--;

   }

  }

  if(i==j)

  {

   setTimeout("Scroll('"+layerName+"')",time_length);

  }

 }

}



//STOP SCROLLING

function StopScroll(layerName)

{

 if(scroll_dir=="right")

 {

  i=begin_pos+scroll_length;

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.left="'+(i)+'"');

  hideLayer(layerName);

 }

 if(scroll_dir=="left")

 {

  i=begin_pos-scroll_length;

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.right="'+(-i)+'"');

  hideLayer(layerName);

 }

}



function reset()

{ 

 i=begin_pos;

 j=i;

}



// HIDE HINT

function hideLayer(layerName)

{

 if (NS4 || IE4)

 {

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.visibility="hidden"');

 }

}

//  End -->

</script>



</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->



<BODY>



<!--BEGIN REQUIRED-->

<center>

<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">JavaScriptSource</a>

</center>

<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">

<b>Come to JSS for all your JavaScript needs!</b>

</div>

Replace your Link over the image, and it would work fine/

Thanx

Vinoth

News:

javascript mouseover

moose

Vinoth