Page 1 of 2

form element hover

Posted: Wed Oct 18, 2006 1:42 pm
by Luke
Is it possible to create an image form element that changes color when you hover over it? I can't think of a way.

Posted: Wed Oct 18, 2006 2:03 pm
by Luke
Alright... I found a solution that uses javascript (unobtrusive). It just looks for an image in the same directory with a suffix of "_on" and replaces the regular image when user hovers over the image... then switches back when they move off it.

Code: Select all

function setupRollovers(){

	if (!document.getElementsByTagName){
		return;
	}
	var link;
	var all_links = document.getElementsByTagName('a');

	var preload = [];
	var img;
	var img_src;

	for (var i=0; i<all_links.length; i++){
		link = all_links[i];
		if (link.className && (' ' + link.className + ' ').indexOf(' rollover ') != -1){
			if (link.childNodes && link.childNodes.length == 1 && (link.childNodes[0].nodeName.toLowerCase() == 'img') || (link.childNodes[0].nodeName.toLowerCase() == 'input')) {
				link.onmouseover = autoRollMouseOver;
				link.onmouseout = autoRollMouseOut;

				// preload the _on version in an img tag
				if ((link.childNodes[0] ) && (link.childNodes[0].src)){
					var img = document.createElement('img');
					img.src = link.childNodes[0].src.replace(/(\.[^.]+)$/, '_on$1');
				}
				

			}
		}
	}
}
function autoRollMouseOver(e){
	var target = findTarget(e);

	if (!target){
		return;
	}
	var img_tag = target.childNodes[0];
	img_tag.src = img_tag.src.replace(/(\.[^.]+)$/, '_on$1');
}
function autoRollMouseOut(e){
	var target = findTarget(e);

	if (!target){
		return;
	}
	var img_tag = target.childNodes[0];
	img_tag.src = img_tag.src.replace(/_on(\.[^.]+)$/, '$1');
}
function findTarget(e){
	var target;
	
	if (window.event && window.event.srcElement){
		target = window.event.srcElement;
	}
	else if (e && e.target){
		target = e.target;
	}
	if (!target){ return null; }

	while (target != document.body && target.nodeName.toLowerCase() != 'a'){
		target = target.parentNode;
	}
		
	if (target.nodeName.toLowerCase() == 'a'){
		return target;	
	}
	return null;
}
function getByID(ID){
	if (document.getElementById){
		return document.getElementById(ID);
	}
	else if (eval('document.all.' + ID)){
		return eval('document.all.' + ID);
	}
	else if (eval('document.' + ID)){
		return eval('document.' + ID);
	}
	return
}

if (window.addEventListener){
    window.addEventListener('load', function (){ setupRollovers()}, false);
}
else if (window.attachEvent){
    window.attachEvent( "onload", function (){ setupRollovers()});
}

Code: Select all

<a class="rollover"><input type="image" src="images/buttons/search_darkbg.gif" alt="Search" class="search" /></a>

Posted: Wed Oct 18, 2006 2:03 pm
by pickle
In Firefox ya, in IE no. IE only supports the ':hover' CSS pseudo-element on links. Firefox (properly) allows it on anything. If you want cross-browser compatibility - you'll need Javascript.

Posted: Wed Oct 18, 2006 2:03 pm
by Oren
You mean an image which is a submit button?

Posted: Wed Oct 18, 2006 2:05 pm
by Luke
pickle wrote:In Firefox ya, in IE no. IE only supports the ':hover' CSS pseudo-element on links. Firefox (properly) allows it on anything. If you want cross-browser compatibility - you'll need Javascript.
and how would you do that?

Code: Select all

.search_box:hover{
    /* What goes here? */
}
Oren wrote:You mean an image which is a submit button?
yup

Posted: Wed Oct 18, 2006 2:13 pm
by pickle
If you just wanted Firefox (and probably other Gecko based browsers - I haven't checked):

Code: Select all

.search_button{
width:50px;
height:20px;
background-image:url('down.gif');
}
.search_button:hover{
background-image:url('hover.gif');
}

Posted: Wed Oct 18, 2006 2:14 pm
by Oren
As mentioned before, this will not work with IE without JavaScript. Add the onMouseOver and make it so when the mouse is over, the position of the background image for the button will change. If you don't know what I'm talking about, just post here and I'll explain in more detail :wink:

Posted: Wed Oct 18, 2006 2:16 pm
by Luke
Oren wrote:As mentioned before, this will not work with IE without JavaScript. Add the onMouseOver and make it so when the mouse is over, the position of the background image for the button will change. If you don't know what I'm talking about, just post here and I'll explain in more detail :wink:
I know what you're talking about... I think the solution I found will be just fine... if javascript is not enabled, it will just not change colors on hover... no big deal. Thanks guys!

Posted: Wed Oct 18, 2006 2:29 pm
by RobertGonzalez
Just so you know, it is still a neat feature. Eventhough IE sucks hard in this area of CSS (yeah, in which doesn't it?), it works really well. I have used it in several recent projects and it performs as expected.

Posted: Wed Oct 18, 2006 3:00 pm
by Obadiah
pickle wrote:If you just wanted Firefox (and probably other Gecko based browsers - I haven't checked):

Code: Select all

.search_button{
width:50px;
height:20px;
background-image:url('down.gif');
}
.search_button:hover{
background-image:url('hover.gif');
}
thats moreso css....if your gonna go that route try this...works for all browsers
first put this in there

Code: Select all

a.alt 
{ 
	display: none; 
}
thats very important....then do this

Code: Select all

a.go 
	{	display: block;
		height:20px;
		width:30px;
		margin: 0 auto;
		background-image: url("images/buttons/go.jpg");
	}

a.go:hover 
	{
		background-image: url("images/buttons/go-roll2.jpg");
	}
it will not work properly in any other browser exept IE if you dont use that display:block; command

lastly, be sure to do it this way where you want to plug it in on your html

Code: Select all

<a href="http://www.example.com" class="go"><span class="alt"></span></a>

Posted: Wed Oct 18, 2006 3:08 pm
by feyd
There should be some text inside that span as someone with CSS disabled will then likely not see a link.

Posted: Wed Oct 18, 2006 3:36 pm
by Obadiah
i didnt know you could disable css....and can think of a reason why someone would, in that case your out of luck i guess...using letters in the a tag would make the output tacky

Posted: Wed Oct 18, 2006 3:38 pm
by feyd
It's nice to know you care about people with disabilities. ;)

edit: spelling error.

Posted: Wed Oct 18, 2006 3:48 pm
by Obadiah
lol....what?!? are you serious...because if not then thats funny as heck....good one feyd :lol: ...i left myself open for that...the wheels are slow this week i had to read my comment over to get it but thats good stuff

Posted: Wed Oct 18, 2006 3:53 pm
by feyd
I'm quite serious. It was sarcasm, but it's still a serious matter.