...

View Full Version : a little trouble getting a rollover script to work



canadianjameson
07-13-2007, 09:28 PM
Hi all,

I'm trying to get this script to work. It works on another page I have but for some reason I haven't been able to get it working here. To simplify matters I've commented out a large chunk because it is repetition of the same line just applied to different images -- so once i get one working the others will as well.

here's the .js



function on1()
{if (!document.images) return; document.info.src = "images/info_BW.jpg"; document.title_display.src = "images/linkTest2.jpg";}
/*function on2()
{if (!document.images) return; document.b.src = "images/butt_2.gif"; document.label.src = "images/hotProd.jpg"; document.labelb.src = "images/labelbar_2.gif";}
function on3()
{if (!document.images) return; document.c.src = "images/butt_3.gif"; document.label.src = "images/linecard.jpg"; document.labelb.src = "images/labelbar_3.gif";}
function on4()
{if (!document.images) return; document.d.src = "images/butt_4.gif"; document.label.src = "images/prodSearch.jpg"; document.labelb.src = "images/labelbar_4.gif";}
function on5()
{if (!document.images) return; document.e.src = "images/butt_5.gif"; document.label.src = "images/quote.jpg"; document.labelb.src = "images/labelbar_5.gif";}
function on6()
{if (!document.images) return; document.f.src = "images/butt_6.gif"; document.label.src = "images/contact.jpg"; document.labelb.src = "images/labelbar_6.gif";}
*/
function off1()
{if (!document.images) return; document.info.src = "images/info_BW.jpg"; document.title_display.src = "images/linkTest.jpg";}
/*function off2()
{if (!document.images) return; document.b.src = "images/butt_2.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
function off3()
{if (!document.images) return; document.c.src = "images/butt_3.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
function off4()
{if (!document.images) return; document.d.src = "images/butt_4.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
function off5()
{if (!document.images) return; document.e.src = "images/butt_5.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
function off6()
{if (!document.images) return; document.f.src = "images/butt_6.gif"; document.label.src = "images/spacer.gif"; document.labelb.src = "images/spacer.gif";}
*/
var imgslist = new Array(
"images/linkTest2.jpg",
/*"images/hotProd.jpg",
"images/linecard.jpg",
"images/prodSearch.jpg",
"images/quote.jpg",
"images/contact.jpg",
"images/linkTest2.gif",
"images/labelbar_2.gif",
"images/labelbar_3.gif",
"images/labelbar_4.gif",
"images/labelbar_5.gif",
"images/labelbar_6.gif"*/);

var imgs=new Array();
for (x=0; x<imgslist.length; x++)
if (document.images)
{imgs[x]=new Image(); imgs[x].src = imgslist[x];}

and here's how i'm applying it (see bold)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>


<link rel="stylesheet" href="css/main.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>
<script language="JavaScript" type="text/javascript" src="js/divToggler.js"></script>
<script language="JavaScript" type="text/javascript" src="js/link_titles.js"></script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="linkHolder"><img src="images/linkTest.jpg" name="title_display"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg" name="info" onmouseover="on1(); onmouseout="off1()">
<img src="images/logoButtons/YPP_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >
</div>
<div class="clear"></div>
<div id="contentarea"></div>
</div>
</body>
</html>

if you need me to post pictures, etc I can... but for now I'm not getting any errors... the only thing is that in this application i'm not onmouseover'ing a link (i.e: <a href...>) but rather an image.

notes:
linkTest.jpg = a blank image to display when nothing is onmouseover'd
linkTest2.jpg = a dummy but colored image to test the functionality with

What have I messed up in the transition?

Kor
07-13-2007, 10:37 PM
Hey... you are an old guy on Forum... You forgot to tell us what your code should do, and what went wrong...

canadianjameson
07-13-2007, 10:55 PM
hahaha! consider it a senior moment then :D

www.enviromark.ca/english/index.html

if you rollover the blue squares an arrow moves and a text-image changes depending on what link you roll over.

I need to get the effect of the link rollover --> text-image change on another website i'm designing... and when I moved over the JS file and modified it as I though I needed to, it no longer worked.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum