Solved

javascript problem

Posted on 2003-11-09
18
336 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

724 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