Mouseover images

This example shows how to create your own mouseover function. It works with a fixed webdirectory and dynamic image names, so the same function can be used for multiple mouseover enabled images.

        <script type="text/javascript">

            // Set the webdirectory in which your images are accessible
            var url_dir = '';
            // Set the extension of your images
            var ext = '.jpg';

            function switch_img(obj){
                    obj.mouseState = 'normal';

                if(obj.mouseState == 'normal')
                    obj.mouseState = 'mouseover';
                    obj.mouseState = 'normal';

                obj.src = url_dir + + '_' + obj.mouseState + ext;

                // This next line only serves as feedback for you to see what the src of the image is changed into
                document.getElementById('url').innerHTML = obj.src;

        <!-- Set the initial (normal) image in the src of the img tag -->
        <!-- The id is the 'name' of the image, the part before the underscore ( _ ) the Mouse events can be left unaltered -->
        <img id="image" src="" onMouseOver="switch_img(this);" onMouseOut="switch_img(this);"/>

        <!-- This span is only used for feedback -->
        <br/><br/><span id="url"/>
        <!-- end -->



Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment