www.webdeveloper.com
Results 1 to 6 of 6

Thread: Having trouble creating mouseover in menu buttons!?!

  1. #1
    Join Date
    Jun 2010
    Posts
    3

    Having trouble creating mouseover in menu buttons!?!

    Oddly enough, I've done this before and not can't seem to find any way to do this again. I've search endlessly and tried different things and just not getting it. I even went to a button creator site! ugh. they gave this simple code...

    <img src="image1.jpg" onmouseover="this.src='imageover2.jpg';" onmouseout="this.src='image1.jpg';" />


    BUT... I'm assuming there needs to be some javascript in the head part and they don't give that and I'm not even sure how to implement it?

    Are there any simple scripts or can someone help with the above. The buttons I have are images. when clicked on I created another image that looks more highlighted, etc. Home, About, Gallery, Contact. I also want to make sure that when you are on Gallery, that you know where you are at and the highlighted image button remains and then changes when you change pages.


    Any help greatly appreciated!

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    That above code works provided you have the images created correctly. However, especially if that is in a link, CSS rollovers are by far the best way of doing this. More on CSS pseudo classes.

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks! Great reply back and link! At least it makes it easy to understand. But, I don't have the text separately to create an CSS like what was mentioned unless there is a similar way to do it? (for each image/menu button?)

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Well if you have to do it for each image tag (it's far easier to do it in general, whether through JavaScript or CSS), you can use what you had.
    Code:
    <img src="normal.jpg" onmouseover="this.src='rolledover.jpg';" onmouseout="this.src='normal.jpg''">
    The problem can be that if rolledover.jpg is a big file, it will take so long to load that the most will have moved out. You can preload the image, but making it as small as possible often avoids the problem anyway.

  5. #5
    Join Date
    Jun 2010
    Posts
    3
    Thanks. yeah, I went back to the code I had - thought it was working... BUT I get to my next page about.html and although I copied the menu/coding exact it does not change the images at all. ??

    There also must be an easy (ha) fix or way to have one image (the highlighted one) stay that way when on a certain page. ?

    I won't direct link, but maybe you'll get a better idea of what I may be doing wrong or how to figure out what I need it to do.. at drivetheimage.net

    Ugh. I've been working since morning on this one. You'd think it would be simple.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    Code:
    ...
    <script language="JavaScript" type="text/javascript">
    <!--
    var path = 'http://drivetheimage.net/';
    var current_page = location.pathname.substring(1, location.pathname.length);
    var arr = [
    'drivehomemenu2.jpg',
    'drivehomeabout2.jpg',
    'drivegallerymenu2.jpg',
    'drivepricingmenu2.jpg',
    'drivecontactmenu2.jpg'
    ];
    
    function reverse(obj){
    var temp = obj.childNodes[0].src; var bg = obj.style.backgroundImage;
    var im_from_bg = (navigator.userAgent.indexOf('MSIE') > 0) ? bg.substring(bg.indexOf('(') + 1, bg.indexOf(')')) : bg.substring(bg.indexOf('(') + 2, bg.indexOf(')') -1);
    obj.childNodes[0].src = im_from_bg; obj.style.backgroundImage = 'url('+temp+')';
    }
    
    function set_menu(){
    var navlinks = document.getElementById("nav").getElementsByTagName("A");
    for(var k = 0; k < navlinks.length; k++){
    navlinks[k].style.backgroundImage = 'url('+path + 'images/' + arr[k]+')';
    navlinks[k].style.backgroundPosition = '-300px -300px';
    navlinks[k].style.backgroundRepeat = 'no-repeat';
    if(navlinks[k].attributes["href"].nodeValue === current_page){navlinks[k].childNodes[0].src = path + 'images/' + arr[k];}
    else{
    navlinks[k].onmouseover = function(){reverse(this);}
    navlinks[k].onmouseout = function(){reverse(this);}
    }
    }
    }
    
    window.onload = set_menu;
    //-->
    </script>	
    </head>
    <body>
    ...
    i've tested this script in IE6, Opera and FF. do not forget to remove all onmouseovers and onmouseouts from every <a></a> element inside the div with id="nav"
    Last edited by Padonak; 06-30-2010 at 06:31 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles