Solved

javascript problem

Posted on 2003-11-09
18
328 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
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
Or even the short but complete example that I offered? ;-)
0
 
LVL 75

Expert Comment

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

Author Comment

by:trance12
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 11

Expert Comment

by:Zontar
Comment Utility
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
Comment Utility
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
Comment Utility
If you got errors in Jakob's code you most likely pasted it wrong
0
 

Author Comment

by:trance12
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now