Help on Mainmenu hovers!

[gangsta life]

ok i wanted some thing where in the mianmenu in Mccodes you have a hover image tried everything but dont work

something simmilar to Generic RPG GRPG menu basically you hover over it and it turn grey i want that dont know how had alot of goes dont work

[Blade Maker]

I already did it for him, so no need for help.

[Kieran-R]

I already did it for him, so no need for help.

 

You should post it here. That way other people can benefit from this thread - not just the creator ;)

[Dayo]

you can do this via CSS

<style>

#menu ul {
width:200px;
}

#menu li {
list-style:none;
width:200px;
background:#222;
color:#fff;
}

#menu li:hover {
list-style:none;
width:200px;
background:#CCC;
color:#fff;
}
</style>
<ul id="menu">
<li>Link</li>
<li>Link</li>
</ul>

[Blade Maker]

Here is what I gave him, yes I realize you may not need a div, but I wanted it to be basic for him.

 

In mainmenu.php

After the <?php

 

put this right after it:

 

Echo '

<style type="text/css">
.menu {
width: 169px;
margin-left: auto;
margin-right: auto;

}

.menu a  {
display: block;
width: 169px;
height: 31px;
background-image: url(\'http://img803.imageshack.us/img803/696/linkl.jpg\');
line-height: 31px;
text-align: center;
}

.menu a:hover {
display: block;
width: 169px;
height: 31px;
background-image: url(\'http://img192.imageshack.us/img192/2200/linkhover.jpg\');
line-height: 31px;
text-align: center;
}
</style>

<div class="menu">';

 

Then at the very bottom right before ?> put:

 

Echo '</div>';

 

Please do not judge my poor quality images, thanks.

[lucky3809]

I use OO Dom Image Rollover script then just add regular img then add the hover img....

much better to do it this way, then making css for each image...

 

This is not my script but is given freely on the website listed in the copyright area...

call this file...oodomimagerollover.js

/*
Header Information------------------------------------[Do Not Remove This Header]--
Title: OO Dom Image Rollover
Description: This script makes it easy to add rollover/ mousedown 
 	effects to any image on the page, including image submit buttons. Automatically 
 	preloads images as well. Script works in all DOM capable browsers- IE5+, NS6+, 
 	Opera7+.

Legal: Copyright 2005 Adam Smith
Author Email Address: [email protected]
Date Created: June 6, 2005
Website: Codevendor.com | eBadgeman.com
Script featured on Dynamic Drive: http://www.dynamicdrive.com
-----------------------------------------------------------------------------------
*/

function imageholderclass(){
this.over=new Array();
this.down=new Array();
this.src=new Array();
this.store=store;

function store(src, down, over){
	var AL=this.src.length;
	this.src[AL]=new Image(); this.src[AL].src=src;
	this.over[AL]=new Image(); this.over[AL].src=over;
	this.down[AL]=new Image(); this.down[AL].src=down;
}
}

var ih = new imageholderclass();
var mouseisdown=0;

function preloader(t){
for(i=0;i<t.length;i++){
	if(t[i].getAttribute('srcover')||t[i].getAttribute('srcdown')){

		storeimages(t[i]);
		var checker='';
		checker=(t[i].getAttribute('srcover'))?checker+'A':checker+'';
		checker=(t[i].getAttribute('srcdown'))?checker+'B':checker+'';

		switch(checker){
		case 'A' : mouseover(t[i]);mouseout(t[i]); break;
		case 'B' : mousedown(t[i]); mouseup2(t[i]); break;
		case 'AB' : mouseover(t[i]);mouseout(t[i]); mousedown(t[i]); mouseup(t[i]); break;
		default : return;			
		}

		if(t[i].src){t[i].setAttribute("oldsrc",t[i].src);}
	}
}
}
function mouseup(t){
var newmouseup;
if(t.onmouseup){
	t.oldmouseup=t.onmouseup;
	newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");this.oldmouseup();}

}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("srcover");}}
t.onmouseup=newmouseup;
}

function mouseup2(t){
var newmouseup;
if(t.onmouseup){
	t.oldmouseup=t.onmouseup;
	newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");this.oldmouseup();}
	}
else{newmouseup=function(){mouseisdown=0;this.src=this.getAttribute("oldsrc");}}
t.onmouseup = newmouseup;
}

function mousedown(t){
var newmousedown;
if(t.onmousedown){
	t.oldmousedown=t.onmousedown;
	newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");this.oldmousedown();}}
}
else{newmousedown=function(){if(mouseisdown==0){this.src=this.getAttribute("srcdown");}}}
t.onmousedown=newmousedown;
}

function mouseover(t){
var newmouseover;
if(t.onmouseover){
	t.oldmouseover=t.onmouseover;
	newmouseover=function(){this.src=this.getAttribute("srcover");this.oldmouseover();}
}
else{newmouseover=function(){this.src=this.getAttribute("srcover");}}
t.onmouseover=newmouseover;
}

function mouseout(t){
var newmouseout;
if(t.onmouseout){
	t.oldmouseout=t.onmouseout;
	newmouseout=function(){this.src=this.getAttribute("oldsrc");this.oldmouseout();}
}
else{newmouseout=function(){this.src=this.getAttribute("oldsrc");}}
t.onmouseout=newmouseout;
}

function storeimages(t){
var s=(t.getAttribute('src'))?t.getAttribute('src'):'';
var d=(t.getAttribute('srcdown'))?t.getAttribute('srcdown'):'';
var o=(t.getAttribute('srcover'))?t.getAttribute('srcover'):'';
ih.store(s,d,o);
}

function preloadimgsrc(){
if(!document.getElementById) return;
var it=document.getElementsByTagName('IMG');
var it2=document.getElementsByTagName('INPUT');
preloader(it);
preloader(it2);
}

if(window.addEventListener){window.addEventListener("load", preloadimgsrc, false);} 
else{
if(window.attachEvent){window.attachEvent("onload", preloadimgsrc);}
else{if(document.getElementById){window.onload=preloadimgsrc;}}
}

 

Then include the page in header or wherever the images that has hover attribute...

<script type="text/javascript" src="oodomimagerollover.js"></script>

the two images you would add like this...

<a href='about.php'>

<img src='about.png' srcover='about2.png' alt='about'/></a>

srcover= is the hover pic...

Edited May 25, 2011 by lucky3809

[Dayo]

that looks like a lot of code compared to mine, why not just have the two images and plain text over top of the images (as i personaly do not like images as menus)

[Blade Maker]

Dayo are you talking to me or the JavaScript poster?

[Dayo]

the javascript, yours is similar to mine rather then a:hover i used li:hover

[lucky3809]

It is not a lot of coding, compared to needing to write a css for each image...

Gangster is wanting an image effect not text if i read it correctly, blade makers is for images, but if gangster has more then one image he wants the hover effect for he would have to add another css to them each because as you can see in blades example its only for one image to have that effect not for all images... the javascript provides effects for all images, plus preloads the images and for hover effects on submit buttons..

Edited May 25, 2011 by lucky3809

[Dayo]

yes you are correct but he wanted it like GRPG witch im sure it is just simple CSS as i posted above, no need for images what so ever

[MrAnthony]

Removed looks like Dayo already posted one i never seen sorry :)

Edited May 25, 2011 by MrAnthony

[Diesl]

CSS would be the preferred method to use now-a-days (JavaScript was the old way). It is much cleaner and shorter. Not all users may have JavaScript enabled on their browser, and their may be instances of a flashing image when a user rolls over the button (if the rollover image is not cached or pre-loaded properly). Also, you only need to make 1 http per button with CSS rather than 2 with JavaScript.

@lucky3809 - you can make the CSS code reference all images in the desired area. It is a different set up, but look at how Apple does it on their navigation. They just need one css rule for each rollover. Very simple and easy.

[Dayo]

dw about this ;)

Edited May 26, 2011 by Dayo
stupidnes :P