trance12
asked on
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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<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
}
function swapOut()
{
document.image.picture.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();">Bi
</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.
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
}
function swapOut()
{
document.image.picture.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();">Bi
</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.
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('h
thePic = document.getElementById('h
aWord = document.getElementsByTagN
for(i=0;i<aWord.length;i++
if(aWord[i].className=="ho
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>
<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('h
thePic = document.getElementById('h
aWord = document.getElementsByTagN
for(i=0;i<aWord.length;i++
if(aWord[i].className=="ho
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>
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.
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.
Or even the short but complete example that I offered? ;-)
All the suggestions are valid - I just suggest we do not dazzle the questioner with science until asked to.
ASKER
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??
any ideas??
Sorry about my typo, should have been
function swapIn()
{
document.images.picture.sr
}
function swapOut()
{
document.images.picture.sr
}
in my example.
function swapIn()
{
document.images.picture.sr
}
function swapOut()
{
document.images.picture.sr
}
in my example.
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,i
document.images[imgHolder]
}
function onmouseoutImg(imgHolder,im
document.images[imgHolder]
}
// -->
</script>
</head>
<body>
<a href="#" onmouseover="onmouseoverIm
<img name="img1" src="https://www.experts-exchange.com/images/vipAccess.gif" border="0"></a>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function onmouseoverImg(imgHolder,i
document.images[imgHolder]
}
function onmouseoutImg(imgHolder,im
document.images[imgHolder]
}
// -->
</script>
</head>
<body>
<a href="#" onmouseover="onmouseoverIm
<img name="img1" src="https://www.experts-exchange.com/images/vipAccess.gif" border="0"></a>
</body>
</html>
If you got errors in Jakob's code you most likely pasted it wrong
ASKER
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...?
create a transparent gif image in your favorite image editor and then just use it as a place holder
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
<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
ASKER
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
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.
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?
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?
<a href="filelinkedto.html"
onmouseover="document.imag
onmouseout ="document.images['imgname
<img name="imgname" src="transparentgif.gif" width='140' height='180'>
the size of the two images should be the same.
regards JakobA