Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Regarding the onMouseOver Command

    Hey ... I'm just trying to learn JavaScript now, and so I've been looking at some online tutorials.

    My basic need is to take link banners on my website (http://www.bodyboarding.tk is the site address; http://members.aol.com/thestateofreft/pages/links.htm is the page address), and do the following:

    Have them all 350x65 by default
    Use the onMouseOver command to make them 425x80

    The tutorial I looked at gave me the information as to how to do an onMouseOver command, but it required the images to be the same size.

    I'm editing the page without uploading it, so you won't be able to see the code from the source I gave above, but here is the scripting I have right now:

    Code:
    <SCRIPT language="JavaScript"
    <!--
    
      if (document.images)
       {
         pic1on= new Image(425,80);
         pic1on.src="pictures/ebodyboarding.GIF";  
    
         pic1off= new Image(350,65);
         pic1off.src="pictures/ebodyboarding.GIF";
    
       }
    
    function lightup(imgName)
     {
       if (document.images)
        {
          imgOn=eval(imgName + "on.src");
          document[imgName].src= imgOn;
        }
     }
    
    function turnoff(imgName)
     {
       if (document.images)
        {
          imgOff=eval(imgName + "off.src");
          document[imgName].src= imgOff;
        }
     }
    
    //-->
    </SCRIPT>
    and ...

    Code:
    			<tr>
    				<td align="center" class="text">
    					<a href="http://store.yahoo.com/cgi-bin/clink?ebodyboarding+EvvK2a+index.html+" target="_blank">eBodyboarding.com</a><br>
    					The largest selection of bodyboarding equipment in the world! You want it? You got it at eBodyboarding.com!</td>
    				<td align="center" width="400">
    					<a href="http://store.yahoo.com/cgi-bin/clink?ebodyboarding+EvvK2a+index.html+" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="pictures/ebodyboarding.GIF" name="pic1" width="350" height="65" border="0"></A></td>
    			</tr>
    I thought that by changing the size tags at the top of the JavaScript, I could then make the image size change when the mouse hovered over it... but that was not the case.

    Any ideas?

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>Image size rollover</title>
    	</head>
    	<body>
    		<img src="thumbnail_small.png" onmouseover="this.src = 'image_large.png'" onmouseout="this.src = 'image_small.png'">
    	</body>
    </html>
    Just don't specify the image size anywhere.

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh God. LOL I'm such an idiot

    I ended up using a whole different thing (that involved using my picture editor to make pictures the sizes I wanted) to do it. DUH!

    Well, thanks... for future reference, I guess. :-P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •