Solved

javascript problem

Posted on 2003-11-09
18
331 Views
Last Modified: 2008-03-06
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
0
Comment
Question by:trance12
  • 3
  • 3
  • 3
  • +4
18 Comments
 
LVL 5

Assisted Solution

by:ho_alan
ho_alan earned 150 total points
ID: 9712667
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
 
LVL 15

Expert Comment

by:JakobA
ID: 9712674
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
 
LVL 5

Accepted Solution

by:
ho_alan earned 150 total points
ID: 9712679
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 11

Expert Comment

by:Zontar
ID: 9712685
<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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9712717
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9712956
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9713038
Or even the short but complete example that I offered? ;-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9713124
All the suggestions are valid - I just suggest we do not dazzle the questioner with science until asked to.
0
 

Author Comment

by:trance12
ID: 9714184
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9714554
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9715108
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9716696
If you got errors in Jakob's code you most likely pasted it wrong
0
 

Author Comment

by:trance12
ID: 9717675
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9717778
create a transparent gif image in your favorite image editor and then just use it as a place holder
0
 
LVL 15

Expert Comment

by:JakobA
ID: 9717782
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
 

Author Comment

by:trance12
ID: 9718389
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
 
LVL 15

Expert Comment

by:JakobA
ID: 9718491
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
 
LVL 5

Expert Comment

by:ho_alan
ID: 9719426
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question