Jump to content

Why doesn't my rollover work?

downah

By downah
in Javascript Help

 Share

Recommended Posts

downah Member

downah

Posted
Posted

Hi guys I have a simple rollover onmouseover effect, I have tried several scripts but none of them work, can anyone tell me why?

 

javascript

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "./images/gym-light.png" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "./images/buttonright.png" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>

 

link

<a href="index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
      <img id='Img4Inner' name="homebutton" src='./images/gym-light.png' alt="" />
      
</a>

Link to comment
https://forums.phpfreaks.com/topic/261193-why-doesnt-my-rollover-work/
Share on other sites
downah Member

downah

Posted
  • Author
Posted

http://jsfiddle.net/ETHaM/5/

 

I have tried it on here and it works.. but not in my index when I open it up from my directory or when I upload it on my host.. its live on viifit.com the image with the bike (icon green one) has that exact code connected to it - the link works but not the mouseover?

The Little Guy Prolific Member

The Little Guy

Posted
Posted

image mouseovers should be done via css IMO

 

basically you make one image with two images laid on top of it.

so say one image is 20x20 the second one would also be 20x20, and your full image would be 40x20 (or 20x40 depending on if you want it vertical/horizontal doesn't really matter).

 

your HTML would look like this:

<a href="" id="hoverImage" /></a>

 

and your CSS would look like this:

/*create a css window with an image as a background */
a#hoverImage{
display: block;
float: left;
height: 20px;
width: 20px;
background-image: url("/path/to/large/image.png");
background-repeat: no-repeat;
}

/* 40x20 image this will shift the background image to the left when someone mouse's over it */
a#hoverImage:hover{
background-position: -20px 0;
}

downah Member

downah

Posted
  • Author
Posted

I think the reason it doesnt work is because of document.images is that right? The images are within certain div's how do I access those? I would really like to fix this javascript code. this is the whole code -->

 

<!doctype html>
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<meta name="generator" content="LMSOFT Web Creator Pro, Version:6.0.0.4">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link href="./lmwcglobal.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<script type="text/javascript" src="./jquery/LMCenterInWindow.js"></script>

<script type="text/javascript" src="./lmpres90.js"></script><noscript></noscript>

   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>

      <script type="text/javascript">
<!--
if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "http://viifit.com/images/gym-light.png";
    homebuttondown = new Image();
    homebuttondown.src = "http://viifit.com/images/gym-dark.png";
}

function buttondown(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "down.src");
    }
}

function buttonup(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "up.src");
    }
}
// -->
</script>

<script type="text/javascript">
$(document).ready(function(){
   $('#slider1').bxSlider();
});

$(function(){
var slider = $('#slider1').bxSlider({
   controls: false
});

$('#go-prev').click(function(){
   slider.goToPreviousSlide();
   return false;
});

$('#go-next').click(function(){
   slider.goToNextSlide();
   return false;
});
});
</script>

</head>

<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px; background-color:#ffffff;" onresize=LMGlobalPosPage();>

<DIV class="cLinkHidden">
[<a href="http://www.lmsoft.com" title="Build Your Own Website">web page software</a>]
[<a href="http://www.lmsoft.com/webcreatorpro.html" title="Website Creation Easy">easy website builder software</a>]
</DIV>

<div id='Page'>
   <div id='Img10'>
      <img id='Img10Inner' src='./images/vii-web-new.jpg' alt="" />
   </div>
   <div id='Img3'>
      <img id='Img3Inner' src='./images/logo.jpg' alt="" />
   </div>
   <div id='Text1'>
      <p style="line-height:0;text-align:left"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span></font></p><p style="line-height:0;text-align:left"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;"><br /></span></font></p><p style="line-height:0;text-align:left"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></font></p><p style="line-height:0;text-align:left"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;"><br /></span></font></p><p style="line-height:0;text-align:left"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></font></p>
   </div>
   <form method=post id='Form1' name='Form1' action='http://www.lmsoft.com/services/form2email2.asp' onsubmit=FireEvent('Form1','_OnSubmit') onreset=FireEvent('Form1','_OnReset')>
   <DIV id=Input1>
   <input type='text' id='objInput1' name='companyname' size=30 maxlength=60 onclick=FireEvent('Input1','_OnClick'); ondblclick=FireEvent('Input1','_OnDblClick'); onmousedown=FireEvent('Input1','_OnMouseDown'); onmouseup=FireEvent('Input1','_OnMouseUp'); onfocus=FireEvent('Input1','_OnEnter'); onblur=FireEvent('Input1','_OnLeave'); onchange=FireEvent('Input1','_OnChange'); onkeydown=FireEvent('Input1','_OnKeyDown'); onkeypress=FireEvent('Input1','_OnKeyPress'); onkeyup=FireEvent('Input1','_OnKeyUp'); onselect=FireEvent('Input1','_OnSelect'); >
   </DIV>
   <DIV id=Input2>
   <input type='text' id='objInput2' name='subject' size=30 maxlength=60 onclick=FireEvent('Input2','_OnClick'); ondblclick=FireEvent('Input2','_OnDblClick'); onmousedown=FireEvent('Input2','_OnMouseDown'); onmouseup=FireEvent('Input2','_OnMouseUp'); onfocus=FireEvent('Input2','_OnEnter'); onblur=FireEvent('Input2','_OnLeave'); onchange=FireEvent('Input2','_OnChange'); onkeydown=FireEvent('Input2','_OnKeyDown'); onkeypress=FireEvent('Input2','_OnKeyPress'); onkeyup=FireEvent('Input2','_OnKeyUp'); onselect=FireEvent('Input2','_OnSelect'); >
   </DIV>
   <DIV id=Input3>
   <input type='text' id='objInput3' name='phone' size=30 maxlength=60 onclick=FireEvent('Input3','_OnClick'); ondblclick=FireEvent('Input3','_OnDblClick'); onmousedown=FireEvent('Input3','_OnMouseDown'); onmouseup=FireEvent('Input3','_OnMouseUp'); onfocus=FireEvent('Input3','_OnEnter'); onblur=FireEvent('Input3','_OnLeave'); onchange=FireEvent('Input3','_OnChange'); onkeydown=FireEvent('Input3','_OnKeyDown'); onkeypress=FireEvent('Input3','_OnKeyPress'); onkeyup=FireEvent('Input3','_OnKeyUp'); onselect=FireEvent('Input3','_OnSelect'); >
   </DIV>
   <DIV id=Input4>
   <input type='text' id='objInput4' name='email' size=30 maxlength=60 onclick=FireEvent('Input4','_OnClick'); ondblclick=FireEvent('Input4','_OnDblClick'); onmousedown=FireEvent('Input4','_OnMouseDown'); onmouseup=FireEvent('Input4','_OnMouseUp'); onfocus=FireEvent('Input4','_OnEnter'); onblur=FireEvent('Input4','_OnLeave'); onchange=FireEvent('Input4','_OnChange'); onkeydown=FireEvent('Input4','_OnKeyDown'); onkeypress=FireEvent('Input4','_OnKeyPress'); onkeyup=FireEvent('Input4','_OnKeyUp'); onselect=FireEvent('Input4','_OnSelect'); >
   </DIV>
   <DIV id=Input5>
   <input type='text' id='objInput5' name='sector' size=30 maxlength=60 onclick=FireEvent('Input5','_OnClick'); ondblclick=FireEvent('Input5','_OnDblClick'); onmousedown=FireEvent('Input5','_OnMouseDown'); onmouseup=FireEvent('Input5','_OnMouseUp'); onfocus=FireEvent('Input5','_OnEnter'); onblur=FireEvent('Input5','_OnLeave'); onchange=FireEvent('Input5','_OnChange'); onkeydown=FireEvent('Input5','_OnKeyDown'); onkeypress=FireEvent('Input5','_OnKeyPress'); onkeyup=FireEvent('Input5','_OnKeyUp'); onselect=FireEvent('Input5','_OnSelect'); >
   </DIV>
   <DIV id=Input6>
   <input type='text' id='objInput6' name='website' size=30 maxlength=60 value='http://' onclick=FireEvent('Input6','_OnClick'); ondblclick=FireEvent('Input6','_OnDblClick'); onmousedown=FireEvent('Input6','_OnMouseDown'); onmouseup=FireEvent('Input6','_OnMouseUp'); onfocus=FireEvent('Input6','_OnEnter'); onblur=FireEvent('Input6','_OnLeave'); onchange=FireEvent('Input6','_OnChange'); onkeydown=FireEvent('Input6','_OnKeyDown'); onkeypress=FireEvent('Input6','_OnKeyPress'); onkeyup=FireEvent('Input6','_OnKeyUp'); onselect=FireEvent('Input6','_OnSelect'); >
   </DIV>
   <DIV id=Input7>
   <textarea id='objInput7' name='message' cols=45 rows=8 onclick=FireEvent('Input7','_OnClick'); ondblclick=FireEvent('Input7','_OnDblClick'); onmousedown=FireEvent('Input7','_OnMouseDown'); onmouseup=FireEvent('Input7','_OnMouseUp'); onfocus=FireEvent('Input7','_OnEnter'); onblur=FireEvent('Input7','_OnLeave'); onchange=FireEvent('Input7','_OnChange'); onkeydown=FireEvent('Input7','_OnKeyDown'); onkeypress=FireEvent('Input7','_OnKeyPress'); onkeyup=FireEvent('Input7','_OnKeyUp'); onselect=FireEvent('Input7','_OnSelect'); >
   </textarea>
   </DIV>
   <DIV id=Input8>
   <input type='Button'id='objInput8' name='vInput8' value='Submit' onclick=ButonOnClickSubmit('Input8','Form1'); ondblclick=FireEvent('Input8','_OnDblClick'); onmousedown=FireEvent('Input8','_OnMouseDown'); onmouseup=FireEvent('Input8','_OnMouseUp'); onfocus=FireEvent('Input8','_OnEnter'); onblur=FireEvent('Input8','_OnLeave'); onkeydown=FireEvent('Input8','_OnKeyDown'); onkeypress=FireEvent('Input8','_OnKeyPress'); onkeyup=FireEvent('Input8','_OnKeyUp'); onselect=FireEvent('Input8','_OnSelect'); >
   </DIV>
   <input type='hidden' name='lmcheck' value='0'>
   <input type='hidden' name='lmserialwc' value=''>
   <input type='hidden' name='lmto' value=''>
   <input type='hidden' name='lmfrom' value='DATAFORM@lmsoft.com'>
   <input type='hidden' name='lmsubject' value=''>
   <input type='hidden' name='lmadr' value=''>
   <input type='hidden' name='lmserial' value=''>
   <input type='hidden' name='lmserialemail' value=''>
   </form>
   <div id='WebObj1'>



