javascript problem

can someone give me the code so that when the mouse is moved over a text link, it shows an image...so for example if the text link is the name of a person, it shows the picture of that person, and hwne the mouse is moved out, the image dissapears
trance12Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ho_alanCommented:
here is the simple one, hope this can inspire u

<script>
function showPic()
{
        document.img1.src="1.jpg";
        return true;
}
function ClearPic()
{
       document.img1.src="";
       return true;
}
</script>

<img name=img1>
<a href=name1.html onmouseover="showPic();" onmouseout="ClearPic()">>
0
JakobACommented:
You need two images. the one you want to show, and a transparent .gif image to be 'shown' when the mouse is elsewhere.

<a href="filelinkedto.html"
     onmouseover="document.images['imgname'].src='pictureofguy.jpg';"
     onmouseout ="document.images['imgname'].src='transparengif.gif';">click here</a>
<img name="imgname" src="transparentgif.gif" width='140' height='180'>

the size of the two images should be the same.

regards JakobA
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

ZontarCommented:
<script type="text/javascript">
  var width = 125;
  var height = 250;
  var imgOn = new Image(width, height);
  imgOn.src = "images/billw-photo.jpg";
  var imgOff = new Image(width, height);
  imgOff.src = "images/blank.jpg"

  function swapIn()
  {
    document.image.picture.src = imgOn.src;
  }

  function swapOut()
  {
    document.image.picture.src = imgOff.src;
  }
</script>
<body>
<table>
  <tr><td><img src="images/blank.jpg" name="picture" width="125" height="250"></td></tr>
  <tr><td><a href="#" onmouseover="swapIn();" onmouseout="sawpOut();">Bill</a></td></tr>
</table>
</body>

This will change the image named "picture" from blank.jpg to billw-photo.jpg when the user mouses over the link, and back to blank.jpgwhen the user moves the mouse away from it.
0
NetGrooveCommented:
Here my version:

<html>
<head>
<script>
var pic = new Array();
pic["Dog"] = new Image();
pic["Dog"].src = "Dog.jpg";
pic["Cat"] = new Image();
pic["Cat"].src = "Cats.jpg";
pic["Mouse"] = new Image();
pic["Mouse"].src = "Mice.jpg";
var thePic;
var theDiv;
function hooverPic(theWord){
 if(theWord){
   thePic.src = pic[theWord.innerHTML].src;
   theDiv.style.display = 'block'
   theDiv.style.pixelLeft = event.clientX;
   theDiv.style.pixelTop = event.clientY;
 } else {
   theDiv.style.display = 'none'
 }
}
function init(){
 theDiv = document.getElementById('hDiv');
 thePic = document.getElementById('hPic');
 aWord = document.getElementsByTagName('span');
 for(i=0;i<aWord.length;i++){
   if(aWord[i].className=="hoover"){
      aWord[i].onmouseover = function(){hooverPic(this)}
      aWord[i].onmouseout = function(){hooverPic(null)}
   }
 }
}
</script>
</head>
<body onLoad="init()">
<div id=hDiv style="position:absolute; display:none;">
<img id=hPic>
</div>
Best friend of man is the <span class=hoover>Dog</span>. But <span class=hoover>Cat</span> is also a good friend, for catching a <span class=hoover>Mouse</span>.

</body>
</html>

0
Michel PlungjanIT ExpertCommented:
Ok, lets just make this supersimple question bloom into a mini lesson in CSS
Obviously trance12 just needs a simple mouseover.
Jakob's suggestion or ho_alan's with the added mouseOut image and more attention to the html woiuld be enough.
0
ZontarCommented:
Or even the short but complete example that I offered? ;-)
0
Michel PlungjanIT ExpertCommented:
All the suggestions are valid - I just suggest we do not dazzle the questioner with science until asked to.
0
trance12Author Commented:
Thnaks for the feedback.. I've tried the first 3 methods  and all of them give this javascript error...document.image is null or not an object...

any ideas??
0
ZontarCommented:
Sorry about my typo, should have been

  function swapIn()
  {
    document.images.picture.src = imgOn.src;
  }

  function swapOut()
  {
    document.images.picture.src = imgOff.src;
  }

in my example.
0
jaysolomonCommented:
try this


<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function onmouseoverImg(imgHolder,imgON){
      document.images[imgHolder].src = imgON;
}
function onmouseoutImg(imgHolder,imgOFF){
      document.images[imgHolder].src = imgOFF;
}
// -->
</script>
</head>
<body>
<a href="#" onmouseover="onmouseoverImg('img1','http://experts-exchange.com/images/logoBottom.gif');" onmouseout="onmouseoutImg('img1','http://experts-exchange.com/images/vipAccess.gif');">
<img name="img1" src="http://experts-exchange.com/images/vipAccess.gif" border="0"></a>
</body>
</html>
0
Michel PlungjanIT ExpertCommented:
If you got errors in Jakob's code you most likely pasted it wrong
0
trance12Author Commented:
works fine now...though at the beginning when the page is loaded, it shows the a blank gif next to the text link..how can this be avoided...?
0
jaysolomonCommented:
create a transparent gif image in your favorite image editor and then just use it as a place holder
0
JakobACommented:
if the time of showing is very short it will help to start the load of that picture earlier in the html file. fx just after the <head> command in your page. Insert a small script section there:

<script type='text/javascript'>
var temp1 = new Image();
temp1.src = "blankgifaddr.gif";
      // while we are at it we might as well start the load of the other image also, so it
      // is ready when the mouseover is activated:
var temp2 = new Image();
temp2.src = "theotherimageaddr.jpg";
</script>

PS: the file with the blank gif should be quite small, less than 500 bytes. if it is bigger than that you could try try reducing the palette to 2 colors.

regards JakobA
0
trance12Author Commented:
i've tried that but it still shows the blank gif X mark next to the text link...what i want is just to see the text link when the page is loaded and when the mouse moves over the image is displayed..any ideas
0
JakobACommented:
if the blank gif X is there continually it means that you have either misspelled the name of the file for that image or else not placed the file it in the proper folder for the page to find it. please check.
0
ho_alanCommented:
hi trance12 !

u have taken my answer as assisted and accepted.
maybe u have to split the points to other experts as well :-)

by the way, has your problem been solved?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.