form element hover
Moderator: General Moderators
form element hover
Is it possible to create an image form element that changes color when you hover over it? I can't think of a way.
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>and how would you do that?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.
Code: Select all
.search_box:hover{
/* What goes here? */
}yupOren wrote:You mean an image which is a submit button?
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.
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!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
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
thats moreso css....if your gonna go that route try this...works for all browserspickle 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'); }
first put this in there
Code: Select all
a.alt
{
display: none;
}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");
}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>