<div id="slider1">
<div><img src="slide1.png"></div>
<div><img src="slide1.png"></div>
<div><img src="slide1.png"></div>
<div><img src="slide1.png"></div>
</div>





   </div>
   <div id='Text2'>
      <p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;"><br /></span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</span></font></p>
   </div>
   <div id='Text3'>
      <p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;"><br /></span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</span></font></p>
   </div>
   <div id='Text4'>
      <p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;"><br /></span></font></p><p style="line-height:0;text-align:center"><font face="Arial" color="#808080"><span style="font-size:10pt;line-height:15px;">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</span></font></p>
   </div>
   <div id='Video1'>
   <!--[if !IE]> <-->
      <object ID='Video1Inner' type='application/x-shockwave-flash' data='./lmplayer.swf?file=tp://www.youtube.com/watch?v=nCgQDjiotG0&controlbar=false'
      pluginspage='http://www.macromedia.com/go/getflashplayer'
      width='277'
      height='125'>
      <param name="menu" value="true">
      <param name="allowfullscreen" value="True">
      <param name="allowscriptaccess" value="always">
      <param name="quality" value="High">
      <param name='scale' value='tofit'>
      <embed name='Video1Inner' src='http://www.youtube.com/watch?v=nCgQDjiotG0' scale='tofit' autoplay='false' controller='false' EnableContextMenu='true' width='277' height='125'></ebmed>
      </object>
   <!--> <![endif]-->
   <!--[if IE]>
      <object ID='Video1Inner' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'
      codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab'
      width='277'
      height='125'>
      <param name="movie" value="./lmplayer.swf?file=tp://www.youtube.com/watch?v=nCgQDjiotG0&controlbar=false">
      <param name="menu" value="true">
      <param name="allowfullscreen" value="True">
      <param name="allowscriptaccess" value="always">
      <param name="quality" value="High">
      <param name='scale' value='tofit'>
      <embed name='Video1Inner' src='http://www.youtube.com/watch?v=nCgQDjiotG0' scale='tofit' autoplay='false' controller='false' EnableContextMenu='true' width='277' height='125'></ebmed>
      </object>
   <![endif]-->
   </div>

   <div id='Img4'>

<a href="index.html" onmouseover="buttondown('homebutton')"       onmouseout="buttonup('homebutton')">
     <img id='Img4Inner' name="homebutton" src='http://viifit.com/images/gym-light.png' alt="" />

  </a>
   </div>
   <div id='Img5'>
      <img id='Img5Inner' src='./images/house-light.png' alt="" />
   </div>
   <div id='Img6'>
      <img id='Img6Inner' src='./images/senior-light.png' alt="" />
   </div>
   <div id='Img7'>
      <img id='Img7Inner' src='./images/schools-light.png' alt="" />
   </div>
   <div id='Img8'>
   <a href="" id="go-prev">
      <img id='Img8Inner' src='./images/left-light.png' alt="" /></a>
   </div>
   <div id='Img9'>
   <a href="" id="go-next">
      <img id='Img9Inner' src='./images/buttonright.png' alt="" /></a>
   </div>
   <script type="text/javascript" src="./index.js"></script>
   <noscript></noscript>
</div>
</body>
</html>

haku Regular Member

haku

Posted
Posted

Sorry, I can't help you with that. It's old-style javascript you have there, and isn't utilizing the DOM methods that have been in play for about 7-8 years now. I can't remember the specifics of how it all worked back then to be able to debug by looking at it, I'm too out of practice for that.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.