SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2001
    Location
    London
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My onMouseOver events don't work in Netscape. I've just debugged a form for netscape because CSS and forms don't mix well on NS.

    Could my new problems also be due to CSS problems?

    In one problem, an onMousOver triggers a function which changes a bunch of images on the page(which sit in various divs)--listed below.

    In another problem, mouseovers won't trigger image flips when the image to be flipped is located inside another div--listed even further below.

    Does anyone know how to solve this, or a good resource to solve this problem?

    Thanks

    Brad


    Problem 1:

    <div style="position: absolute; top: 224px; left: 20px">
    <a href=""
    onMouseOver="changeGroove()">
    <img src="buttons/butgroov.jpg" NAME="pic2" width="206" height="27" border="0" alt="">
    </a>
    </div>

    function changeGroove() {
    num1=1
    altnum=4
    document.pic1.src="buttons/butrrp.jpg"
    document.pic2.src="buttons/altgroov.jpg"
    document.pic3.src="buttons/butpowr.jpg"
    document.pic51.src=image1[num1]
    document.pic11.src=space1[num1]
    document.pic12.src=space2[num1]
    document.pic13.src=space3[num1]
    document.pic14.src=space4[num1]
    document.pic15.src=space5[num1]
    document.pic16.src=space6[num1]
    document.pic17.src=space7[num1]
    document.pic18.src=space8[num1]
    document.pic19.src=space9[num1]
    }


    Problem 2:

    <div style="position: absolute; top: 70px; left: 560px">
    <a href="javascript:new_window('songcup.html')"
    onMouseOver="document.pic61.src='buttons/altsfcup.jpg'"
    onMouseOut="document.pic61.src='buttons/butsfcup.jpg'">
    <img src="images/spindisc.gif" width=50 height=50 border=0 alt="">
    </a></div>


    <div style="position: absolute; top: 120px; left: 504px">
    <img src="buttons/butsfcup.jpg" NAME="pic61" width="158" height="28" border="0" alt="">
    </div>

  2. #2
    SitePoint Zealot HotDog's Avatar
    Join Date
    May 2000
    Location
    Salt Lake City, UT
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bspotto

    NS 4.7 can act funky with div tags and table tags, especially when they are nested. On your first problem I'm not quite sure what you are trying to do. Are you trying to change several images on one mouse over, or just one image on a mouse over??? Either way, the following code should solve your problem. It's well documented so I won't expand on it now unless you need me to.

    Code:
    <html>
    <head>
    <!--Scripts by Joe Eliason.  You can use this script freely as long as this comment stays
        intact with the code.  Any questions or comments please email me at papito@yahoo.com.-->
     
    <script type="text/javascript" language="javascript">
    
    <!--
    //Roll over commands//
    
    	//command for mouseOver
    function on_img(loc,img)
    {
    	loc.src=menuimg[img].src;
    }
    	//command for mouseOut...Same function as on_img.  Can use one or both functions, works the same.
    function off_img(loc,img)
    {
    	loc.src=menuimg[img].src;
    }
    
    //Define and setup image array:   (your variable)menuimg = new Array (2) <-- the number of images in the array
    menuimg = new Array(2);
    
    //List your images in the array.//
    
    //FIRST IMAGE  
    //The first line (menuimg[0]= new Image (42,499); ) defines it as an Image with its width and height
    menuimg[0]= new Image (42,499);
    //The second line (menuimg[0].src="Images/lineBar0.gif"; ) defines the image source location
    menuimg[0].src="Images/lineBar0.gif";
    
    //SECOND IMAGE
    menuimg[1]= new Image (42,499);
    menuimg[1].src="Images/lineBar1.gif";
    
    //add more arrays just like above for more images
    //-->
    </script>
    </head>
    
    <body>
    <table align="left" border=0 cellpadding=0 cellspacing=0>
    	<tr>
    		<td rowspan=1 colspan=1 width=183 height=34>
    			<!--On the onMouseOver command run the function from the above script...on_img(imageName,Array Number);-->
    			<!--Use the [self.status'']command for text in the status bar at the bottom.  Leave blank for no text.-->
    			<!--On the onMouseOut command  run the "off_img()" command to return to to the orriginal image.-->
    			<a href="directoryIndex.html" onmouseover="on_img(lineBar,1);on_img(directory,10);self.status='Company Directory';return true"onmouseout= "off_img(directory,11);self.status='';return true">
    			<!--Give you image a name to be refered by (name="whatever"-->
    			<img src="Images\directory1.gif" name="directory" width=183 height=34 border=0></td>
    	</tr>
    
    <!--Your image name must be the same as the name you put in the anchor
     tag command [onMouseOut="on_image(imageName,Array Number)] associated
     with the image you want to switch.  If you put a different image name
     in the anchor tag mouseOver command you will switch the image with that
     name.  Play around with it.  -->
    </table>
    </body>
    </html>
    If you want to just change one image on a mouse over, just include the function once...

    Code:
    <a href="directoryIndex.html" onmouseover="on_img(directory,10);self.status='Company Directory';return true"onmouseout= "off_img(directory,11);self.status='';return true">
    If you want to change several images, just call the function again for each image you want to change...

    Code:
    <a href="directoryIndex.html" onmouseover="on_img(lineBar,1);on_img(directory,10);self.status='Company Directory';return true"onmouseout= "off_img(directory,11);self.status='';return true">
    This should solve your problem. If it doesn't or you have any questions, let me know.
    Joe Eliason
    Just a dog learnin' PHP from cat.


Bookmarks

Posting Permissions

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