Having trouble creating mouseover in menu buttons!?!

**CResults** · 06-29-2010 02:21 PM

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!

**Declan1991** · 06-29-2010 06:33 PM

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.

**CResults** · 06-29-2010 07:26 PM

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?)

**Declan1991** · 06-29-2010 08:18 PM

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.

**CResults** · 06-29-2010 08:50 PM

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.

**Padonak** · 06-30-2010 05:28 AM

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"

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

Thread Tools

Display

Having trouble creating mouseover in menu buttons!?!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions