need help with a roll over code please [Archive]

View Full Version : need help with a roll over code please

Toma

03-20-2006, 10:33 PM

I am trying to get the following code to work. it is not showing the secound image on mouse over. I am missing something probably very simple.

<center><table><tr><td><img src="images/mail6.jpg" width="88" height="31" border="0" alt="Email a friend" align="left"></td><td><a href= "http://www.nutricoach.net/recommend.html"target="page" onClick="window.open('','page','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550 ,height=410,left=50,top=50,titlebar=yes')" onMouseOver= "if (document.images) document.recommend.src= 'http://nutricoach.net/recommend2.gif';" onMouseOut= "if (document.images) document.recommend.src= 'http://nutricoach.net/recommend.gif';"><img src= "http://nutricoach.net/recommend.gif" width=150 height=48 alt="Click on this button to tell your friends about this website" name="recommend" border=0></a></td></tr></table></center>

fyo

03-20-2006, 10:52 PM

<center> is depreciated, so you shouldn't use that. You might also want to throw all the javascript into functions. Even if it doesn't make it a lot easier for you, it probably does for anyone trying to help you (or considering it and taking one look at that block of code, which isn't even inside [code] tags).

VIPStephan

03-20-2006, 11:18 PM

Not only is the <center> tag depreciated but also this table is totally needless and using JavaScript to get a rollover effect is a little outdated. You could just put that anchor tag there (without table) and use CSS.
Something like that:



<a href="#" id="recommend">recommend this page</a>

/* CSS code */

#recommend {
display: block;
width: ??px; /* put a value as much as the width of your image here */
height: ??px; /* put a value as much as the height of your image here */
text-indent: -1000px;
background: url(http://nutricoach.net/recommend.gif) top left no-repeat;
}
#recommend:hover {background-image: url(http://nutricoach.net/recommend2.gif);}

You can center that element via CSS too, or place it where ever you want it using positioning (looking at your (really bad) source code this might be the least problematic option - not promise, though).

Sorry, just saw you're using an image next to the link. Keep the table for now as this would cause less problems than if you would change more on this.
But use align="center" on the table and delete the <center> tag.

_Aerospace_Eng_

03-21-2006, 01:00 AM

It appears that your main images are in a folder called images but your rollover image filename is not like you say it is. It actually has a space in it. The code below should work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mouseover {
text-align:center;
line-height:48px;
width:238px;
height:48px;
float:left;
}
</style>
<script type="text/javascript">
function openWin(url,wid,hgt)
{
newwin = window.open(url,'newwin','width='+wid+',height='+hgt+',status=0,scrollbars=0,menubar=0,toolbars=0');
newwin.focus();
}
function changeImg(where,imgsrc)
{
document.getElementById(where).src= imgsrc;
}
</script>
</head>

<body>
<div id="mouseover"><img src="images/mail6.jpg" width="88" height="31" border="0" alt="Email a friend">
<a href= "http://www.nutricoach.net/recommend.html"target="_blank" onclick="openWins(this.href,'550','410');return false" onmouseover="changeImg('recommend','http://nutricoach.net/images/recommend%202.gif')" onmouseout="changeImg('recommend','http://nutricoach.net/images/recommend.gif')"><img src="http://nutricoach.net/images/recommend.gif" alt="Click on this button to tell your friends about this website" name="recommend" id="recommend" width="150" height="48" border="0"></a>
</div>
</body>
</html>

Arbitrator

03-21-2006, 01:23 AM

The CSS :hover selector has some cross-browser compatibility issues at the moment so you might want to stick with JavaScript. Something like the below should work. Just surround the images with anchor tags (<a href...></a>) to turn them into links.

Basic format:
<img id="IMAGEID"
src="ORIGINALIMAGEURL"
onMouseOver="IMAGEID.src = 'ROLLOVERIMAGEURL';"
onMouseOut="IMAGEID.src = 'ORIGINALIMAGEURL';"/>

Examples:
<img id="button1"
src="button/profile.gif"
onMouseOver="button1.src = 'button/profile1.gif';"
onMouseOut="button1.src = 'button/profile.gif';"/>
<img id="button2"
src="button/partners.gif"
onMouseOver="button2.src = 'button/partners1.gif';"
onMouseOut="button2.src = 'button/partners.gif';"/>
<img id="button3"
src="button/services.gif"
onMouseOver="button3.src = 'button/services1.gif';"
onMouseOut="button3.src = 'button/services.gif';"/>Also, I believe the word is "deprecated", as in out-dated; not "depreciated".

VIPStephan

03-21-2006, 01:20 PM

The CSS :hover selector has some cross-browser compatibility issues [...]
I have never encountered any serious problem with the :hover pseudo class! Of course you will if you try to apply it to elements other than anchors which won't work in IE but we're talking about a simple <a> tag on a simple layout, man!

Arbitrator

03-21-2006, 09:19 PM

Hmm... I was thinking you'd need to apply it to the image to get the rollover effect?

VIPStephan

03-21-2006, 10:38 PM

Try my code I posted earlier and you'll see the magic of CSS mouseover. :)

I have to add that I usually put the two states (normal and mouse over state) into one image - the mouseover state underneath the normal state - and then I just change the background position on :hover. This way the whole image with the two states is loaded at once and there is no delay for the mouse over. And the image preloading as in JavaScript used to be isn't necessary anymore.

Many advantages that we should make use of!

Oceansong

06-19-2009, 04:55 AM

I am trying to get to the bottom of a similar javascript rollover issue on an old website I'm trying to repair until a new one is done. The rollover effect should pull up the second image but shows an empty box instead. The code shows 3 functions:

<script language="JavaScript" type="text/javascript">

<img src="images/nav_mouseover/tehama_header.gif" width="162" height="50"><br>

<img src="images/nav_mouseover/bottle_neck.gif" width="110" height="184"><br>
<a href="index.shtml" target="_parent" onMouseOver="mOver('home',1)" onMouseOut="mOut('home',1)">
<img src="images/nav_mouseover/home_off.gif" width="110" height="20" border="0"></a><br>
<a href="our_oils.shtml" onMouseOver="mOver('our_oils',2)" onMouseOut="mOut('our_oils',2)">
<img src="images/nav_mouseover/our_oils_off.gif" width="110" height="20" border="0"></a><br>
<a href="buy_direct.shtml" onMouseOver="mOver('buy_direct',3)" onMouseOut="mOut('buy_direct',3)">
<img src="images/nav_mouseover/buy_direct_off.gif" width="110" height="20" border="0"></a><br>
<a href="newsletter.shtml" onMouseOver="mOver('newsletter',4)" onMouseOut="mOut('newsletter',4)">
<img src="images/nav_mouseover/newsletter_off.gif" width="110" height="20" border="0"></a><br>
<a href="about_us.shtml" onMouseOver="mOver('about_us',5)" onMouseOut="mOut('about_us',5)">
<img src="images/nav_mouseover/about_us_off.gif" width="110" height="20" border="0"></a><br>
<a href="links.shtml" onMouseOver="mOver('links',6)" onMouseOut="mOut('links',6)">
<img src="images/nav_mouseover/links_off.gif" width="110" height="20" border="0"></a><br>
<img src="images/nav_mouseover/bottle_bottom.gif" width="110" height="69"><br>

<img src="images/nav_mouseover/tehama_footer.gif" width="162" height="50"><br><br>
<img src="images/CCOF_weblogo.gif" width="87" height="102"><br><BR>
<img src="images/koshersmall.gif" width="149" height="108"><br>
<img src="images/blank.gif" border="0" width="1" height="200"><br>

</td>

Any suggestions anyone has I would greatly appreciate. Thanks so much.