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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover Script

    Hi there, I found an image mouseover script which I would like to use, I however do not see a <head> in the php file I'm supposed to add the js to, could someone please help regarding the placement of this code.

    Thanks for any assistance!

    The following is the script which I found and I have attached my default.php file:

    <script language="javascript">
    /*** Use the name of your directory where your images are ie.. images, Images, img, what ever you have named your image directory***/
    var buttonFolder = "images/";

    /*** List your images here that will be on the page and then the mouse over images in the 2nd array ***/
    upSources = new Array("myimage.jpg","myimage1.jpg","pic1.jpg","etc.jpg");

    overSources = new Array("myimagedown.jpg","myimage1down.jpg","pic1down.jpg","etc.jpg");


    //*** DO NOT CHANGE ANYTHING BELOW THIS LINE ***//
    totalButtons = upSources.length;



    //*** MAIN IMAGES FUNCTIONS ***//
    // PRELOAD MAIN MENU BUTTON IMAGES
    function preload() {
    for ( x=0; x<totalButtons; x++ ) {
    buttonUp = new Image();
    buttonUp.src = buttonFolder + upSources[x];
    buttonOver = new Image();
    buttonOver.src = buttonFolder + overSources[x];
    }
    }

    // SET MOUSEOVER IMAGE
    function setOverImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
    }

    // SET MOUSEOUT IMAGE
    function setOutImg(But, ID) {
    document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
    }


    //preload();
    </script>
    Attached Files Attached Files

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    That's a very antiquated script but it should work attached to the bottom of the page just before the </body> tag where JavaScript belongs. Get rid of the language="javascript" though as that became obsolete about 15 years ago.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha thanks! Is there perhaps a better script you can direct me to do do this onmouseover? Also there is no </body> tag in the php file I am trying to add this to., therefore a bit confused as to where to put the js.

    Alternatively I have also tried to add a class to the the displayMediaThumb code in default.php
    I then added the class to the css file, however on mouseover the image is in the background and I cannot get it to the front or to just replace the current image with the one I want to use for the rollover.

    This is the code I used in the css file:

    .thumbers :hover{
    background: url(../images/preowned-on.png) no-repeat;
    }

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Resolved, thanks.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by Usermee View Post
    there is no </body> tag in the php file I am trying to add this to., therefore a bit confused as to where to put the js.
    So put the <script> last thing in the file so that everything else in the file loads before it. With very few exceptions you want JavaScript to load after the HTML.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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