/    Sign up×
Community /Pin to ProfileBookmark

Having trouble creating mouseover in menu buttons!?!

Copy linkTweet thisAlerts:
Jun 29.2010

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!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jun 29.2010 — That above code works provided you have the images created correctly. However, especially if that is in a link, [url=http://wellstyled.com/css-nopreload-rollovers.html]CSS rollovers[/url] are by far the best way of doing this. More on [url=http://www.w3schools.com/CSS/css_pseudo_classes.asp]CSS pseudo classes[/url].
Copy linkTweet thisAlerts:
@CResultsauthorJun 30.2010 — 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?)
Copy linkTweet thisAlerts:
@Declan1991Jun 30.2010 — 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.&lt;img src="normal.jpg" onmouseover="this.src='rolledover.jpg';" onmouseout="this.src='normal.jpg''"&gt;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.
Copy linkTweet thisAlerts:
@CResultsauthorJun 30.2010 — 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. ?
Copy linkTweet thisAlerts:
@PadonakJun 30.2010 — [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>
...[/CODE]

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"
×

Success!

Help @CResults spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...