PDA

Click to See Complete Forum and Search --> : Rollovers not working..

sorciere
08-22-2003, 10:05 PM
Somebody view the source code at this link:
http://simplisticallycomplicated.biz/finalsite/index.html
And tell me why my javascript rollover effects aren't working.. What am I doing wrong?

Help!
AdamBrill
08-22-2003, 10:15 PM
Try this:<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
if (document.images)
{
var resumeup = new Image (95, 33);
resumeup.src = "buttons/resumeup.gif";

var resumeover = new Image (95, 33);
resumeover.src = "buttons/resumeover.gif";

var resumedown = new Image(95, 33);
resumedown.src = "buttons/resumedown.gif";

var portfolioup = new Image (95, 35);
portfolioup.src = "buttons/portfolioup.gif";

var portfolioover = new Image (95, 35);
portfolioover.src = "buttons/portfolioover.gif";

var portfoliodown = new Image (95, 35);
portfoliodown.src = "buttons/portfoliodown.gif";

var contactup = new Image (95, 35);
contactup.src="buttons/contactup.gif";

var contactover = new Image (95, 35);
contactover.src = "buttons/contactover.gif";

var contactdown= new Image (95, 35);
contactdown.src = "buttons/contactdown.gif";
}
function on (imagename)
{
if (imagename == "resumeup")
{ document.images['resumeup'].src = eval("resumeover.src"); }
if(imagename == "portfolioup")
{document.images['portfolioup'].src = eval("portfolioover.src");}
if(imagename == "contactup")
{document.images['contactup'].src = eval("contactover.src");}
}
function off (imagename)
{
if (imagename=="resumeup")
{ document.images['resumeup'].src = eval("resumeup.src"); }
if (imagename=="portfolioup")
{document.images['portfolioup'].src = eval("portfolioup.src");}
if (imagename=="contactup")
{ document.images['contactup'].src = eval("contactup.src"); }
}

//-->
</script>
</head>
<body bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/background/2stripes.gif" align="center" height="59">
<tr>
<td></td>
</tr>
</table>
<div align="right">
<table width="285" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><a href="resume/resume.html" onMouseOver="on('resumeup')" onMouseOut="off('resumeup')"><img name="resumeup" src="buttons/resumeup.gif" width="95" height="33" border="0"></a></td>
<td><a href="portfolio/portfolio.html" onMouseOver="on('portfolioup')" onMouseOut="off('portfolioup')"><img name="portfolioup" src="buttons/portfolioup.gif" width="95" height="35" border="0"></a></td>
<td><a href="contact/contact.html" onMouseOver="on('contactup')" onMouseOut="off('contactup')"><img name="contactup" src="buttons/contactup.gif" width="95" height="35" border="0"></a></td>
</tr>
</table>
</div>
</body>
</html>I put what I changed in red so that you can tell...
sorciere
08-22-2003, 10:37 PM
Rollover effect still not working on the 3 buttons.. whats wrong with my JS?

http://simplisticallycomplicated.biz/finalsite/index.html
AdamBrill
08-22-2003, 10:44 PM
this:

var contactdown= "new Image (95, 35);

should be this:

var contactdown= new Image (95, 35);
sorciere
08-22-2003, 10:58 PM
Thanks - that seems to be it.
So what would the function look like to add the "onClick" state. Can you add that in red for me as well..?

Danke.
AdamBrill
08-23-2003, 01:07 PM
Ok... I made a lot of changes on your code, so let me know what you think about this:<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function image_array(on_src,off_src,clicked_src){
this.off_src=off_src;
this.on = new Image();
this.on.src=on_src;
this.clicked = new Image();
this.clicked.src=clicked_src;
return this;
}
the_images = new Array();
// format: the_images['image_name'] = new image_array('mouse_on.gif','mouse_off.gif','mouse_clicked.gif');
the_images['resume'] = new image_array('buttons/resumeover.gif','buttons/resumeup.gif','buttons/resumedown.gif');
the_images['portfolio'] = new image_array('buttons/portfolioover.gif','buttons/portfolioup.gif','buttons/portfoliodown.gif');
the_images['contact'] = image_array('buttons/contactover.gif','buttons/contactup.gif','buttons/contactdown.gif');

function roll_on(name){
if(document.all){
document.all[name].src=the_images[name].on.src;
}else{
document[name].src = the_images[name].on.src;
}

}
function roll_off(name){
if(document.all){
document.all[name].src=the_images[name].off_src;
}else{
document[name].src=the_images[name].off_src;
}
}
function img_clicked(name){
if(document.all){
document.all[name].src=the_images[name].clicked.src;
}else{
document[name].src=the_images[name].clicked.src;
}
}
</script>
</head>
<body bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/background/2stripes.gif" align="center" height="59">
<tr>
<td></td>
</tr>
</table>
<div align="right">
<table width="285" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><a href="resume/resume.html" onclick="img_clicked('resume');" onMouseOver="roll_on('resume')" onMouseOut="roll_off('resume')"><img name="resume" src="buttons/resumeup.gif" width="95" height="33" border="0"></a></td>
<td><a href="portfolio/portfolio.html" onclick="img_clicked('portfolio')" onMouseOver="roll_on('portfolio')" onMouseOut="roll_off('portfolio')"><img name="portfolio" src="buttons/portfolioup.gif" width="95" height="35" border="0"></a></td>
<td><a href="contact/contact.html" onclick="img_clicked('contact')" onMouseOver="roll_on('contact')" onMouseOut="roll_off('contact')"><img name="contact" src="buttons/contactup.gif" width="95" height="35" border="0"></a></td>
</tr>
</table>
</div>
</body>
</html>It is more compatable and easier to work with, so I figured I would make the changes. ;)