form element hover
Posted: Wed Oct 18, 2006 1:42 pm
Is it possible to create an image form element that changes color when you hover over it? I can't think of a way.
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
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?
Code: Select all
.search_button{
width:50px;
height:20px;
background-image:url('down.gif');
}
.search_button:hover{
background-image:url('hover.gif');
}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
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'); }
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");
}Code: Select all
<a href="http://www.example.com" class="go"><span class="alt"></span></a>