PDA

View Full Version : rollover image problem

misheck
12-20-2008, 01:42 PM
I am trying to write a simple rollover image script but it displays the image when loaded but when I move the mouse over or out it cannot display the image. I have downloaded a few scripts to use for the same effect but I am learning javascript and I would love to be able to do a few basic scripts on my own so as to help me in modifying the ones available. Here is the code I have done
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">

<title>Untitled 1</title>
<script language="Javascript" type="text/javascript">
var myImages = new Array("orange.jpg","banana.jpg");
var imgClicked1 = myImages[0];
var imgClicked2 = myImages[1];

</script>

</head>

<body>

<a href="" onmouseover="document.images['example'].src=imgClicked1.src"
onmouseout="document.images['example'].src=imgClicked2.src">
<img src="orange.jpg" name="example"></a>



</body>
</html>
coothead
12-20-2008, 04:00 PM
Hi there misheck,

the modern method of page layout requires the separation of presentation from the mark-up.
Javascript comes under this heading.

Have a look at this example...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#fruit {
border:0;
}
</style>

<script type="text/javascript">
var myImages=['orange.jpg','banana.jpg'];
if(window.addEventListener){
window.addEventListener('load',mytest,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',mytest);
}
}

function mytest(){
document.getElementById('fruit').onmouseover=function(){
this.src=myImages[1];
this.onmouseout=function(){
this.src=myImages[0];
}
}
}
</script>

</head>
<body>

<div>
<a href="#">
<img id="fruit" src="orange.jpg" alt="">
</a>
</div>

</body>
</html>

Also note that...
language="Javascript"
...is deprecated and should no longer be used.
misheck
12-20-2008, 05:26 PM
Thanks for the help. I am using Php designer so it does most of the spacing and stuff. I am trying to stay away from YUI and other free scripts for the time being so I can get a better understanding of javascript