form element hover

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

form element hover

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

You mean an image which is a submit button?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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');
}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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:
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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!
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

There should be some text inside that span as someone with CSS disabled will then likely not see a link.
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

It's nice to know you care about people with disabilities. ;)

edit: spelling error.
Last edited by feyd on Wed Oct 18, 2006 3:52 pm, edited 1 time in total.
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm quite serious. It was sarcasm, but it's still a serious matter.
Post Reply